Hexo博客平台搭建
摘要: 进入计算机行业已经好几年了，这么多年的摸爬滚打，我终于意识到了一个血的教训:好记性不如烂键盘!当我们遇到问题并解决问题之后，我们应该及时的把我们处理问题的过程记录下来，一来可以防止我们在此遇到同样的问题时又要重复造轮子，二来可以为遇到同样问题的小伙伴提供经验，所以对于我们来说有一个属于自己的博客尤为重要。本文记录的是搭建hexo个人博客平台过程中遇到的一些问题和心得，希望能对小伙伴们有所启发。
avatar
文章概览
-
HEXO简介
- 静态博客与动态博客
- 基本流程
- 运行机制
- HEXO NEXT主题美化
- HEXO部署到GITHUB
-
提交搜索引擎
- 提交谷歌搜索引擎
- 提交百度搜索引擎
- 总结
HEXO简介
Hexo是一个基于node.js开发的快速、简洁且高效的静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
hexo具有以下这些特性：
- hexo基于node.js，非常小巧，安装部署简单
- hexo开源，主题丰富，插件丰富，自定义能力强
- hexo支持markdown语法，易于博客写作
- hexo是纯静态博客，不需要数据库支持
静态博客系统与动态博客系统
一个网站最基础的部分就是网页，如果想从HTML页面写起，显然成本太高，好在大牛们已经做好了博客生成器来解决网页编写的问题。一般来说，博客生成器分为动态和静态两种。其中，动态博客生成器典型代表有：WordPress、FarBox、Ghost等，静态的博客生成器典型代表有：Hexo、Jekyll、Octopress、Hugo等。关于动态和静态的区别主要有以下几点：
- 资源占用上，静态博客相对于动态博客占用服务器资源少，可以托管在github pages上，而动态博客往往需要一台相对独立的服务器
- 数据管理和更新操作上，由于动态博客有独立的数据库和后台管理系统，对资源的管理和发布相对比较容易；而静态博客往往需要一些第三方平台的支持，如评论系统以及图床，数据管理更新比较繁琐。
- 安全性上，静态博客比动态博客安全性更好
基本流程
这里我大致叙述一下搭建hexo博客系统的大致流程。我们首先要搭建hexo博客系统的开发环境，这里我主要讲解windows环境下的安装配置，其他系统的安装配置可以参考官方文档。
安装git
安装node.js
执行命令 npm install -g hexo-cli（安装hexo命令行工具）
执行命令 hexo init [文件夹名]
进入刚才初始化的文件夹，执行命令 npm install 即创建了一个原始的hexo博客系统
执行命令 hexo g 生成站点文件
执行命令 hexo d 把博客部署到站点
运行机制
首先我们来分析一下hexo文件夹的结构
- _config.yml:站点的配置文件
- db.json:缓存文件
- node_modules:安装的插件以及hexo所需要的一些node.js模块
- package.json：应用程序信息，配置hexo运行需要的js包
- public：生成的站点文件
- scaffolds：模板文件夹，新建文章时，会默认包含对应模板内容
- source：资源文件夹是存放用户资源的地方。所有的源文件都会被保存在_post文件夹中
- themes：hexo站点所使用的主题
为了搞清楚hexo的运行机制，我们有必要了解一下hexo的模板引擎（hexo使用的模板引擎是ejs编写的），模板引擎的作用就是将界面与数据分离最简单的原理是将模板内容中指定的地方替换成数据，实现业务代码与逻辑代码分离。我们可以注意到，在hexo中，source文件夹和themes文件夹是同级的，我们可以将source文件夹理解为数据库，而主题文件夹相当于界面，当执行hexo g命令时，就相当于将数据嵌入到界面中，生成静态文件public。
具体来说在hexo中，从markdown文件到生成html的过程中大致经历了两次渲染的过程：
- 通过解析markdown文件，并结合站点配置文件和source目录下的相关文件，生成相应的数据对象
- 将生成的数据对象嵌入到themes主题中的渲染引擎生成站点文件
[图片上传失败...(image-3210a5-1543192261908)]
HEXO NEXT主题美化
基于hexo博客系统的主题有很多，你可以在这里找到你喜欢的主题。我的博客采用的是next主题，我个人觉得next主题看上去简洁大方，用起来很舒服。这里我不会详细的介绍next主题的配置过程，我会分享一些我在配置过程中遇到的一些问题。
- next主题的官方网站详细阐述了主题的基本配置过程，我也是参照它一步步进行配置的
- 在配置主题之前推荐大家安装一款node.js的开发工具，有利于提高效率。我安装的是webstorm，它也支持markdown文件的编写，强烈推荐（这个公司提供的开发工具都很强大，pycharm也是这个公司的产品之一）。
- 在配置主题的过程中要注意区分两个配置文件，一个是主题的配置文件_config.yml，一个是站点的配置文件_config.yml。因为有些配置操作实在主题的配置文件中进行的，有的实在站点的配置文件进行的，一定不能弄混了。
- 推荐一篇next主题美化的博文
- 对主题进行配置时，我的建议是每修改一项之后都在本地运行一下（先运行hexo g命令，在运行hexo s命令，在浏览器中查看），看看有没有出错，这样我们可以及时找到出错的地方。
- hexo的配置文件是yaml格式的，它通过缩进来表示层级关系，修改配置文件时要主要缩进问题
HEXO部署到GITHUB
在对主题修改完成之后，下一步的工作就是将hexo部署到github pages。在部署之前，需要做好一些准备工作，具体的操作过程可以参考这篇博客。
- 注册github账号，添加ssh key
- 在github中新建仓库，仓库名为：username.github.io
- 修改站点配置文件的deploy选项
- 执行命令hexo deploy
在这些操作过程中我们需要注意一些问题：
- 在deploy的过程中可能会出现速度过慢的问题，这是由于GFW对github的限制造成的，可以通过代理或者修改hosts文件来提高访问速度
- 有时候会因为一些莫名其妙的问题导致deploy失败，无法解决这一问题时，我们可以通过复制生成的public文件，通过git提交到远程仓库，为了使整个过程更加自动化，我们可以在根目录下写一个脚本文件deploy.sh
hexo generate
cp -R public/* chaoge123456.github.io
cd chaoge123456.github.io
git add .
git commit -m “update”
git push origin master
每次提交更新时只需要在根目录下执行命令：./deploy.sh即可
提交搜索引擎
部署完成之后，现在我们可以通过浏览器访问到我们的博客，但是还有一件非常重要的事我们需要去完成。虽然我们可以通过浏览器访问到我们的博客，但是我们无法通过搜索引擎搜索到我们的博客，所以我们需要将我们的博客地址提交给搜索引擎。这时我们需要注意，github屏蔽了百度搜索引擎的爬虫，这也就意味着通过百度是无法搜索到我们在github上的博客（googl不存在这样的问题）。所以为了在国内也能访问到我们的博客，我们需要将我们的博客托管到国内的类似于github的平台——coding（coding的博客地址和github的博客地址不一样，所以接下来我们需要做的是将github的博客地址提交给google，将coding的地址提交给百度）。部署到coding的流程跟github类似，为了将站点同时更新到coding和github，我们需要在站点配置文件下的deploy选项的repo同时添加github和coding的远程仓库
deploy:
type: git
repo:
github: git@github.com:chaoge123456/chaoge123456.github.io.git
coding: git@git.coding.net:chao3236gmailco/chao3236gmailco.git
branch: master
提交谷歌搜索引擎
提交百度搜索引擎
百度搜索引擎入口
将站点地址提交给搜索引擎的步骤也比较简单，具体操作可以参考这篇博文
,这个过程中需要注意的问题是：
- 将验证文件提交给站点时，有人会认为，直接将验证文件放入public文件夹中然后执行hexo g和hexo d就可以将验证文件提交的远程仓库。这样做确实可以将验证文件提交的远程仓库，但是需要注意的是此时的验证文件经过了hexo渲染，和原来的验证文件已经不一致，这样的验证文件时无效的
- 正确的做法是通过git clone获得远程仓库，在将验证文件加入刚刚获得的远程文件，然后通过向远程仓库提交该文件
- 验证完毕后，要向搜索引擎提交站点地图，方便爬虫爬取站点
总结
HEXO+GITHUB+CODING博客搭建大概就是这些流程，希望大家看了我的博客会有所收获。这是我博客上的第一篇博文，确实不容易，希望以后能好好坚持下去吧。好了，夜已深了，晚安世界！
