利用Hexo 在已有資料的Github pages上建立部落格

Part 0: 備料

  • github帳號和已經有內容的Github pages repository
  • Node.js 和 npm
    基本上網路上面如何建立Github 帳號的教學一抓一大把下載和安裝這種更基本的東西這裡就不浪費時間解釋

part 1: 安裝Hexo

  1. 如果環境是使用win 11並且使用powershell,有可能會在執行npm相關指令的時候跑出unauthorizedaccess的問題，
    原因是因為預設的Windows PowerShell執行原則是Restricted，資料參考來源
    於powershell中執行以下指令即可正常使用
1
Set-ExecutionPolicy RemoteSigned
  1. 使用npm install hexo-cli 便可以安裝Hexo 套件
    -g代表安裝至全域，我這邊為了避免幾百年後忘記自己電腦裝了那些垃圾所以沒有使用
1
npm install hexo-cli #此處可選擇是否加上-g
  1. 使用hexo init [初始化之後的檔案存放資料夾名稱] 初始化hexo 套件
    npx 是 npm 內建的工具（npm v5.2+ 起就有），可以直接執行你本地安裝的 CLI 工具，此處來源ChatGpt
1
npx hexo init blog #如果上面沒有加上-g則需要在前綴加上npx，後續皆省略
  1. 執行npm install用以安裝Hexo所相依的套件
1
npm install

以上就能完成基本的安裝，這邊強烈建議與其看網路上的教學不如實際去翻閱官方文檔

part 2: 親手把你之前累積的專案內容送走

  1. 如果只是要靜態網站的話其實並不需要安裝這個，但如果想要無腦安裝的話還需要額外下載hexo-deployer-git
1
npm install hexo-deployer-git
  1. 設定_config.yml
    基本上首先需要設定的是url，由於是建立在Github pages 上所以大致可以參考這樣子的形式https://username.github.io/project
    ※可選於url下方加root並填上你打算用於存放Hexo 編譯出來的靜態網站內容的資料夾名稱
    設定完後接著設定Deployment的部分deploy想深入研究的話可以參考官方文檔，但懶人的話直接這樣改就好了
1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages #這裡取決於你Github repository的Pages設定是甚麼
  1. 儲存之後執行以下指令就可以把你原有的心血送走了
1
2
3
4
hexo cl # cl 等於 clean 清除generate產生的靜態網頁
hexo g # g 等於 generate 透過.md還有_config.yml的設定文件產生靜態網頁
hexo s # s 等於 server 使用node.js產生測試機用於本地測試部落格內容
hexo d # d 等於 deploy 將內容部署到git上

你如果很幸運的把推送的branch設定在你的預設branch，切到github的repository時你應該可以很驚訝地看到你原本的專案內容都被覆蓋掉了
依照chatgpt和hexo-deployer-git的官方文檔所說，原因是因為hexo d是使用git push --force上推至git的repository
所以原先儲存在預設branch底下的資料都會被強制清除並覆蓋為Hexo的資料
如果先前有備份branch，或是本地仍留有資料，則可以利用

1
git push origin [備份branch]:main --force

將資料覆蓋回來

part 3: 折衷的解決方案

由於直接使用 hexo d會把之前搭設好的github pages 給覆蓋掉，所以只能折衷使用hexo g所產生出來的靜態網站資料
手動將資料夾push上git，由於沒有使用預設的Node.js，所以_config.yml中的

1
2
3
pretty_urls:
 trailing_index: false 
 trailing_html: false

這兩項選項會直接無效

以上便是這篇文章的所有內容，由於只有促淺的研究一個下午，所以可能有很多錯漏，歡迎指摘。
官方文檔
資料參考來源_PowerShell執行原則
資料參考來源_用Github+Hexo建立部落格和遇到的坑
資料參考來源_架設 HEXO 網誌
資料參考來源_【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌