使用 Hexo 產生靜態網站,並部署在 GitHub Pages 上,可用於產生個人網站或形象網站。

安裝環境

開啟 CmdGit Bash,輸入指令安裝 Hexo

1
npm install hexo-cli -g

建立環境

安裝完 Hexo 後,建立一個資料夾,並進入該資料夾進行 Hexo 初始化,網站的內容都將儲存在此處。

1
hexo init

安裝相依套件。

1
npm install

執行環境

到此 Hexo 就已經安裝好了,網站資料夾內會產生 Hexo 架構檔案,可以啟動 server 查看網站。

1
hexo server

開啟瀏覽器進入預設路徑 http://localhost:4000/

停止 server 只需在 CLI 執行中斷命令 Ctrl + C

如果想要變更連接埠 (port),可以在執行時使用 -p 選項指定其他連接埠。

1
hexo server -p 5000

產生網站內容

在本地電腦啟動環境,主要是確認產生的網站內容是否正確、網頁是否打的開,接著就是要讓 Hexo 經過主題渲染,產生我們的網站檔案。

1
hexo generate

生成的檔案會放在根目錄的 Public 資料夾下,裡面存放有網站最重要的入口檔案 index.html 等檔案,部署網站時就是發佈這個 Public 資料夾。

清除快取與靜態檔案

對於已經產生過的網站內容,如果要重新產生,可以使用 clean 清除快取檔案 (db.json) 與 靜態檔案 (Public)。

1
hexo clean

部署網站到 GitHub Pages

先在 GitHub 上創建一個資料庫名稱為 <username>.github.io

<username> 代表你的 GitHub 用戶名

回到 CLI 安裝 hexo-deployer-git

1
npm install hexo-deployer-git --save

編輯網站目錄下 _config.yml 文件,並在結尾處加入 deploy 填寫部署網站相關資料。

  • /_config.yml

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/<username>/<username>.github.io.git
    branch: master

yaml 檔案中 : 後面需要保持一個空格

接著還要填寫 config.yml 內的 url 成剛剛建立的儲存庫 url。

  • /_config.yml

    1
    url: https://<username>.github.io

部署網站到 GitHub 上。先使用 clean 清除快取檔案,再使用 generate 產生網站檔案,最後使用 deploy 部署網站。

1
hexo clean && hexo deploy --generate

部署完成後就可以到網站上查看結果 <username>.github.io,通常 GitHub 會有緩存,可以等 5~15 分鐘左右再進入網站看。

這時候已經部署完畢,但可能還是會出現 404 頁面,因為還沒有開啟儲存庫的 Github Pages 功能。

  • 進入儲存庫的 Setting,往下找到 Github Pages 區塊,並將 Source 指向到 master 再按下 Save 即可。

清理瀏覽器快取

如果在本地端更改設定測試時沒有問題,部署到網路上後卻沒有改變或顯示錯誤,大多數時候是因為電腦的瀏覽器的快取檔案原因。

解決辦法可嘗試清除瀏覽器的快取資料,再重新整理網站載入資料。

清理瀏覽器快取

新增文章

建立一篇新的文章,如果沒有設定 layout,則會使用 _config.yml 中的 default_layout 設定代替。如果標題包含空格的話,需使用引號刮起來。

1
hexo new [layout] <title>
  • [layout]:文章布局
    • post
    • draft
  • <title>:文章標題

新增草稿

方法一

建立一篇新的草稿,草稿在 Hexo 執行時不會進行渲染。需透過 publish 發布草稿,將草稿移動到 source/_posts 資料夾。

1
hexo new draft <title>

發布草稿

1
hexo publish draft <title>

草稿預設不會顯示於頁面中,可在執行時加上 --draft 選項,或是把 render_drafts 設定改為 true 來預覽草稿。

方法二

如果覺得每次還要輸入發布草稿很麻煩,也可以在 _post 資料夾內新增一個資料夾以底線開頭,因為 Hexo 不會編譯 _post 內有 _ 開頭的資料夾,所以可以建立一個資料夾例如 _draft,然後將還不想要發布的文章丟到 /source/_post/_draft/ 裡面即可。

檔案架構

產生完 Hexo 檔案後大致有以下檔案

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
  • _config.yml
    網站配置檔案,設置網站基本設定。
  • package.json
    應用程式資料,包含使用的一些相依套件。
  • scaffolds
    新增文章時使用的架構資料夾,Hexo 會根據 scaffolds 來建立檔案。
  • source
    來源資料夾,存放網站的內容,Markdown 和 HTML 檔案在產生時會經過渲染到 Public 資料夾,而其他的檔案會直接拷貝過去。
  • themes
    主題資料夾,Hexo 會根據主題來產生靜態檔案。

參考資料