如何利用Github+Hexo搭建个人博客

前言

2020年伊始，给自己设定了一些年度目标，其中之一就是在今年开始搭建自己的个人博客，记录和分享一些学习总结和工作经验，希望自己可以有一些沉淀和积累吧，同时，也希望给大家带来一点点帮助。

在这个背景下，我开始搭建自己的个人博客。
以下是我个人搭建博客的流程和心得。

（备注：本人操作系统为mac，部分操作在windows下会有一些不同。）

环境准备

安装Git

由于需要上传文件到Github,因此我们本地必须安装git.

# 安装git
brew install git
# 查看安装版本
git --version

安装NodeJs

我们要搭建的Hexo博客是基于NodeJs的，中间会有很多操作依赖其中的npm工具。

# 安装
brew install node
# 查看安装版本
node -v

安装Hexo

Hexo是一个强大博客框架，能够帮助我们完成博客的快速搭建，支持MarkDown书写博客。

# 安装hexo
npm i -g hexo
# 查看版本
hexo -v

博客搭建

创建博客仓库

在github中创建一个名为yourUserName.github.io，其中yourUserName是你的github用户名。

示例图：

备注：由于我的仓库中已经存在了对应仓库，所以截图会有红色提示，读者在搭建时注意仓库名称前缀和自己的username保持一致。

创建博客框架

接下来我们需要在本地来初始化我们的博客框架。

# 创建本地的博客目录
mkdir ~/blog
# 进入目录
cd ~/blog
# 执行博客框架初始化
hexo init

完成初始化后目录下会有以下文件或目录，对应的内容如下：

node_modules：框架依赖包
public：存放生成的博客页面
scaffolds：用命令生成文章使用的模板
source：存放命令创建的博客或者依赖的文件资源
themes：放置博客的主题文件
_config.yml：博客框架的配置文件
db.json：source解析所得到的数据文件
package.json：项目所需模块项目的配置信息

本地博客框架完成后接下来就需要进行博客配置修改。

关联GitHub博客仓库

首先我们要做的是建立本地博客和github博客仓库的关联。
在blog根目录下，找到生成的_config.yml文件，修改对应的部署配置：

deploy:
  type: git
  repo: https://github.com/Git-Aries/Git-Aries.github.io
  branch: master

其中还有一些site及个人信息相关的字段，这里不赘述。完成配置后，我们需要安装hexo部署到git的插件

npm install hexo-deployer-git --save

本地执行以下操作：

# 清理
hexo clean
# 生成静态博客文件
hexo generate
# 部署到指定github博客仓库
hexo deploy

执行完成后，耐心等待1-2分钟，在浏览器中访问我们的博客地址http://yourGithubName.github.io，可以发现我们的博客就完成初步搭建了。
备注： yourGithubName替换为你的github用户名。

本地调试

在绝大多数情况下，我们需要先自己确认博客内容能正常展示，再发布到github博客仓库。这时候我们可以执行hexo server,在本地起一个hexo服务进程，然后在浏览器访问http:127.0.0.1:4000,同样可以访问我们的博客主页。
通常情况下，本地调试时，修改博客后直接刷新浏览器页面就可以更新博客内容，但是如果修改的是博客框架配置，则需要重启本地hexo server才能生效。

# 查询hexo服务进程
ps aux | grep hexo
# 沙雕hexo server进程
kill -9 pid
# 重启服务
hexo server

主题配置

Hexo的默认主题是landscape,这个主题也许不合你的心意，但是Hexo维护了自己的主题平台，里面有很多博客主题可以下载，此外Github上也有很多开发者开发了很精美的博客模板，笔者的博客模板也是在github上下载的，这里给作者打个广告，对作者表示感谢！

Litten的博客，主题yilia
思伟的博客，主题yilia-plus

主题yilia-plus是在yilia主题基础上进行了优化和部分功能扩展。
OK，下面继续正题, 来讲一下主题切换的配置：

# 切换到本地博客目录
cd ~/blog
# 下载对应的博客主题到themes目录下,
git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus

切换主题配置，在博客框架的配置文件_config.yml中找到主题配置项修改为theme: yilia-plus.
每个主题也有自己的配置文件，进入themes/yilia-plus目录下，找到_config.yml文件，根据注释按照自己的需求进行修改，完成修改后重新发布即可。

个人博客搭建类的心得就分享到这里，后续会慢慢更新一些利用Hexo写博客的心得吧，没有写博客的经验，很多东西说的比较粗糙，也希望得到你的谅解！再次推一波我的个人博客，暂时还没开通评论功能，一定尽快开通来支持你的吐槽，哈哈···