{ i.coding }

Enjoy & Love coding, I'm coding.

0%

Hexo- 帶你認識Blog框架

發表於 更新於 分類於
文章字數： 2.2k 所需閱讀時間 ≈ 4 分鐘

Cover

Hexo是一個快速、簡單且強大的blog框架，支援Markdown語法，豐富的主題 (Theme) 與套件 (Plugin) 生態，一般常見的需求都可以滿足，像是文章搜尋、評論系統、文章標籤與分類等，適合有些程式基礎的人，可以快速方便地建置blog。當然，你也可以選擇一步一步調整屬於自己的配置，那麼就好好跟大家介紹一下Hexo吧。

前言

這次介紹會先從基礎安裝與建置、文章發佈流程與部署陸續介紹，至於細節的設定與套件 (Plugin) 部分，礙於篇幅會另外介紹。

而同時你需要具備 Node.js 、npm 與 Git 等基本相關知識，細節就不再此說明。

安裝

安裝Hexo之前需要先安裝下列軟體:

※ 具體安裝細節可以參考Hexo官方文件或是其官方網站說明。

安裝上述必要軟體後，只需要透過npm命令即可完成Hexo安裝

1
$ npm install -g hexo-cli

※實際上我們是安裝Hexo的Command-Line interface，之後就可以透過命令方式執行Hexo。

初始化

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

※ hexo init 命令需要指定空或不存在的資料夾執行。

執行成功後，會有以下主要檔案與目錄結構

1
2
3
4
5
6
7
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

scaffolds 目錄

官方翻譯為鷹架，類似於模板的概念，預設會有 draft.md 、 post.md 和 page.md 三個scaffold，當我們透過Hexo命令建立檔案時，則會根據 [layout] 參數對應至scaffolds目錄下的模板來建立檔案

1
2
# hexo new [layout] <title>
$ hexo new page "About"

在執行上述命令時，Hexo會在scaffolds目錄下，尋找 page.md ，並根據其內容建立檔案，所以我們可以將常用的配置，統一將預設的設定至scaffolds目錄下的模板。

source 目錄

此目錄是放置原始檔案與內容的地方，像是文章的md檔或是一些圖片檔案，透過Hexo發佈命令時，會將此目錄下的檔案或目錄生成或複製至 Public 目錄下，大多時候我們都是在這個目錄下操作編輯。

※ 目錄前綴若是 _ (底線)，則會被忽略，不會被複製至 Public 目錄，但是 _posts 目錄是例外。

themes 目錄

此目錄是Hexo的主題目錄，Hexo會根據此目錄下的主題來生成靜態檔案。

_config.yml

Hexo的配置檔案，大部分設定都在這個檔案，後續文章會再另外介紹。

package.json

是一個json格式的文件，主要是用來描述相依的相關套件與應用程式的資訊。

文章發佈流程

當我們做完初始化後，就可以開始撰寫文章了，而最基本的流程:

  • 建立文章
  • 產生靜態檔案
  • 啟動伺服器
  • 部署網站

建立文章

建立一篇新的文章，如果標題包含空格時，需要用引號刮起來

1
2
# hexo new [layout] <title>
$ hexo new "first post"

執行上述命令後，會產生 first-post.md 檔案至 .\source\_posts\ 目錄下，就可以開始撰寫文章內容。

※ [layout] 如果沒有指定，會使用預設 (post)。

產生靜態檔案

Hexo根據主題與 source 目錄的相關檔案，開始解析並產生靜態檔案如 html 至 public 目錄

1
$ hexo generate

啟動伺服器

Hexo本身內建一個網站伺服器，可以讓我們確認靜態檔案生成的結果

1
$ hexo server

可以直接透過瀏覽器訪問 http://localhost:4000/ 。

※ 可以透過 -p <port> 參數指定Port，預設為4000。

部署網站

當我們可以在localhost順利看到我們發佈的文章與內容時，接下來就是將靜態檔案給部署至遠端的伺服器，讓大家都可以看到我們的文章，Hexo本身提供多種部署方式，只要安裝對應的套件即可，而我們就以Git為例:

  1. 需要安裝對應的套件hexo-deployer-git:

    1
    $ npm install hexo-deployer-git --save

  2. 修改 _config.yml 檔案設定

    1
    2
    3
    4
    deploy:
      type: git
      repo: <repository url> # https://github.com/<user name>/<repository name>.git
      branch: [branch] # 可設定分支，例如master，GitHub預設為gh-pages

  3. 上傳檔案

    1
    $ hexo clean & hexo deploy # 建立部署前執行clean命令，清除快取

    ※ 過程可能需要輸入GitHub帳號密碼

通過上面的步驟後，現在應該已經可以在你的GitHub repository看到上傳的靜態檔案，這時候可以結合GitHub Pages的功能，看到屬於你自己的blog囉。

結論

介紹到這邊，理論上基本的流程已可以讓我們順利發佈文章，同時部署至GitHub Pages上，所以最陽春的blog已經建立完成，整體流程相當簡單，僅需要有 Node.js 、npm 與 Git 等基本相關知識，相信也應該都難不倒大家，接下來就可以嘗試去修改主題及Hexo相關設定，之後的文章也會陸續介紹，有興趣的可以先動手玩玩了。

相關文章