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

輕鬆上手 Hexo 網誌框架

目的

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

開發版本與環境

1
2
  NodeJS: v4.4.5
  IDE: Cloud9

前言

  我的攻城獅筆記一路從 WordpressLogdown,再到現在使用 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 要換成你的帳號名稱

  其實為了方便起見,generatedeploy 兩道指令都提供了選項,讓你可以 產生靜態檔後就佈署佈署前產生靜態檔

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 serverdeploy 時,我為了乾凈都會重新 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!

【參考資料】