Github+Hexo,搭建专属网站

前言

记得从大二开始，就一直想搭个专属网站，当时使劲抠页面【前端页面是从QQ空间抠的，如今想抠估计没这么容易了】，写代码，忙活半天才把程序弄好。

惋惜最终项目仍是没上线，由于当时有两问题绕不开

• 须要购买服务器【服务器太贵，如今便宜的阿里云服务器每个月都需100左右】。
• 须要运维管理【麻烦且危险，服务器宕了可能丢失数据】。

最近了解到 github + hexo 能完美解决上述问题，啥也不说了，直接开干 ^.^

---

相关网站

搭建教程网上比比皆是，此处不累赘，下面是搭建过程当中用到的相关网站：

hexo中文网站：https://hexo.io/zh-cn/docs/
hexo主题模板：https://www.zhihu.com/question/24422335
hexo+github搭建过程：http://www.jianshu.com/p/df3edc4286d2
Markdown 语法说明：http://www.appinn.com/markdown/
github绑定域名：http://www.jianshu.com/p/1d427e888dda

---

HEXO如何优化部署及管理

问题：使用hexo时，若是本地文件丢失或者想在其余电脑上修改博客怎么办？
方案：简单地说，每一个想创建GitHub Pages的仓库，至少两个分支，一个hexo分支用来存放网站的原始文件，一个master分支用来存放生成的静态网页。

步骤以下:
一、建立仓库，Wasim37.github.io；
二、建立两个分支：master 与 hexo；
三、设置hexo为默认分支（由于咱们只须要手动管理这个分支上的Hexo网站文件）；
四、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷贝仓库；
五、在本地Wasim37.github.io文件夹下经过Git bash依次执行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git（此时当前分支应显示为hexo）;
六、修改_config.yml中的deploy参数，分支应为master；
七、依次执行git add .、git commit -m “…”、git push origin hexo提交网站相关的文件；
八、执行hexo generate -d生成网站并部署到GitHub上。

本地修改
一、在本地对博客进行修改（添加新博文、修改样式等等）后，经过下面的流程进行管理：
依次执行git add .、git commit -m “…”、git push origin hexo指令将改动推送到GitHub（此时当前分支应为hexo）；
二、而后才执行hexo generate -d发布网站到master分支上。

本地资料丢失或者想在其余电脑上修改博客
一、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷贝仓库（默认分支为hexo）；
二、在本地新拷贝的Wasim37.github.io文件夹下经过Git bash依次执行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（记得，不须要hexo init这条指令）。

---

安装错误记录

执行hexo d出现如下错误

解决方法：
_config.yml ——> deploy ——> repository
https://github.com/{username}/{username}.github.io.git 修改成
git@github.com:{username}/{username}.github.io.git

---

文章编辑工具

文章编辑工具一开始我使用的是subline，但由于没有快捷键及预览功能，后来选择了MarkdownPad。可最近发现新版的有道云笔记支持Markdown语法，果断换成了有道。
由于有道除了编辑功能，我更看重的是它对文章的二次备份.

有道云笔记MarkDown使用教程： http://note.youdao.com/iyoudao/?p=1895

其次文章图片若是不想托管在github，可使用七牛云存储等图床工具。

---

模板自定义

我使用的博客主题为 icarus，对比能够发现，我在展现细节上作了一些本身的修改。

好比页面展现能够分为左中右三个区域，分别为profile-column，main-column和sidebar-column。
源代码三者宽度比例为3:7:3。为了突出正文，我改成了 2.3：8.4：2.3。
源代码文件位置为：icarus\source\css _variables.styl

---

文章目录

icarus主题模板的文章详细展现默认是不带有文章目录的
若是须要添加文章目录，能够参考http://www.jianshu.com/p/72408c410904

icarus主题添加文章目录，修改themes\icarus\layout\common\article.ejs文件便可。

<% if (!index && post.toc) { %>
修改成
<% if (!index && post.toc != false) { %>

每篇文章能够选择是否开放目录功能

...
title: Github+Hexo,搭建专属网站
categories:
  - demo
toc: false
...