新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

最後更新於 2021 年 9 月 20 日

本篇教學使用Windows系統架設,面向程式新手。

什麼是 Hexo?

  Hexo 是一個快速、簡單且強大的網誌框架。Hexo 使用 Markdown(或其他渲染引擎)解析您的文章,並在幾秒鐘內,透過漂亮的主題產生靜態檔案。由於它能快速並且簡單的搭建自己的部落格,越來越多人開始使用HEXO。
  你可以很輕易地透過官方的教程安裝HEXO,但若你是對這方面完全陌生的”小白”,你可以透過本篇文章完美安裝HEXO,在教程當中會提供各種可能在安裝過程中會遇到的錯誤解決方式,若還是無法成功安裝的人歡迎在回覆當中詢問,我會嘗試幫你解答。

Hexo 優點

  • 建立在本地端,因此可離線編輯。
  • 不需要主機。
  • 使用 Markdown 語法,簡單、易學、方便
  • 中文兼容性高
  • 搭建快

而部署於GitHub上你根本不需要花費任何錢就可以擁有自己的部落格。

準備工作

你只需要安裝以下兩種軟體,就可以開始搭建。

  • Node.js (建議使用10.0及以上版本)
  • Git

安裝Node.js與Git

1.到Git官網挑選合適版本下載:[Download Git]

新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

2.安裝完畢後打開Git Bash

Mtj3Vj4 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

3.輸入下方指令,若正確顯示Git版本代表安裝成功。

git --version
8B5sO87 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

4.Node.js也是根據自己的系統選擇下載。[Download Node.js]

HFGmGT3 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

5.安裝成功後,在Git Bash輸入下方指令,若正確顯示版本代表安裝成功。

npm -v
node -v
P2lI12y 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

在本地安裝HEXO

你可以在Hexo的官網獲取安裝指令。

98golS6 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

打開Git Bash並且輸入指令:

npm install hexo-cli -g

透過npm即可完成HEXO的安裝。

再輸入下方指令確認Hexo是否安裝成功。

 hexo -v
NqknIXR 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

  若你在這一步出現bash: hexo command not found,很有可能是你的npm\node_modules\hexo-cli\bin並未加入環境變量,可以參考這篇文章

輸入以下指令初始化部落格:

hexo init <folder> #初始化BLOG
cd <folder> #切換到BLOG目錄
npm install #安裝相關套件

記得將<folder>改為資料夾名稱,Hexo會將需要的檔案放進指定資料夾內。

建立完成後,專案資料夾會有下列檔案:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

._config.yml
 網站配置檔案,您可以在此配置大部分的設定。

. package.json
 應用程式資料。EJS, Stylus 和 Markdown renderer 已預設安裝,您可以稍後移除。

. scaffolds
 儲存新文章及新頁面的初始設置。

. source
 存文章、頁面、圖片…等檔案。 資料夾名稱開頭為 _ (底線) 和隱藏檔案會被忽略,除了 _posts 資料夾以外。 Markdown 和 HTML 檔案會被處理並放到 public 資料夾,而其他檔案會被拷貝過去。

. themes
 主題資料夾。Hexo 會根據主題來產生靜態檔案。

之後才會出現的目錄:

. node_modules
 node.js 各種庫的目錄。

. public
 生成靜態文件目錄。

本地測試

執行以下兩條指令,即可打開 http://localhost:4000/ 查看BLOG 。

hexo generate
hexo server

hexo generate (hexo g) 指令用於產生靜態檔案,會在目錄下產生public 資料夾。
hexo server (hexo s) 用於啟動伺服器,預設是 http://localhost:4000/。
hexo deploy (hexo d) 用於部署網站。( 比如 github, heroku 等平台 )

nqdwN8F 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

將Hexo部署到Github

首先你需要註冊一個Github帳號,並且新建倉庫,命名格式:用戶名.github.io

  例如我的用戶名為pluto,我的repository name就應該輸入 pluto.github.io,若不按照這個格式命名,之後部署到Github時就無法識別。(而這個repository name就是訪問你部落格的鏈結)

新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

  創建完倉庫後,打開部落格目錄,找到主題配置文件(config.yml),拉到最底下 deploy片段,按照以下格式修改:

deploy:
  type: git
  repository: git@github.com:<username>/<username>.github.io.git
  branch: master

注意:yaml檔 ” : ” 後方必須空一格(英文半形),請務必注意格式問題。

PTcZZpt 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

若你不知道倉庫地址該如何填寫,到你的repository 右邊 「Clone -> Use SSH」 複製框裡頭的內容貼上即可。

MuuM1dv 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

安裝 deploy git

npm install hexo-deployer-git --save

在BLOG目錄下輸入以下指令產生靜態檔後將BLOG部署到Github。

 hexo d -g

  若出現 INFO Deploy done: git 代表部署成功,接著你就可以打開瀏覽器輸入 http://username.github.io 瀏覽你的部落格。 (記得將username改為你的Github帳號)

UuSpn2V 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

延伸閱讀

安裝部落格主題(Themes)

  hexo官方提供了多種主題免費使用,你可以到Themes|Hexo下載喜歡的主題。下載好之後,打開你的部落格目錄,將剛剛下載好的主題解壓縮放進 themes 裡。

mgE6LKI 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

打開主題配置文件(config.yml),找到:

#Extensions
theme: landscape

將landscape改成你的主題名稱然後儲存。

dJtziIg 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

你可以自行將主題資料夾名稱改短,如:pure

要注意的是,當你更換主題後,需要執行一次hexo clean的指令再部署。

hexo clean
hexo d -g #產生靜態檔後部署
新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

你也可以透過 git clone 來安裝主題,請在安裝前先閱讀該主題的README.md文件。

安裝 NexT 主題

5ihStV6 新手也能三分鐘使用 Github + Hexo 搭建自己的個人靜態網站

新建文章/頁面

你可以簡單通過輸入下方指令來新建文章、頁面。

hexo new postName #新建文章
hexo new page pageName #新建頁面

生成文章後會存在 source_posts 目錄底下,
默認格式是.md檔,md指的是markdown語法。

Markdown編輯軟體(推薦)

在線Markdown編輯器

MEditor – https://pandao.github.io/editor.md/en.html
Stack Edit – https://stackedit.io/

其實,更完整的創建文章指令為:

hexo new [layout] 

你可以在指令中指定文章的佈局(layout),預設為 post,透過修改_config.yml 中的 default_layout 設定來指定預設佈局。

佈局(Layout)

  Hexo 有三種預設佈局:post、page 和 draft,它們分別對應不同的路徑,而您所自定的其他佈局和 post 相同,都儲存至 source/_posts 資料夾。

佈局     路徑
post(發表)  source/_posts
page(頁面) source
draft(草稿) source/_drafts

當然,你也可以自行在資料夾內新增md檔,就不需要透過指令來新建文章。
【更詳細的建議閱讀官方說明文檔:寫作

主題配置文件( _config.yml)

  • language: 網站使用的語言,可以參考 2-lettter ISO-639-1 code,預設為 en。 (建議設成zh-TW)
  • timezone: 網站時區,Hexo 預設使用您電腦的時區,您可以在 時區列表 尋找適當的時區。
  • url: 網站的網址
  • root: 網站的根目錄
  • permalink: 文章 永久連結 的格式 :year/:month/:day/:title/ (不滿意這個格式可以使用hexo-abbrlink)

你可能在使用Hexo途中會遇到問題,建議參考Hexo官方文檔

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論