Github搭建博客

搭建這個博客走了許多彎路。在這裏分享總結之後的思路和簡化步驟。

Github Pages
Hexo 博客框架
部署
Next 主題
Github Pages

Github Pages 其實本身就是 Github 提供的博客服務。 我們在 Github 中創建一個特定格式的 Repository，Github Pages 就會將裏面的信息生成一個網頁，展示出來。

操作如下：

1. 註冊 Github 賬號，然後在 Github 中創建一個以 .http://github.io 結尾的 Repository。

Repository name: http://ericamin.github.io
勾選 Initialize this repository with a README
Create repository
2. 簡單地編輯一下 README.md 這個文檔。 比如添加：I am trying to create my own blog.. 保存(Commit changes)。

1. 打開網頁：http://ericamin.github.io 這裏就可以看到 README.md 裏的內容了。

如果沒有太多的要求，其實直接用 README.md 來寫博客也是不錯的。這個生成好的 Repository 就是用來存放博客內容的地方，也只有這個倉庫裏的內容，纔會被 http://ericamin.github.io 這個網頁顯示出來。

Hexo

Hexo 是一個博客框架。它把本地文件裏的信息生成一個網頁。如果不需要放在網上給別人看，就沒 Github Pages 什麼事了。

使用 Hexo 之前，需要先安裝 Node.js 和 Git。

操作如下：

1. 安裝 Node.js

前往 https://nodejs.org/en/
點擊 8.9.1 LTS 下載
安裝
打開 Command Prompt， 輸入 node -v
得到：v8.9.1
安裝成功

1. 安裝 Git

前往 https://git-scm.com/
點擊 Downloads
點擊 Windows
一般情況，下載會自動開始。如果沒有，就點擊 click here to download manually
安裝
打開 Command Prompt， 輸入 git –version
得到：git version 2.15.0.windows.1
安裝成功

額外說明：如果 Git –version 指令不管用，可能需要到 Environment Variable 那裏添加 Path。

1. 安裝 Hexo

打開 Command Prompt
輸入 npm install -g hexo-cli
回車開始安裝
輸入 hexo -v
得到 hexo-cli: 1.0.4 等一串數據
安裝成功

1. 創建本地博客

在D盤下創建文件夾 blog
鼠標右鍵 blog，選擇 Git Bash Here。 如果沒有安裝 Git，就不會有這個選項。
Git Bash 打開之後，所在的位置就是 blog 這個文件夾的位置。（/d/blog）
輸入 hexo init 將 blog 文件夾初始化成一個博客文件夾。
輸入 npm install 安裝依賴包。
輸入 hexo g 生成（generate）網頁。 由於我們還沒創建任何博客，生成的網頁會展示 Hexo 裏面自帶了一個 Hello World 的博客。
輸入 hexo s 將生成的網頁放在了本地服務器（server）。
瀏覽器裏輸入 http://localhost:4000/ 。 就可以看到剛纔的成果了。
回到 Git Bash，按 Ctrl+C 結束。
此時再看 http://localhost:4000/ 就是無法訪問了。

1. 發佈一篇博客

繼續在 Git Bash 裏，所在路徑還是 /d/blog。輸入 hexo new “My First Post”
在 D:\blog\source_posts 路徑下，會有一個 My-First-Post.md 的文件。 編輯這個文件，然後保存。
回到 Git Bash，輸入 hexo g
輸入 hexo s
前往 http://localhost:4000/ 查看成果。
回到 Git Bash，按 Ctrl+C 結束。

將本地 Hexo 博客部署在 Github 上

前面兩個部分，我們已經有了本地博客，和一個能託管這些資料的線上倉庫。只要把本地博客部署（deploy）在我們的 Github 對應的 Repository 就可以了。

1. 獲取 Github 對應的 Repository 的鏈接。

登陸 Github，進入到 http://ericamin.github.io
點擊 Clone or download
複製 URL 待用
我的是https://github.com/Ericamin/Ericamin.github.io.git

1. 修改博客的配置文件

打開配置文件 /d/blog/_config.yml （使用 bash 裏的 vi 或者 notepad++）
找到 #Deployment，填入以下內容：
deploy:
type: git
repository: https://github.com/Ericamin/Ericamin.github.io.git
branch: master

保存退出

1. 部署

回到 Git Bash
輸入 npm install hexo-deployer-git –save 安裝 hexo-deployer-git 此步驟只需要做一次。
輸入 hexo d
得到 INFO Deploy done: git 即爲部署成功
之前我們創建的 ReadMe.md 會被自動覆蓋掉。

1. 查看成果

前往 http://ericamin.github.io 即可。

使用 Next 主題

更多 Hexo 的主題看這裏

這裏以 Next 爲例。 大概思路就是把整個主題的文件克隆到我們的主題文件夾中。在配置文件中註明使用該主題。

操作如下：

1. 還是回到 Git Bash。 輸入 git clone https://github.com/iissnan/hexo-theme-next themes/next

這樣，該主題的文件就全部克隆到 D:\blog\themes\next 下面。

1. 修改博客配置文件

打開 D:\blog_config.yml
找到 theme:
把 Hexo 默認的 lanscape 修改成 next。 即 theme: next
找到 # Site，添加博客名稱，作者名字等。
在 language 後面填入 en 或者 zh-Hans，選擇英文或者中文。
找到 # URL, 填入 url。比如 url: https://ericamin.github.io
填入名字後會有很風騷的 © 2017 Ryan Luo Xu 的字樣出現在博客底部。

1. 重新生成部署即可

回到 Git Bash。輸入 hexo g -d就可以了。
先把修改的內容生成網頁，再部署。

1. 查看成果

前往 http://ericamin.github.io 即可。

上傳博客 圖片

首先確認_config.yml中有：

post_asset_folder: true
1
然後在blog-dev/下執行

npm install https://github.com/CodeFalling/hexo-asset-image –save
1
確保在blog-dev/source/_posts下創建和md文件同名的目錄，在裏面放該md需要的圖片，然後在md中插入

![](目錄名/文件名.png)

1
即可在hexo generate時正確生成插入圖片。比如：

_posts
|- post1.md
|_ post1
|- pic1.png
1
2
3
4
在md文件中插入圖片時只需寫

![](post1/pic1.png)

1
即可。首次配置完了需要執行一次清除操作，再生成頁面：

$ hexo clean
$ hexo generate
$ hexo server