使用Hexo建立部落格網站

基於 Hexo 的 blog 管理系統，可自動打包生成靜態網站

基本環境安裝

  • Node.js
  • 安裝 hexo-cli 套件

產出專案

1
hexo init

開啟本地預覽服務

1
npm run server

訪問 http://localhost:4000

主要設定檔

參考 _config.yml

編寫文章

安裝 VSCode 外掛

安裝 extension Hexo Utils，支援建立文章基本格式與圖片插入自動處理等功能

開新文章

  • 透過 vscode 指令 Hexpo Utils: Create a news article
  • 選擇文章類型 draft, post 或 page

將 draft 草稿發佈為公開文章

文章檔名可忽略 .md

透過 shell command

1
npx hexo publish page [文章檔名]

文章中的圖片處理

  • 已於主要設定檔中開啟 post_asset_folder 與 marked

    1
    2
    3
    marked:
        prependRoot: true
        postAsset: true

  • 如文章名稱為 foo.md 則於同一層路徑下會有一個同名的目錄 foo/ 放置圖片檔案(或其他靜態資源)

  • 文章中的圖片不用指定路徑，最終生成靜態網頁時會自動經路徑轉換成基於網站根目錄的相對路徑

    文章原始 markdown

    1
    ![](image.png)

    生成HTML

    1
    <img src="/foo/image.png">

編輯文章時快速插入圖片

  • 使用 vscode 開啟專案編輯文章 markdown 原始檔案
  • 複製要插入的圖片到剪貼簿
  • 開啟文章 markdown，透過 vscode 指令 Hexpo Paste Image 貼上圖片，此時會自動生成圖片markdown語法並生成圖片檔案於 {文章檔名}/ 目錄中

打包生成靜態網站

1
npm run build

生成的靜態網站檔案於 public 目錄中