Hexo + GitPage 搭建个人博客

动机

想必众多程序猿/媛，多少都有自己要写技术文章的想法，无论是创作还是技术总结，写博客的确对技术人员来说有众多好处。当然，现在都9102年了，早已有许多支持个人创作的平台，最终对比了简书、掘金、CSDN、wordpress，(当然这几种都实操过了)，还是Hexo配合GitPage的方式成功胜出：markdown语法编辑文章、可自定漂亮博客主题、部署难度低，这几点对我来说都有足够的吸引力。
下面就记录下搭建的过程，相信能帮到同道中人😄

基础条件

假设你已经有了以下的基础条件，这会帮助你快速的搭建起博客：

1. 要有个人网站域名
2. Git、npm 基础

搭建

在正式开始之前，有必要了解一些框架和他们之间的关系

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

• GitPage
  GitPage允许你创建自己的博客，直接帮你省了自己购买服务器、运维等一系列操作，这是对比wordpress让我觉得轻松的关键一点，从此只需要focus在文章上就行了。

两者之间的关系：
Hexo生成博客框架，通过命令行直接部署在Github上，就可以外网访问你写好的文章了

安装Hexo

1.npm全局安装Hexo

$ npm install -g hexo-cli

2.生成项目，其中<folder>是你的项目名

$ hexo init <folder>
$ cd <folder>
$ npm install

这个时候可以运行在本地了

hexo s // 这个是hexo server的简写
// 如果需要指定端口号，使用下面这个命令
hexo s -p 端口号

浏览器输入localhost:4000即可查看效果，默认使用的主题是landscape

landscape主题效果图

更换主题

1. 这里直接推荐一个非常简洁的主题NexT，当然还可以去官网主题找你自己心仪的一款
2. 修改主题也十分简单，将你想要的主题下载放在themes文件夹下即可，然后直接修改站点的配置文件_config.yml，注意这个文件是在项目根目录的，每个主题下文件夹下也有自己的主题配置文件，文件名也是_config.yml，我想这个应该也比较好区分
3. 下载NexT主题，需要在themes目录下下载git clone https://github.com/iissnan/hexo-theme-next

4. 修改配置文件的主题配置

   
   主题

5. 刷新浏览器，可以看到博文的效果

   
   新主题

主题配置

我们任可以继续捣鼓NexT的配置，主要有以下几点，这个可以自行更改选择自己最喜欢的效果

• 站点图标favicon
• 页脚footer
• 菜单menu
• 方案scheme
• 社交social
• 侧栏头像avatar

新建文章

新建文章很简单，执行

hexo n "这里是文件名"

文件就生成在source/_posts目录下，直接编辑markdown文件就可以了，保存编辑的内容，浏览器刷新就可以实时看到修改效果，当然你也可以在你喜欢的其他markdown编辑器上编辑。

部署

首先我们要安装deploy插件

npm install hexo-deployer-git --save

然后在GitHub上新建一个仓库，仓库名命名的规则是<name>.github.io，我们用他来承载打包好的博客。修改站点的配置文件_config.yml，将仓库的地址填进去

配置仓库地址

执行以下命令部署

hexo g // hexo generate 的缩写
hexo d // hexo deploy 的缩写

部署完我们就能看到刚刚新建的仓库上已经有代码了，然后去到项目Setting里，打开GitHub Pages，通常是master分支，并且将你自己的域名填进Custom domain里

GitHub Pages

在/source目录下，新增一个文件名为CNAME的文件，里面填上你自己的域名，这样能保证GitHub Pages每次更新都从这里读取自定义的域名

最后一步需要将域名解析到github.io的ip地址上，ping一下github.io，拿到ip:185.199.111.153

域名解析

完结撒花

我的域名是mikey.top,直接访问这个地址就可以指向部署好的博客地址，效果非常显著，哈哈😎😎