基于Github Pages 使用Hexo搭建个人博客

从一个小白开始搭建个人博客，期间参考了不少博客，踩了无数坑才搭起来的，现在总结下，希望能帮助大家少踩点坑。

一、整体流程：

1、配置环境，安装Node.js、git
2、安装hexo
3、hexo本地配置，实现本地发布、预览
4、关联Github
5、配置hexo的主题

二、具体实现：

1、配置环境

1、 Node.js 安装

用来生成静态页面。移步Node.js官网，下载左边稳定版的就可以，按照提示安装即可。
在终端里面输入node -v,可以查看node.js版本,以此来验证是否安装成功
也可以按照hexo文档上提示用命令行安装Node.js

2、 git安装

Mac电脑自带git,如果没有可以参考上hexo官网的安装方法
在终端里面输入git --version,可以查看git版本，以此来验证是否安装成功

2、安装hexo

必须确保Node.js和Git都安装好才可以正式安装Hexo了

Node.js和Git都安装好，在终端执行如下命令： sudo npm install -g hexo 输入管理员密码（Mac登录密码）即开始安装 (sudo:linux系统管理指令 -g:全局安装)

注意坑一、Hexo官网上的安装命令是$ npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。

在终端里面输入hexo -v,可以查看hexo版本,以此来验证是否安装成功

3、hexo本地配置，实现本地发布、预览

完成hexo的本地配置，即可实现本地的静态博客，实现发布文章、预览文章。

初始化终端cd到一个你选定的目录，执行hexo init命令： hexo init blog blog是你建立的本地博客文件夹名称。
安装npm cd到blog文件夹下，执行如下命令，安装npm:(NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题) npm install
发布文章在终端执行如下命令，发布文章： hexo new "test" #发表文章 test是文章名字，默认是markdown的.md格式，名字尽量不要使用汉字。 test.md会默认生成在blog/source/_post文件夹下。以后发布文章都要在这个_post文件夹下，也可以把文章写好后直接拖到这个文件夹下。
生成静态页面 hexo generate 或者 hexo g #生成静态页面，生成的内容在public文件夹下

此时若出现如下报错：
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行命令：

`npm install hexo --save`

若无报错，自行忽略此步骤。

开启hexo服务器

hexo s 或者 hexo serve

如果执行后报错，您需要先执行安装npm install hexo-server --save，再执行上面命令

With the release of Hexo 3, the server has been separated from the main module. To start using the server, you will first have to install hexo-server. 参考文档 hexo.io/docs/server…

此时，浏览器中打开网址http://localhost:4000，就能看到博客内容

4、关联Github

1、创建仓库登录你的Github帐号，新建仓库，名为 ”用户名.github.io“ 固定写法，如sunny-xl.github.io 。用户名必须和你的github的用户名一致。
2、把本地博客和github新建的仓库地址关联起来

此时，本地blog文件夹下内容为：

_config.yml
node_modules
package.json
public
scaffolds
source
themes

1、修改_config.yml内容，关联github

我现在用的Visual Studio Code 来编辑内容，您可以选择自己喜欢的编辑器编辑文件

终端cd到blog文件夹下，vim打开_config.yml，命令如下： vim _config.yml

打开后往下滑到最后，修改成下边的样子：

deploy:
 type: git
 repository: https://github.com/sunny-xl/sunny-xl.github.io.git
 branch: master
 message: 'Daily updated：{{now("YYYY-MM-DD HH:mm:ss")}} by sunny'

你需要在repository后填写你刚才建立的仓库地址，可以用https地址，也可以用ssh地址。hexo 3.1.1版本后type:值为git。

注意坑二：在配置所有的_config.yml文件时（包括theme中的），在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错，切记切记

2、博客部署到github上

在blog文件夹目录下执行生成静态页面命令： hexo g 再执行部署命令： hexo deploy 或者：hexo d

注意坑三：若执行命令hexo deploy仍然报错：无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git： npm install hexo-deployer-git --save

再次执行hexo generate和hexo deploy命令。

若你未关联Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，即

Username for 'https://github.com':
Password for 'https://github.com':

hexo d 命令执行成功后，浏览器中打开网址sunny-xl.github.io（将sunny-xl换成你的用户名）能看到和打开http://localhost:4000时一样的页面

至此，搭建基于Github Pages的Hexo博客就完成了。下面的内容是介绍安装theme，如果有兴趣且还有耐心的话，请继续吧。

5、配置hexo的主题

你可以到Hexo官网主题页去搜寻自己喜欢的theme。这里以hexo-theme-next为例

下载next主题

终端cd到 blog 目录下执行如下命令： git clone https://github.com/iissnan/hexo-theme-next themes/next

修改配置将blog目录下_config.yml里theme的名称landscape修改为next即可。

终端cd到blog目录下执行如下命令(每次部署文章的步骤)：

 hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)
 hexo g            //生成缓存和静态文件
 hexo d            //重新部署到服务器

至于更改theme内容比如名称、描述、头像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可，不要忘记冒号:后加空格。 NexT使用文档里有极详细的介绍。