Git Pages + Jekyll/Hexo搭建自己的博客(最全总结你想知道的都在这里了)

1 Github Pages

比较懒，默认都是用过gitbhub的啦

安装 Git

Windows：下载并安装 git.
Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core
Windows 用户
由于众所周知的原因，从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

Mac 用户
您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

---

Windows 用户
由于众所周知的原因，从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

step1 创建一个库 Create a repository

在GitHub 页面创建一个库 命名规则是：username.github.io（username是Github用户名）。

例如我的就是CatherineLiyuankun.github.io，我已经建过这个库了，所以报错说库已经存在。

step2 clone 库

step3 创建index.html

step4 git push

step5 访问页面

我的对应页面就是： https://catherineliyuankun.github.io/

上面照着pages页面的步骤做就行，重点在下面

---

2 Jekyll or Hexo ?

弄到这里，我就犹疑了，查了查有用Jekyll 也有用 Hexo。这两个静态页面生成器（Static Website Generation）到底有什么区别，各自优缺有是什么呢？

Tables	Jekyll	Hexo
依赖	ruby gem （gem依赖也许会带来不兼容问题弱点）	nodejs
	brew install ruby	brew install node
安装	gem install jekyll	npm install hexo-cli -g
生成静态站点的速度	随着网站内容增加越来越慢 最大弱点	相当快 优点
与git Pages关系	背后运行引擎，支持html/md格式（把原文上传github， 可以直接生成博客，也可以用在线编辑器处理，但只能用Github-safe plugins）优点	无直接关系（本地生成 html 再上传），部署简单：deploy to Github pages or any other host with one deploy command
格式	html/md	md
是否需本地环境	不需	需要
编辑	不支持在titles或者YAML使用变量，许多插件过时了弱点；不buid-in支持livereload；不buid-in支持post pagination as of Jekyll 3	大量可用的免费插件 优点
模板	copy Jekyll创始人的示例库，以及其他用Jekyll搭建的blog	大量可用的免费开源主题 中国社区很活跃优点
迁移	依靠Jekyll importers可从其他平台迁移博客（例如WordPress）优点	https://hexo.io/zh-cn/docs/migration
开源	免费开源	免费开源
category 分类	需要自己写标签语言遍历然后在创建各个分类的主页，再设置页面css，或者用ruby写插件	文章前使用“category: 分类名”，自动右边生成，包括分类主页，默认样式
教程难度	相对更难	更简洁
上手难度	相对更难	更简单

---

3 Jekyll

官网： https://jekyllrb.com/docs/quickstart/
中文版官网：https://www.jekyll.com.cn/docs/quickstart/

step 0 前提安装有ruby

• 如果你是Mac用户，你就需要安装 Xcode 和 Command-Line Tools了。下载方式 Preferences →
  Downloads → Components。如果安装过Xcode和 Command-Line Tools，那就已经有ruby了。

• 在 Windows 下使用 Jekyll 你可以使用 Jekyll running on Windows, 但是官方文档并不建议你在 Windows 平台上安装 Jekyll。

安装 ruby

Mac

brew install ruby

Linux

sudo apt-get intall ruby 

我已经安装有了。
检查下版本：

ruby -v

step1 安装Jekyll

开始正题

~ gem install jekyll

step2 建my-awesome-site

~ jekyll new my-awesome-site

手动把my-awesome-site目录下的所有内容复制到自己的git库中，我的是~/MyOwnGit/CatherineLiyuankun.github.io 或者是命令行复制

cd my-awesome-site
cp -R * /Users/liyuankun/MyOwnGit/CatherineLiyuankun.github.io/

step3 启动Jekyll环境

➜  CatherineLiyuankun.github.io git:(master) ✗ jekyll serve

step4 访问页面

通过http://localhost:4000 ，访问页面。

step5 Jekyll博客模板

Jekyll创始人的示例库，以及其他用Jekyll搭建的blog。

---

4 Hexo

官网主题(模板)： https://hexo.io/themes/
中文版官网：https://hexo.io/zh-cn/docs/

step 0 前提安装有Node.js

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。
安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载 安装程序 来安装。

Windows 用户
对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

step1 安装 Hexo

开始正题,所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

step2 init Hexo

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中(我新建了文件夹hexofolder)新建所需要的文件。

$ hexo init hexofolder
$ cd hexofolder
$ npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml
网站的 配置 信息，您可以在此配置大部分的参数。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。(具体看官方文档，这里就不赘述了)

scaffolds
模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

step3 Hexo 命令

在文件夹下就可以执行

$ hexo g #hexo generate 生成
$ hexo s #启动本地web服务器

这时，通过http://localhost:4000 ，访问页面。就可以看到，hexo默认带的主题landscap的效果。

Hexo常用的几个命令：
hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）
另外还有其他几个常用命令：

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

常用简写

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

常用组合

$ hexo d -g #生成部署
$ hexo s -g #生成预览

step4 添加其他主题

官网主题(模板)： https://hexo.io/themes/，在上面选择自己喜欢的模板，进入它对应的git页面，获得clone的链接。

这里以我改的主题Hexo-theme-zilan为例进行说明， 我这个主题增加了。

安装主题

$ hexo clean
$ cd hexofolder/themes
$ git clone https://github.com/CatherineLiyuankun/Hexo-theme-zilan.git

可以看到themes文件夹下多了一个文件夹Hexo-theme-zilan。

启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为Hexo-theme-zilan。

###更新主题

$ cd themes/Hexo-theme-zilan
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

现在打开http://localhost:4000/ ，会看到我们已经应用了一个新的主题。

step5 部署到git pages

这一步恐怕是最关键的一步了，让我们把在本地web环境下预览到的博客部署到github上，然后就可以直接通过http://CatherineLiyuankun.github.io/访问了。

首先需要明白所谓部署到github的原理。

之前步骤中在Github上创建的那个特别的repo（CatherineLiyuankun.github.io）一个最大的特点就是其master中的html静态文件，可以通过链接http://CatherineLiyuankun.github.io来直接访问。
Hexo -g 会生成一个静态网站（第一次会生成一个public目录），这个静态文件可以直接访问。
需要将hexo生成的静态网站，提交(git commit)到github上。
明白了原理，怎么做自然就清晰了。

使用hexo deploy部署
hexo deploy可以部署到很多平台，具体可以参考这个链接. 如果部署到github，需要在配置文件_config.xml中作如下修改：

deploy:
  type: git
  repo: git@github.com/CatherineLiyuankun.github.io
  branch: master