# Hexo + GitHub Pages ## 架設自己的部落格 --- ## Instalations ---- ### 安裝 [Node.js](https://nodejs.org/zh-tw/download)  ---- ### Or use package manager! | Windows | macOS | Linux | | -------- | -------- | -------- | | Chocolaty | HomeBrew | apt-get... | *example:* ```bash $ brew install node ``` ---- You can also use the recently released [bun](https://bun.sh)   ---- ### 安裝 Visual Studio Code https://code.visualstudio.com/download  --- ## 建立資料 ---- 創建新資料夾並用 VScode 開啟（如下） 或使用`mkdir`指令  <!-- 為何資料夾名稱是 JS？ --> <!-- I just chose a random folder in my laptop --> <!-- could we use blog or workspace? --> <!-- I think it's a "No problem" --> <!-- ok if we have time at last we can modify this --> ---- *Ctrl + Shift + \`* 開啟 VScode 內 Terminal  <!-- 這裡終端機裡面有東西欸 --> ---- 輸入 Hexo 安裝指令 [Hexo 官網](https://hexo.io/zh-tw/) ```bash $ npm install hexo-cli -g $ hexo init blog $ cd blog $ npm install $ hexo server ``` <!-- 要加 $ 喔？ --> <!-- 他們這樣沒辦法直接複製欸 --> <!-- 而起他們應該都用 windows? --> ---- 在瀏覽器輸入 [http://localhost:4000/](http://localhost:4000)  ## ~~部落格完成~~ --- ## 建立第一篇文章 ---- 文章儲存路徑： `./blog/source/_posts/` 輸入指令建立新文章： ```bash hexo new <文章名稱> ``` ---- 使用 MarkDown、HTML 語法編輯 `<文章名稱>.md` <!-- MD HTML 標誌圖 --> ---- 刷新 http://localhost:4000 ## ~~部落格完成~~ --- ## 搭配 GitHub Pages 讓別人看的到 ---- GitHub 創建新 Repository 使用使用者名稱作為 REPO 名稱 <!-- 截圖(網頁版(他們只會這個)) --> ---- 修改 `./blog/_config.yaml` Ctrl + F 搜尋 `deploy` ``` deploy: type: git repo: https://github.com/<Github 使用者名稱>/<使用者名稱>.github.io branch: master ``` ---- 輸入指令 ``` hexo g hexo d ``` 生成網頁檔案 push 到 REPO <!-- 幫我試試看這裡可不可以直接用 --> <!-- 我不太確定新創的REPO可不可直接用 hexo d 指令 --> <!-- I didn't try it b4, niether --> ---- 等待數分鐘並輸入網址查看 https://<GitHub 使用者名稱>.github.io ## ~~部落格完成~~ --- ## 美化 使用模板 ---- 在[官方主題頁面](https://hexo.io/themes/)尋找中意的主題，並點入依照教學安裝  ---- 完成！