iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

MacOS新手操作指令學習紀錄,成為裝B前端工程師之路系列 第 31

[Day31] Hexo x GitHub Pages 打造個人部落格

鐵人賽30天結束後,緊接著開始六角學院的課程,又有新的筆記要寫,導致這系列的 Vue 一直沒有辦法寫下去,也因為寫的主題變多,決定來架設部落格,之後的文章也都會放到部落格內,這篇也分享學習架設的過程。

為何選擇 Hexo + GitHub Pages

優點:

  1. 免費
  2. 現成樣板自行套用
  3. 本地撰寫,一個指令快速部署上線
  4. 支援 Markdown

缺點:只能放靜態網頁


架設流程

1. 事前準備

  • 擁有 GitHub 帳號
  • 完成 Node.js 環境建置(會用到 npm)
  • 安裝 IDE(推薦 VS Code)
    以上如不會操作,可以參考本系列前面的文章

2. 建立 GitHub Pages

  1. 開新的 repository
    https://ithelp.ithome.com.tw/upload/images/20211021/20129729S70mC0XsIe.png
  2. 名稱設定為『自己的帳號.github.io』,並設為公開
    https://ithelp.ithome.com.tw/upload/images/20211021/201297292iNj7oTWpT.png
  3. 進入這個 repository,並點擊 settings
    https://ithelp.ithome.com.tw/upload/images/20211021/20129729zNj2sO9Jr2.png
  4. 左側選單選擇『Pages』,並點擊『Choose a theme』,隨便選一個主題即可。
    https://ithelp.ithome.com.tw/upload/images/20211021/20129729UhbqMKuRSM.png
  5. 在瀏覽器網址列輸入https://自己的帳號.github.io 就可以看到基本的 GitHub Pages 畫面。

3. 安裝 Hexo

  1. 開一個新的資料夾,並且用 VS Code 開啟。
  2. 在終端機使用 npm 安裝 Hexo。
    $ npm install -g hexo-cli
    
  3. 初始化基本的 Blog 環境。
    // "blog"此處為自定名稱,可以自行修改
    $ hexo init blog
    
  4. 完成後會生成一個資料夾存放相關檔案,資料夾名稱會是剛剛指令裡面指定的名稱。
    https://ithelp.ithome.com.tw/upload/images/20211021/20129729N4P6PiLwv3.png
  5. 移動到剛剛建置的資料夾內。
    // 依照自己定義的資料夾名稱更改指令
    $ cd blog
    
  6. 使用 npm 安裝所需相關套件。
    $ npm install
    
  7. 安裝 git 部署用套件。
    $ npm install hexo-deployer-git --save
    
  8. 要安裝的項目到此已經完成。

4. 設定 Hexo 環境

  1. 編輯 _config.yml 的基本資訊。

    • title: 標題
    • subtitle: 副標題
    • description: 描述
    • keywords: 關鍵字
    • author: 你的名字
    • language: zh-TW,語系預設為 en
    • timezone: 時區,可不填,預設使用電腦時區

    可以參考官方文件,有詳細解說:
    https://hexo.io/zh-tw/docs/configuration.html

  2. 編輯 _config.yml 的部署設定(在文件底部)。


5. Hexo 基本操作

  1. 前面步驟在安裝好 Hexo 的時候,已經有一個樣板頁面,因為設定有調整,所以需要讓他重新生成頁面。
  2. 先確認終端機目前處在 Hexo 建立的資料夾位置,使用指令清除先前的頁面
    $ hexo cl
    或是
    $ hexo clean
    
  3. 建立頁面
    $ hexo g
    或是
    $ hexo generate
    
  4. 部署到 github
    $ hexo d
    或是
    $ hexo deploy
    
  5. 前往 GitHub Page(https://自己的帳號.github.io)查看頁面是否變得不一樣了。
    https://ithelp.ithome.com.tw/upload/images/20211021/20129729ffcIpzRoCS.png

6. 其他操作

  • 指令 hexo server:如果希望在上傳到 GitHub 前能先查看編輯的成果,可以用這個指令,預設會在本地端的 4000port 開啟(網址是:http://localhost:4000/),開啟伺服器時終端機會呈現鎖定狀態,要按下 Ctrl + C 結束,才會解除終端機鎖定。
  • 指令 hexo new "文章名稱":新增一篇文章。
    新增完成後可以到 source/_posts 這個路徑底下找到文章並且編輯。
  • 變更主題:
    1. 到主題網站(https://hexo.io/themes/ )尋找喜歡的主題樣式,因為自己爬了不少文章都會推薦同一個主題,這樣變成最後大家都長一樣,所以就不推薦了(比較尷尬的是大部分的主題語言都是簡中,有些主題連結已經死掉)。
    2. 範例樣板上會有該主題的 Github 連結,把主題的相關檔案下載下來(下載點要找一下,有些主題是可以直接用 npm 下載的)。
    3. 找到部落格底下名稱為『themes』的資料夾,在裡面建立個新資料夾,並且命名為該主題名稱(名稱可自行決定)。
    4. 把下載回來的主題解壓縮到剛剛建立的資料夾內。
    5. 編輯 _config.yml 檔案,修改 theme 的值。
      theme: 剛剛新建的資料夾名稱
      
    6. 完成。可以回到剛剛下載主題的 GitHub 看如何做細節調整,因為每個主題的設定不太一樣,在使用上會有些差異。

參考文章
瑪利歐的部落格
石頭的coding之路


上一篇
[Day30] Vue3 - 條件判斷
下一篇
[Day32] Hexo x GitHub Pages 主題自訂樣式+問題排除
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路32

尚未有邦友留言

立即登入留言