如何在 GitHub 上寫博客？

12-31

想在 GitHub 上記錄下開發過程，請問如何搭建 blog？

這是一篇很詳盡的獨立博客搭建教程，裡面介紹了域名註冊、DNS設置、github和Hexo設置等過程，這是我寫得最長的一篇教程。我想將我搭建獨立博客的過程在一篇文章中儘可能詳細地寫出來，希望能給後來者一個明確的指引，同時用這篇教程開篇，正式開始我的第八大洲之旅。

由於這篇教程實在太長，而且知乎專欄不支持Markdown，很多圖沒辦法顯示，所以只能貼到我的博客上去，鏈接在此：如何搭建一個獨立博客--簡明 GitHub Pages與 jekyll 教程

寫博客，直接建個 Issues 不就好了，如 phodal/articles

然後，你就可以專心寫博客系統了。

後期，再使用腳本將 issues 轉換成博客

Let me google that for you

這篇文章利用github-pages建立個人博客介紹了Github的配置、Jekyll的安裝和模板解析引擎的原理、網頁的樣式、分類、標籤、代碼高亮，markdown語法、評論模塊，站內搜索、站點統計，可以看

## 前言

習慣自己寫Blog的朋友一定不會陌生Wordpress，或許也曾在新浪博客和QQ空間留過腳印，但靜心認真思考一下，似乎我們又總是嚮往更加簡單自由的寫作方式。GitHub給我們提供了一個無限的空間，我們需要珍惜使用，而Hexo的出現從某種意義上來說代替了Jekyll，讓我們可以更專註於寫作本身。本文主要介紹自己的實踐心得並不斷完善內容，衍生知識和原理推薦大家認真閱讀官網的手冊，其它推薦參考內容鏈接在文中也會標註出來。

&>[阮一峰 - 喜歡寫Blog的人，會經歷三個階段](搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門)

第一階段，剛接觸Blog，覺得很新鮮，試著選擇一個免費空間來寫。

第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立博客。

第三階段，覺得獨立博客的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。

---

## 更新歷史

2015年03月22日 - 更新Windows下Hexo 3.0安裝和升級，感謝[@機智的阿卡林醬](一路向北)

2015年03月10日 - 增加Hexo 3.0降級 2.8

2014年12月19日 - 完善內容

2014年12月09日 - 更新Hexo配置修改部分

2014年06月19日 - 更新全部基礎架構，待完善配置修改部分

2014年06月17日 - 更新部分Hexo建站過程，待完善

2014年05月29日 - 撰寫初稿

閱讀原文 - 使用GitHub和Hexo搭建免費靜態Blog

擴展閱讀

- Hexo Docs - Documentation

- HelloDog Index - 索引 | Index

---

## 準備工作

**注意** 本文主要針對`Windows`平台和`Hexo 3.x`

### 了解Hexo

&>A fast, simple powerful blog framework

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

[http://hexo.io](Hexo)

### 安裝GIT

[GitHub Windows](GitHub for Windows)

簡單可依賴，安裝完成後依據提示操作即可，So Easy

###安裝Node.JS

[Node.JS](Node.js)

**注意** 安裝完成後添加Path環境變數，使`npm`命令生效

``` bash

;C:Program Files
odejs
ode_modules
pm

```

### 安裝Hexo

配置好`GitHub`家目錄後，雙擊桌面上的`Git Shell`，輸入`npm`命令即可安裝

``` bash

npm install -g hexo-cli

npm install hexo --save

```

文檔

---

## Hexo初始化配置

### 創建Hexo文件夾

安裝完成後，根據自己喜好建立目錄（如`E:kuaipanGitHubhexo`），進入`Git Shell`切換到該路徑下`E:kuaipanGitHubhexo`執行以下指令

``` npm

hexo init

```

### 安裝Hexo插件

``` bash

npm install hexo-generator-index --save

npm install hexo-generator-archive --save

npm install hexo-generator-category --save

npm install hexo-generator-tag --save

npm install hexo-server --save

npm install hexo-deployer-git --save

npm install hexo-deployer-heroku --save

npm install hexo-deployer-rsync --save

npm install hexo-deployer-openshift --save

npm install hexo-renderer-marked@0.2 --save

npm install hexo-renderer-stylus@0.2 --save

npm install hexo-generator-feed@1 --save

npm install hexo-generator-sitemap@1 --save

```

### 本地查看效果

繼續執行以下命令，成功後可登錄`localhost:4000`查看效果

``` bash

hexo server

```

### Hexo簡寫命令

``` bash

hexo n #new

hexo g #generate

hexo s #server

```

---

## 部署靜態網頁到GitHub

### 註冊設置GitHub

1. 登錄[GitHub](GitHub · Build software better, together.)，註冊自定義用戶名如`wsgzao`

2. 在主頁右下角創建`New repository`，name必須和用戶名一致如`http://wsgzao.github.io`

3. 首次創建耐心等待10分鐘左右審核，之後即可訪問靜態主頁如[HelloDog](HelloDog)

### 同步內容至GitHub

1. 下載[GitHub Windows](GitHub for Windows)

2. 設置`Local path`如`E:快盤GitHub`

3. 運行`Git Shell`切換到如`E:快盤GitHubhexo`路徑下

4. 執行`hexo g`命令生成`public`文件夾

5. 把生成的內容全部拷貝到`Local path`或其子目錄

6. 運行`GitHub`確認修改信息後執行右上角的`Sync`同步

7. 最後訪問主頁觀察效果

[GitHub Pages](GitHub Pages)

---

## 域名和DNS

### 域名推薦

&> GoDaddy makes registering Domain Names fast, simple, and affordable.

【推薦理由】兩個字「靠譜」，支持支付寶，附優惠碼鏈接

[Domain Names](Domain Names)

[Godaddy Coupon Code](Godaddy Coupon Code)

### DNS推薦

&>致力於為您提供最穩定、最安全的域名解析服務

【推薦理由】依然是兩個字「靠譜」，感謝他們一直以來對於公益的堅持

[DNSPod-免費智能DNS解析服務商](DNSPod-免費智能DNS解析服務商)

### 設置CNAME

1. 在Github的網站目錄下創建`CNAME`文件

2. 填寫自己的域名如`http://hellodog.com`，保存結束

3. 登錄DNSPod，先添加域名，然後添加記錄，設置如下

--------- | --------- | --------- | --------- | --------- | --------- |

@ | CNAME |默認 |wsgzao.github.io. | - | 10

www | CNAME |默認 |wsgzao.github.io. | - | 10

---

## Hexo配置修改

&>告訴自己為什麼要選擇Hexo

### 知識儲備

1.勤學勤練Markdown

&>本地+雲端備份數據是一種習慣

- Markdown學習路徑 - Markdown學習路徑

2.使用性感的文本編輯器

&>工欲善其事必先利其器

- Notepad2

- Sublime Text

Windows常用軟體推薦文本編輯器

### Hexo主題

&>選擇主題建議遵循`KISS`原則

- Hexo Themes - Themes

- ~~Pacman - http://wsgzao.github.io/post/hexo-pacman/~~

- Jacman - Jacman基於Pacman修改的Hexo主題

### 常見問題

1.修改配置文件時注意`YAML`語法，參數`冒號:`後一定要留` 空格`

2.中文亂碼請修改文件編碼格式為`UTF-8`

### 如何遷移至Hexo

遷移

### Hexo 2.X 升級 3.0

1.做好相關配置文件和文章的備份

2.做任何修改前不要忘記第一件事備份

Migrating from 2.x to 3.0 · hexojs/hexo Wiki · GitHub

### Hexo 3.0 降級 2.X

Hexo降級 3.0 to 2.8

## 推薦閱讀

- [如何搭建一個獨立博客——簡明Github Pages與Hexo教程][1]

- [Zippera hexo系列教程][2]

- [前端工程精粹 | 張雲龍][3]

- [Hexo 3.0 靜態博客使用指南][4]

[1]: 如何搭建一個獨立博客——簡明Github Pages與Hexo教程

[2]: hexo | Zippera"s blog

[3]: QQ空間

[4]: Hexo 3.0 靜態博客使用指南

http://beiyuu.com/github-pages/

你也可以試試 Coding 的 Pages 服務啊！國內的服務訪問更快不說，還支持 HTTPS，甚至支持 WordPress 等動態應用的部署。

幫助文檔：創建靜態 Coding Pages 創建動態 Coding Pages

打完廣告溜了溜了。

Octopress 程序員專屬--使用Octopress搭建個人博客

Hugo是一個用Go語言編寫的靜態網站生成器，它使用起來非常簡單，相對於Jekyll複雜的安裝設置來說，Hugo僅需要一個二進位文件hugo(hugo.exe)即可輕鬆用於本地調試和生成靜態頁面。

Hugo生成靜態頁面的效率很高，我的260多篇博客文章生成幾乎是瞬間完成的，而之前用Jekyll需要等待10秒左右。

Hugo自帶watch的調試模式，可以在我修改MarkDown文章之後切換到瀏覽器，頁面會檢測到更新並且自動刷新，呈現出最終效果，能極大的提高博客書寫效率。

我已經將博客（http://blog.coderzh.com）由Jekyll全部轉到了Hugo，詳見文章：使用hugo搭建個人博客站點

推薦用hexo，比jekyll、octopress神馬的簡單多了，拙作hexo系列教程hexo | Zippera"s blog。

搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門

這是阮老師寫的文章，我就是跟著這個教程做出來的。

之前用jekyll-bootstrap，但既然用jekyll就從裡到外都自己搞吧。

我也正在醞釀一個jekyll搭建教程，結構已經寫好了，將來會在我的博客上登出來的

Hexo

非常喜歡台灣的Hexo靜態生成器（基於Node.js框架，輕便，快速），支持直接推送到GitHub Pages線上使用，分頁（子站）採用其他repo的gh-pages分支作為網頁儲存空間，簡單易懂。

推送後地址就是 &>&> http://username.github.io/repo-name。

博客部署只需要不到一分鐘，每次生成靜態頁面不超過1秒，且他們的主題也容易開發。

在Mac上terminal 里裝了fish shell,然後寫個fish腳本，每次只要三個命令就能寫好一篇博客。

具體操作請到我的博客里查看。 &>&> 我的blog: jocs.me

這裡使用hexo的注意，可能是時間的原因，基本上教程都沒有npm install這步，建議安裝hexo的時候去官網看看

hexo你的博客

竟然沒有人說 hugo

部署起來也超簡單，如果在window系統，下載一個單獨的 exe 就可以了，不需要裝什麼依賴包。

Hugo :: A fast and modern static website engine

我能說我直接寫md發布的嘛

新學Python和Markdown，有時需要寫一些總結性的文章，最後發現hugo+github pages建立靜態站點很方便，參考了網路上一些大神的文章後，自己動手實踐了下，最後成功了，現在也在用這個寫博客，支持markdown，評論和代碼高亮真的很爽，自己動手寫了個教程：hugo快速建站 · 氧氣計算，主要目錄如下：

如果你沒有伺服器，想搭建一個靜態的博客，推薦Jekyll Bootstrap框架，blog可以存放在github page 上。

我之前由於Wordpress主機到期，而且wp的markdown插件非常坑爹，經常把本來些的好好的md格式轉得亂七八糟。於是花了一天時間，把Blog搬到github來了。使用了Jekyll Bootstrap框架，下面是折騰過程中的一些體會：

文章遷移： wp後台把數據導出為xml文件，再用exitwp轉成md。
評論遷移： Jekyll自帶的disqus不太符合國情，於是選擇了國產的多說。
代碼高亮：使用Pygments。
文章摘要： Jekyll自帶的顯示摘要功能對HTML支持非常不好，我只好全文輸出到一個script標籤，再通過JS來截取並顯示。
搜索文章：嘗試了google站內搜索，但是發現好多冗餘的頁面也被搜出來了，最後決定自己用JS來實現一個簡單的，只針對文章標題進行匹配的搜索功能。

遷移到Jekyll以後，終於可以愉快地用md寫blog了。

下面是我的blog：安·記

Jekyll建站全攻略

神簡風格：

Blog · Cellier

修改自主題

poole/lanyon · GitHub

https://cuthead.github.io/howtoblog/