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

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/，下载安装包文件。

Node.js下载界面

注：不要安装太新的或太旧的版本。

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

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

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

step3：检验是否安装成功：
　　1.查看 计算机-属性-高级系统设置-环境变量-path-编辑 ，可以看到node程序已经被加入全局变量。

node已加入全局变量

　　2.打开命令行工具，输入node --version，可以看到node.js的版本。

2.安装Git

step1:下载
　　官网下载地址：https://git-scm.com/downloads（但是下载速度非常非常慢，不建议……，下面会提供两个更快速的下载网址）

git下载界面

git下载网址1：http://apache.soxinyang.com/#/down/adb546cc9830db6735ce4c0b9d2ec133
git下载网址2：
https://npm.taobao.org/mirrors/git-for-windows/
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 用来安装指定版本的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），命名为.github.io。
然后在Git bash中配置git用户名和邮箱，依次运行
git config --global user.name "你的github用户名"
git config --global user.email "注册GitHub时用的邮箱"

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 [email protected]，对于运行中出现的Are you sure to continue connecting (yes/no)?的问题，输入yes并回车继续运行。
最后返回You've successfully authentictated即表示添加成功。

3.修改_config.yml

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

#  Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:/.github.io.git
  branch: master

其中换成自己的Github账号。

4.推送到GithubPages。

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

$ hexo g
$ hexo d

返回INFO Deploy done: git即成功推送。
补充：强烈建议了解一下hexo指令https://hexo.io/zh-cn/docs/commands.html
hexo s——本地预览
hexo g——根据配置文件和主题，将 root/source/_post 下的 markdown 文件生成 html 内容

hexo clean——清空 hexo g 生成的内容，内容在 root/public
hexo d——将本地生成 url 链接推送到百度，让百度爬取其中的内容进行索引

遇到问题：运行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岁生日这天，我抱着不抛弃不放弃的精神，再次打开一个又一个网页学找问题的根源，终于被

image.png

（图片来源：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文件夹下的目录如下：

image.png

遇到问题：更换主题后，运行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，更换背景图完成。
2.静态资源压缩
在站点目录下运行$ npm install gulp -g

写作

1.执行hexo new [layout]