用Hexo搭建博客学习过程分享

最新推荐文章于 2022-08-01 15:11:08 发布

LL今天更优秀了吗

最新推荐文章于 2022-08-01 15:11:08 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/weixin_40877040/article/details/106941566

版权

Hexo介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
　　　　　　　　　　　　　　　　　　——Hexo主页https://hexo.io/zh-cn/

准备环境

１.Node.js的安装和配置

Node.js是一个Javascript运行环境(runtime environment)，是一个让 JavaScript 运行在服务端的开发平台，让 JavaScript 成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

step1:下载
　　下载地址：https://nodejs.org/zh-cn/download/，下载安装包文件。

安装包文件（.msi）：可以安装、修改、卸载所安装的程序
二进制文件（.zip）：下载后解压即可使用

step2:安装
　　在安装模式这一步，不改变默认设置（全选）：

Node.js runtime 表示运行环境
npm package manager表示npm包管理器
online documentation shortcuts 在线文档快捷方式
Add to PATH添加到环境变量

step3：检验是否安装成功：
　　1.查看计算机-属性-高级系统设置-环境变量-path-编辑，可以看到node程序已经被加入全局变量。
　　2.打开命令行工具，输入node --version，可以看到node.js的版本。

2.安装Git

（由于Git是之前安装的，所以步骤省略了）
step1:下载
　　下载地址：https://git-scm.com/downloads
step2:安装
　　按照提示安装。
修改Git Bash的默认启动路径：https://blog.csdn.net/engineerxin/article/details/81041846

3.安装Hexo

（后来发现以下步骤中我所谓的“在git bash中运行xxx指令”，事实上却都是在git cmd的界面中运行的。。。问题不大，只是在git cmd中运行指令不需要加$罢了。
Git GUI和Git CMD以及Git Bash：https://blog.csdn.net/weixin_36058293/article/details/94388387）

step1：搭建Hexo环境
在Git Bash中运行命令npm install -g hexo-cli。

step2：初始化hexo
在Git Bash中，进入想要存放博客内容的文件夹，依次运行hexo init myblog，cd myblog，npm install（myblog是我想要存放内容的文件夹名，是Hexo初始化文件的路径，即站点目录）。

-遇到问题：在git bash中输入$hexo init myblog后运行，报错提示>$不是内部或外部命令，也不是可运行的程序或批处理文件。
原因：$是 Linux 下的提示符，相当于git命令行窗口的 C:\Users\Administrator>
解决方法：在git bash中输入指令hexo init myblog（即不加$）

-遇到问题：图片.png
原因：所安装的node版本过老，需要更新node
解决方法：下载gnvm（下载链接：https://github.com/Kenshin/gnvm），将下载好的gnvm.exe文件放到node的安装目录下（node的安装目录可以在命令行中运行where node指令获得），在命令行中运行gnvm update latest指令，然后运行gnvm use 14.2.0指令（这里的14.2.0是node的最新版本号，这条指令用来设置node当前使用版本），至此node版本更新完成。

补充：还有一条指令gnvm install <xxxx>用来安装指定版本的node，xxxx为所要安装的node版本号）

注意：windows下不能在git bash中直接运行n stable或者n latest来更新node，因为windows下没有n模块，不支持用这些指令

附：
1.另一个用来管理node版本的工具nvmw，下载及使用链接：https://github.com/TimothyGu/nvmw
2.window下使用nvmw控制nodejs的版本：https://www.jianshu.com/p/82c5f3a39559
2.所有版本的node.js下载链接：https://nodejs.org/zh-cn/download/releases/

step3：启动服务器
在Git Bash中运行hexo server指令。
然后在浏览器中打开 http://localhost:4000 （这是你的博客网址）查看属于你的第一份快乐。
按Ctrl+C可以停止运行。

至此，hexo博客本地搭建完成。

将本地Hexo博客推送到GithubPages

（从这里开始用的是Git bash）

1.配置GitHub账户信息

首先在GitHub中注册登录，并创建一个仓库（repository），命名为<GithubName>.github.io。
然后在Git bash中依次运行git config --global username

2.安装hexo-deployer-git插件

在Git Bash中运行命令npm install hexo-deployer-git --save

3.添加SSH key

SSH 为建立在应用层基础上的安全协议 ,利用SSH协议可以有效防止远程管理过程中的信息泄露问题。通过SSH可以对所有传输的数据进行加密，也能够防止DNS欺骗和IP欺骗。
ssh key让你方便的登录到 SSH 服务器，而无需输入密码。由于你无需发送你的密码到网络中，SSH 密钥对被认为是更加安全的方式。
ssh和ssh key的介绍：https://www.jianshu.com/p/1246cfdbe460

step1：创建一个ssh key
在git bash中运行命令$ ssh-keygen -t rsa -C "邮箱地址"，回车三下。

step2：添加到Github
在上一步的运行结果中有一句Your public key has been saved in /c/Users/LENOVO/.ssh/id_rsa.pub，按照这句话提供的路径找到id_rsa.pub文件，用记事本打开，复制内容。
在GitHub中，点击右上角头像——settings——SSH and GPG key——New SSH key，将id_rsa.pub文件的内容粘贴进去保存。

step3：测试是否添加成功
在git bash中运行命令$ ssh -T git@github.com，对于运行中出现的Are you sure to continue connecting (yes/no)?的问题，输入yes并回车继续运行。
最后返回You've successfully authentictated即表示添加成功。

4.修改_config.yml

_config.yml文件站点目录下。文件末尾修改为

#  Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
  branch: master

其中<Github账号名称>换成自己的Github账号。

5.推送到GithubPages。

在Git Bash中依次输入以下命令，

$ hexo g
$ hexo d

返回INFO Deploy done: git即成功推送。

遇到问题：运行hexo d时程序报错，
图片.png
原因：node版本太新
解决方法：用gnvm安装稍旧版本的node。

遇到问题：运行hexo d时报错，
运行hexo d一直出现的问题.png
原因：github仓库的名字设置错了，设置成了username
解决方法：将仓库名设置为username.github.io。

（呜呜呜呜呜呜呜，让我说让我说：今天是7.1号，这个问题我搞了半个多月，一直不明白到底是哪一步出现了问题，看了无数的网页和教程，经历了N次ssh key重置，无数次满怀希望地运行起hexo clean，hexo g，hexo d，然而一次又一次的ERROR: Repository not found用不变的姿态在我头顶浇下一瓢凉过一瓢的冷水，在这个过程里我要感谢Hexo默认主题中的index.html这个网页，让在未知的黑暗中灰头土脸摸爬滚打的弱小无助的我，在颤抖着双手敲下http://localhost:4000进入这个网址时总能看到“希望”他那模糊的身影。身为一个懒惰的胖废人不仅预习到了将来可能遇到的无数error和它们的解决方法，搞明白了一直拖延的github的使用方法，甚至还学习了一些git命令，然而却是愈发像一只无头苍蝇，在找错误的错误道路上越走越远……直到今天，亲爱的党99岁生日这天，我抱着不抛弃不放弃的精神，再次打开一个又一个网页学找问题的根源，终于被

（图片来源：https://www.cnblogs.com/kiscall/p/4741097.html）这道耀眼的光透过我的眼睛直击我的心灵，使我顿时耳清目明，茅塞顿开，打通任督二脉，守得云开见月明（对不起我有点激动），总之，在颤抖着双手改完了仓库名后，我终于看到了这幅美丽的画面!
果然人都是要为自己的所作所为付出相应的代价的，我这就是因为一时的粗心大意铸成小错，结果花了百十倍的时间和精力去弥补，耽误了多少别的事情啊。
总之总之，走过路过的施主们，做事万万细心啊（双手合十，虔诚恳请.ing）

#更改主题
Hexo默认的主题是landscape，可以在Hexo官网|主题页面上下载自己喜欢的主题。

我选择的是Next主题，在Next官网 http://theme-next.iissnan.com/getting-started.html有详细的使用方法。

下载完成后，更改站点目录下的配置文件-config.yml中的theme:后的内容为新主题的名称。在git bash中运行hexo clean，hexo g，hexo d，hexo s，即可查看更换主题后的本地博客（http://localhost:4000/
）和GithubPage上的效果（https://.github.io/
）。
注意：theme:后面有一个空格，留着它。

遇到问题：运行hexo s --debug时，出现警告WARN No layout: index.html，访问http://localhost:4000，网页无显示
原因：下载主题时，指令git clone https://github.com/iissnan/hexo-theme-next themes/next时，themes/next误拼写成了theme/next。
解决方法：重新输入正确的命令运行

遇到问题：下载主题时报错error: RPC failed; curl 18 transfer closed with outstanding read data remaining
原因：网速过慢
解决方法：等网络好时再下载

遇到问题：更换主题后网站显示空白
原因：下载主题时网络不好导致下载的next主题文件夹内容不全
解决方法：重新下载主题，下载完成后next文件夹下的目录如下：

遇到问题：更换主题后网站显示空白
原因：下载主题时网络不好导致下载的next主题文件夹内容不全
解决方法：重新下载主题，下载完成后next文件夹下的目录如下：

遇到问题：更换主题后，运行hexo s，报错Error: Cannot find module 'hexo-util'
原因：未安装hexo-util
解决方法：gitbash中运行指令npm install hexo-util --save

#主题配置
1.更换背景
将背景图片放在主题文件夹的images文件夹里（路径如...\themes\next\source\images\background.png），打开...\themes\next\source\css\_custom目录下的custom.styl文件，添加如下代码：

body{
background:url(/images/background.png);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Gitbash中运行hexo clean，hexo g，更换背景图完成。

未完待续……
主要参考教程：https://www.simon96.online/2018/10/12/hexo-tutorial/