[筆記] 打造自己的 blog，Hexo + Github

Posted on | In |

花了兩個晚上總算是從0打造出一個簡單的個人網頁，以後有個可以發發牢騷或做筆記的地方了XD

第一次打造自己的 blog，我選用的是 Hexo + Github 的組合，主要是看上中文說明文件(艸)，對新手來說非常親切！打造的過程基本上就是參照著官網操作，不過我還是有遇到一些奇怪的小 bug，就在這邊做個紀錄吧！

1. 安裝 Hexo

1
2
3
4
5
6
# 先安裝 node.js
$ brew update
$ brew install node

# 再安裝 Hexo
$ npm install -g hexo-cli     # -g 全域安裝

2. 初始化 Hexo 資料夾

先創造一個空的資料夾，並且 cd 到該資料夾。

1
2
3
$ cd your_folder
$ hexo init
$ npm install

這樣基本的架構就產生了～

我本來是先 clone github 的 repository 下來操作，不過在 clone 下來的資料夾初始化 Hexo 會一直告訴我資料夾不是空的，啟動失敗。網路上好像沒什麼看到相關的問題回報，所以我也不是很確定是哪一步出了問題，所以後來決定還是先從空的資料夾來初始化 Hexo，跟 Github 的連結就之後再來想辦法。

3. 修改 _config.yml

大部分的網頁配置都是在這邊修改，可以參考官網的說明

4. 本地端測試

1
2
3
4
5
6
7
8
9
10
11
# 開啟新的 post
$ hexo new "post_title"

# 產生靜態網頁
$ hexo generate

# 先安裝 hexo-server
$ npm install hexo-server --save

# 接著就可以在local端預覽了
$ hexo server    # 預設在 http://localhost:4000

5. 與 Github 做連結

  • 在 Github 創建一個 repository，名稱為“自己的帳號.github.io“

  • 回頭來修改 _config.yml，輸入自己 github 帳號相對應的內容。
    我修改了這 4 項：url, type, repo, branch

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     # URL
     ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
      url: https://<username>.github.io
      root: /
      permalink: :year/:month/:day/:title/
      permalink_defaults:
     # Deployment 
     ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git          
      repo: https://github.com/<username>/<username>.github.io.git  
      branch: master

6. 把網誌推上 Github

1
hexo deploy

就會按照 _config.yml 上去部署了

其他主題的設定都是參考官網的說明文件，就先不在這邊多敘述了。
我使用的主題是 Next。

Hexo 官網：https://hexo.io/zh-tw/
Next 官網：https://theme-next.iissnan.com/