利用 hexo + github 架設靜態網站

利用 hexo + github 架設靜態網站

Mike Lv99
  2024-12-31 10:00 2024-12-31 10:00 Created   2025-05-21 10:48:46 2025-05-21 10:48:46 Updated    1.2k Words  4 Mins  

hexo

引言

hexo 是一個架設靜態網站的好東西，而我選擇他是因為看到別人的網頁好好看，所以也跟著做(? 原本因該很早以前就要開始了，但那時期中考很忙，所以我現在才開始(嘿嘿。github pages 是給你個免費的網域可以給別人看你的網站，但只能放靜態的，別問我什麼是動態的我也不懂(?

第一步需要下載 Node.js 跟 hexo

  • 到 Node.js 官網下載 LTS 版本的 Node.js
    並完成下載最後會出現要不要安裝 nessary tool…的東東，可選可不選(我有選，但不選也沒差)
  • 可到終端機執行 node -v 或 node --version 查看版本
    這步驟是為了確認是否下載成功
  • 在終端機執行npm install hexo-cli -g下載 hexo
  • 可到終端機執行 hexo version 或 hexo -v 查看 Hexo 版本

init hexo 資料夾

1
2
3
4
5
hexo init <folder name>
cd <folder name>
npm install # 下載 hexo 會用到的 package
npm install hexo-deployer-git --save # 這是為了上傳到 github 時需要的工具
code . # 我這裡是用vscode 進入編輯畫面

code

打開 vscode 時，我們的目錄會長這樣：
tree

設定背景主題

他其實本來就有預設的了，但我不喜歡(YA，所以我自己去找了好看的，我使用的是redefine，他真的好好看

  • 第一先點上面的 DOCS 連結
  • 再點畫面中的快速開始
  • 按照上面所述的方式設定主題
  • 在終端輸入 npm install hexo-theme-redefine@latest
  • 到_config.yml 裡面將theme: landscape變為theme: redefine
  • 再把原本的_config.landscape.yml改為_config.redefine.yml
  • 在進入_config.redefine.yml 並把此連結的內容複製進去

這樣就搞定一些了，換到 github pages 的設定了

github pages

  • 登入 github，(這步我就不教了
  • 按new把Repository name*打上用戶名.github.io，應該會到以下畫面：
    所以看到我的網址就可以知道我的用戶名是happymike0103
    empty_github_pages

這樣目前就設定好了

_config.yml

再來要回到這裡去配置上傳的路徑

  1. post_asset_folder: false改成 true
  2. 加上這段配置
1
2
3
marked:
  prependRoot: true
  postAsset: true
  1. 把以下設定改好(這步是將資料 commit 到 github 的重點
1
2
deploy:
  type:

改成

1
2
3
4
deploy:
  type: "git"
  repo: "https://github.com/用戶名/用戶名.github.io.git"
  branch: "main"

指令介紹

1
2
3
4
5
6
7
8
9
10
11
hexo clean # 把之前的資料清乾淨
hexo generate #產生新的靜態資料(就是public/)
hexo server # 可以在本地預覽你的網站(http://localhost:4000/)
hexo deploy # 把網站用到 github 上面
# 同時，以上指令也有簡寫：
hexo cl
hexo g
hexo s
hexo d

hexo new post <postname> # 新增一個post，名為<postname>

花式教學

[Header]

color[blue,red,cyan,orange,yellow,green…]
custom icon[fa-image]
support nextLine

[name]
[Header]

Content
asdfasdf

ex：

Test

content
support nextLine

test note 12434

kazma
Folding 測試 Testing

啊啊啊啊啊

danger 好可怕好嚴重

tip 這只是個小提示

This is Tab 1.

This is Tab 2.

This is Tab 2.

This is Tab 3.

This is Tab 3.

This is Tab 3.

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Q & A

這樣就搞定一切啦，再來是一些我在架網站遇到的問題點

  1. 為什麼圖片顯示不出來?

    • A: 還記得剛剛把post_asset_folder: false改成 true 嗎，這步就是重點了，他會在我們執行hexo new post <postname>時產生 <postname>.md 跟 <postname>，當我們要在 md 裡面插入圖片時就可以放到<postname>資料夾裡，然後把圖片的路徑設為pic_name.jpg就好，不須再加上其他有的沒的

  2. 為什麼我明明已經 hexo deploy，但我的 github pages 卻沒反應?

    • A: 因為你上傳到那 github 上面是需要一段時間的(我用起來要個 2-3 分鐘左右)，所以可以先滑個手機等待一下，但更好的方式是在撰寫的過程中用hexo server去做預覽會更好，這樣就不用一直等待了

結論

由於這是第一篇文章，所以排版可能不會那麼好看，我也會在制訂一下版面，但我大概就不會再改了，畢竟我想要做我的成長學習歷程，所以請各位加減看吧，由於現在算是寒假吧，我會努力多生產一點文章，如果沒有代表我去輪迴了，懇請多多擔待，我也趁著一天的時間把所有東西都寫好了，那就請各位慢慢欣賞吧我們明年見，新年快樂!!

參考資料

  • Title: 利用 hexo + github 架設靜態網站
  • Author: Mike
  • Created at : 2024-12-31 10:00:00
  • Updated at : 2025-05-21 10:48:46
  • Link: https://happymike0103.github.io/2024/12/31/hexo-pages/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
利用 hexo + github 架設靜態網站
  1. hexo
    1. 引言
    2. 第一步需要下載 Node.js 跟 hexo
    3. init hexo 資料夾
  2. 設定背景主題
  3. github pages
  4. _config.yml
    1. 指令介紹
  5. 花式教學
  6. Q & A
  7. 結論
  8. 參考資料