搭建个人博客网站Github、Hexo与Next
搭建个人博客网站Github、Hexo与Next
过年回家前在公司的最后一天，说实话有点心不在焉了。整个2017也就这样恍然过去，很多事都来不及回想。在这最后的时间里，想起把自己使用Hexo搭建个人博客网站的流程整理成篇，前段时间为了这个也是找了好多资料，遇到不少坑，将它记录在这里就算是旧年里的最后一个节点，毕竟春节过后新的一年就要真正开始了。
温馨提示：由于本篇是后期整理的文章，一些在实际操作中遇到的错误可能会遗漏，但都是可以百度到的，当然，我也欢迎大家留言问题，以供完善记录。
效果展示：风恣的博客
目录
一、准备工作 二、搭建博客(远程与本地) 三、发布博客 四、更换主题 五、博客网站美化 六、在不同电脑管理hexo博客 七、遇到问题 八、其他方案
一、准备工作
1.了解Hexo
Hexo是高效的静态站点生成框架，她基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容，而且相对于其他框架，Hexo在速度上也有很大优势。
2.搭建Node.js环境
我们了解到Hexo基于Node.js的，那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在非浏览器环境下，解释运行 JS 代码。 下载地址：http://nodejs.cn/download 测试安装：命令行使用node -v 、npm -v，查看显示版本号即成功。
3.安装Hexo博客框架工具
Hexo是一个建站工具，可以帮助我们快速生成基本的博客文件，安装它需要在控制台下使用如下命令：
npm install hexo-cli -g若报错，请尝试在命令前加上sudo
4.安装Git版本工具
Git是目前世界上最流行的分布式版本控制系统，是的，没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上，实现同步。 下载地址：https://git-scm.com/downloads Windows系统需下载，Mac系统因为自带Git无需操作。 测试安装：git - -version，查看显示版本号即成功。
5.注册Github账号
gitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。这里用到Github，是因为我们需要通过Github得到自己的博客网站域名，而且需要使用gitHub同步我们个人博客的相关文件。 注册地址：https://github.com 注册流程：https://www.baidu.com，百度一下，你就知道啦。
注意：注册Github的时候一定要选择一个合适的名字，因为后来博客网站的域名也会用到这个名字。虽然Github用户名支持后期修改，但是还是会带来很多不必要的麻烦。github的使用在网上有很多教程，这里也就不再累述了。
二、开始搭建博客
1.开启GitHub Pages服务
搭建我们的个人博客需要一个唯一的域名，当然我们可以申请购买一个域名来使用，但是在不是太必要的情况下，我们也可以通过Github Pages获得一个免费使用的域名，这需要我们在Github上新建一个仓库，如下：
Create a new repository
这个过程和建立普通的仓库没什么区别，关键在于新仓库的名字，一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是：https://UserName.github.io的形式。 注意：固定新仓库的名字格式并非必须，只是这样操作生成的博客域名比较短小简洁，另起他名生成博客域名会很冗长。
点击Create Repository之后，随后选择Setting进入设置，找到Github Pages如下：
Github Pages
这里我们需要点击Choose a theme任意选择一个选择主题，然后界面会跳转到仓库，我们看到有两个文件如下：
屏幕快照 2018-02-07 下午2.45.24.png
此时若再查看setting，我们会看到开启GitHub Pages之后得到的域名如下：
image.png
现在，我们就可以使用https://UserName.github.io，访问自己的博客网站了，打开链接我们会看到默认主题的个人博客样式如下(虽然有点点丑，是吧)：
image.png
2.创建本地博客站点
上述的步骤相当于我们使用Github page，创建了一个默认的博客页，并且得到了一个可外部访问的域名。但是这个博客页很Low。我们的目的是创建自己个性化的博客网站，所以我们使用Hexo在本地先创建一个本地博客站点，优化后再把它部署到github上。接下来我们使用控制台命令在本地一个合适的位置创建博客站点文件夹如下：
hexo init myHexoBlog //myHexoBlog是项目名
下面来测试本地博客站点，在本地博客根目录下使用控制台命令：
hexo g //g是generetor的缩写，生成博客
hexo s //s是server的缩写，启动服务此时打开浏览器，输入 http://localhost:4000/，我们将会看到Hexo自带默认主题显示的博客样式如下(呃，是好看了那么一点点)：
3.同步Github,允许公共访问
在本地我们已经搭建了博客，但是还只能自己本地访问。若要别人也能看到，那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗，这里就要用到了。 首先找到我们的博客仓库，并拷贝仓库地址：
然后修改本地博客目录的配置： 修改本地博客根目录下的_config.yml文件，修改deploy下的配置如下：
最后执行控制台命令：
npm install hexo-deployer-git —save //安装部署插件
hexo d //部署到github现在，我们再次访问链接：https://userName.github.io，就会发现这里的界面和本地的一样了。如此一来我们搭建的个人博客网站就基本完成了。
三、发布博客
激动人心的时候到了，终于可以发布自己的第一篇博客了。来尝试一下以下的步骤： 在本地博客文件夹根目录输入：
hexo new "我个人博客的第一篇博客，哈哈哈..."
hexo g //生成网页
hexo d //部署到远端(github)查看我们本地的博客文件夹，将会看到我们创建一个条新的博客文章：
image.png
现在打开我们的博客网站：http://UserName.github.io,会看到网页如下(显示可能会延时，不如先喝杯茶放松下吧)：
这就是我们发布博客的方法啦，当然这里是为了演示，真正做的时候我们要找到_posts里的博客原文，先编辑内容，然后再部署到github上。
四、更换主题
现在我们已经看见个人博客的雏形了，但是现在的博客网页一点也不高大上。为了让它看起来更美观一些，我们可以为其更换主题（当然也可以自己在默认主题下自己编写美化博客界面，可是我还不太会前端，以后再突破吧）。这里以使用github上的next主题为例：
1.创建next文件夹
切换到本地博客根目录下，在主题文件thems下创建一个新文件夹next存放即将下载的next主题
mkdir themes/next 2.下载主题Next
curl -s [https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest](https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest) | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1此步骤可参考：https://github.com/iissnan/hexo-theme-next
下载成之后我们会看到next的主题已经存在thems里了如下：
3.修改博客配置文件，更换主题配置
修改博客根目录(不是next主题)下的_config.yml文件，搜索theme字段，并将其值修改为next。
然后在控制台下输入如下命令：
hexo clean //清理缓存
hexo g //重新生成博客代码
hexo d //部署到远端再次打开我们的博客网站：https://UserName.github.io，将会看到更换主题后的博客网页如下：
屏幕快照 2018-02-07 下午3.50.50.png
五、博客网站美化
终于我们的博客也算像点样子了，如果你和我一样是个完美主义者，那我们来继续美化它吧。这需要我们对博客中的各种配置进行修改。
首先说明一下：在Hexo中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
1.站点配置：
在本地的博客根目录下找到_config.yml，用编辑器打开，如下：
这里可以修改博客网站的标题、描述，语言等属性，上面更换主题也是在这个文件中修改的。大家可以在这里稍作设置。
2.主题设置
关于博客主题的配置这块本来想着自己写下呢，却发现官方文档更加详尽。大家可以参考Next文档来学习。 文档地址：http://theme-next.iissnan.com/getting-started.html 其他参考： hexo的next主题个性化教程 打造个性超赞博客Hexo+Next+githubPages的超深度优化
3.更多主题选择
next只是众多Hexo主题的一种，还有很多优秀的主题可供我们选择，参考以上的更换及配置方法我们就可以进一步美化我们的个人博客网站了。 更多主题选择：https://github.com/hexojs/hexo/wiki/Themes
六、在不同电脑管理hexo博客
其实，这也是我在使用Hexo搭建博客遇到的一个问题，如果我们检查自己博客在Github上的文件就会发现，github仓库里的文件和我们本地博客站点的文件夹是不同的，确切来说是少了很多内容。如果我们想在不同的电脑上管理自己的博客，就必须有源文件存在远端供我们随时下载、然后修改后重新部署到远端。
我们要理解这样一个过程：hexo d是把本地博客源文件生成的静态网页文件同步到github上，实现部署。但是博客网站的源文件仍需要我们自己保存。这里主要有两种思路可以选择：
1.在github存放我们博客静态网页文件的仓库里另建分支brach，单独用于存放源文件。 2.将本地博客文件存放在码云上。
这些都是关于git的操作，所以这里不用细说了。单对于这两种方法来说，我更倾向于第二种。因为毕竟这些都是我们搭建个人博客的源文件，将来还要在网站上发表文章，很多数据都在这里。使用码云我们可以创建私有仓库，将这些源文件私有存放更好一些，而且源文件和静态博客网页文件分开存放也避免使用分支频繁切换。
七、遇到问题
1.修改了配置，网站没有变化
这种情况，大多因为修改后配置后我们直接部署，没有执行hexo clean。
2.代码无法高亮显示
在Hexo的next主题下，我们使用markDown编辑文章，如果代码无法高亮，这有可能是我们没有在标记语言后添加语言类型，我需要在添加代码片段的时候使用如下的样式：
类似其他语言用：java、python...
八、其他方案
还有一种搭建博客网站的方案是Jekyll，还没有细致研究呢，先记在这里为以后扩展思路。
终于写完了，祝新的一年越来越好，加油！- 2018-02-13