Hexo 網站架設

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

安裝環境

• Node.js
  • https://nodejs.org/
• Git
  • https://git-scm.com/

開啟 Cmd 或 Git Bash，輸入指令安裝 Hexo。

npm install hexo-cli -g

建立環境

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

hexo init

安裝相依套件。

npm install

執行環境

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

hexo server

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

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

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

hexo server -p 5000

產生網站內容

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

hexo generate

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

清除快取與靜態檔案

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

hexo clean

部署網站到 GitHub Pages

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

<username> 代表你的 GitHub 用戶名

回到 CLI 安裝 hexo-deployer-git。

npm install hexo-deployer-git --save

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

• /_config.yml

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

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

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

• /_config.yml

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

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

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 設定代替。如果標題包含空格的話，需使用引號刮起來。

hexo new [layout] <title>

• [layout]：文章布局
  • post
  • draft
• <title>：文章標題

新增草稿

方法一

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

hexo new draft <title>

發布草稿

hexo publish draft <title>

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

方法二

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

檔案架構

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

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

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

參考資料

• 文件 | Hexo