[Hexo] 快速上手 Hexo 網誌框架

發表於 | 分類於 | 0 comments |

輕鬆上手 Hexo 網誌框架

目的

　　使用 Hexo 網誌框架，搭配 GitHub Page，快速架設屬於、管理自己的部落格！

開發版本與環境

1
2
　　NodeJS: v4.4.5
　　IDE: Cloud9

前言

　　我的攻城獅筆記一路從 Wordpress 到 Logdown，再到現在使用 Hexo 自架，一路走來很有趣，從對於網站相關一竅不通，到現在各方面略懂略懂，真的很開心！至於為什麼一直換呢？只能說是為了滿足自己的爽感，哈，不多說，現在就來筆記一下怎麼使用 Hexo 和 Github Page 自架部落格吧！

筆記

0. Cloud 9 起手式

　　只要在 create new workspace 時選擇 HTML 5 就完成了。

要選 Node.js 也可以，但它本身有預設一個 Chat Demo，所以為了乾淨，我選擇 HTML 5 起手

1. 開始 Hexo！

　　如果還沒安裝 Node.js，記得先裝 Node.js，使用 Cloud 9 開發的話，Node.js 已經有預設安裝了，所以直接安裝 Hexo 即可：

1
npm install hexo-cli -g

　　接著，我們用 hexo init 來初始化一個部落格工作環境：

1
hexo init blog

　　最後，我們切到 blog，並安裝環境依賴及需求：

1
2
cd blog
npm install

　　現在可以先 run 一下 server 來看看網誌：

1
hexo s -p 8080

s (server)：啟動伺服器
-p (–port)：設定你要的port

　　

2. 開始用 Hexo 寫網誌

　　其實整體流程很簡單：創建一篇新文章 (new) → 編輯文章 → 產生靜態檔 (generate) → 佈署到 GitHub (deploy)
　　
創建一篇新文章 (new)

1
hexo new [layout] your-article-title

　　這邊生出來的文章檔案會在 source/_drafts/、source/_posts/ 或 source/ 下，單看你選擇什麼 layout 的模板。

Hexo 有三種預設 layout: draft(草稿)、post(公開文章) 和page(頁面)，下指令時沒填 layout 預設是 post。
你也可以在 scaffolds 中編輯或添加你要的模板！

編輯文章
　　產生出來的文章會是 Markdown(.md) 的格式，這也是 Hexo 的一大特點！如果還不是太熟，可以順便看 文件 練習一下。 　　

如何在文章中插入圖片？

　　我們可以先在 blog/source/ 下建立 img 資料夾，將你要使用的圖檔放在這資料夾中後，就可以在文章中引用：

1
![](/img/your-image.png)

　　
產生靜態檔 (generate)

1
hexo generate

　　生成的靜態檔案會在 /public/ 下。

p.s. 寫完網誌準備佈署前，Hexo 得先幫我們生成靜態檔 (因為你的部落格會是靜態網站)。

佈署到 GitHub (deploy)

1
hexo deploy

　　這邊佈署指令會依照 _config.yml 中所設定的 deploy 作佈署，由於我們要佈署到 GitHub Page，所以我們可以這樣設定：

blog/_config.yml
1
2
3
4
5
# Deployment
deploy:
  type: git
  repo: https://github.com/your-github-username/your-github-username.github.io.git
  branch: master

記得先在你的 GitHub 開一個名為 your-github-username.github.io.git 的 repo
當然 your-github-username 要換成你的帳號名稱。

　　其實為了方便起見，generate 和 deploy 兩道指令都提供了選項，讓你可以 產生靜態檔後就佈署 或 佈署前產生靜態檔：

1
2
3
hexo g -d  #=> 產生靜態檔後佈署
hexo d -g  #=> 佈署前產生靜態檔

　　使用 Hexo 搭配 GitHub Page 就是這麼簡單！ 　　 　　

3. 更換佈景主題

　　Hexo 有很多好看的主題可以選擇，請先到 Hexo Theme 參觀並選擇你要的主題，然後就可以輕鬆的作更換囉！
　　更換主題流程很簡單：複製你要的主題 (git clone) → 編輯設定 (_config.yml)

複製你要的主題 (git clone)
　　以我為例，我選用得主題是 nexT：

1
git clone https://github.com/iissnan/hexo-theme-next.git ./themes/next

編輯設定 (_config.yml)

_config.yml
1
theme: next

　　就簡單兩個步驟，就有美美的主題可以用啦！然而，每個主題都有他自己的小世界，提供的功能也不一定都相同喔。 　　

4. 增加其他功能

Google Analytics

　　在 /themes/_config.yml 中找到 google_analytics，將你的 ga ID 填上即可。

blog/themes/_config.yml
1
2
# Google Analytics
google_analytics: your-ga-id

Disqus

　　在 /_config.yml 中找到 disqus_shortname，填上你的 ID 即可。

blog/_config.yml
1
2
# Disqus
disqus_shortname: your-disqus-id

加入 sitemap

　　先安裝 hexo-generator-sitemap：

1
npm install hexo-generator-sitemap --save

　　接著在 _config.yml 中加入此設定即可：

blog/_config.yml
1
2
sitemap:
  path: sitemap.xml

後記

　　其實 Hexo 官方文件 寫的都很仔細，也很易懂，如果有問題都可以看看或留言喔！ 　　

補充

　　由於每次要 run server 或 deploy 時，我為了乾凈都會重新 build 過一次，這樣就得下兩道三次指令，秉持著攻城獅一定要偷懶的理念，所以就只好把他們各自包成一道指令，請服用這包 懶人Makefile，把它放在你的 blog 下即可，順便說明一下：

  • run server (port 預設為 8080，可自行更改)

    1
    make server

  • Deploy (沒有自己的 Domain 請用此道)

    1
    make deploy_without_cname

  • Deploy (有 Domain 請用此道，自行更改 DOMAIN 為你的 domain 即可)

    1
    make deploy

That’s it, DONE!

【參考資料】