iT邦幫忙

2021 iThome 鐵人賽

3
Modern Web

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

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

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

為何選擇 Hexo + GitHub Pages

優點:

  1. 免費
  2. 現成樣板自行套用,適合不需要高度客製化的人
  3. 本地撰寫,一個指令快速部署上線
  4. 支援 Markdown

缺點:

  1. 只能放靜態網頁
  2. 沒有後台可以做線上編輯(部分主題有提供連結GitHub文章編輯的功能)
  3. Hexo 和 主題 的版本都會更新,尋找網路資源時需要自行過濾(可能過1~2年的文章就不一定適用了)

架設流程

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 指令操作,可以打開部落格資料夾中的 package.json,裡面會有 Hexo 建立的scripts指令,可以用 npm 指令來操作,如果覺得每次都要下 3 個指令來檢查編輯成果,也可以自己新增指令讓他一次跑完:

    "scripts": {
    
      // 以下為自己設定的
      "go": "hexo clean && hexo generate && hexo server",
    
      // 以下為 Hexo 建立的
      "build": "hexo generate",
      "clean": "hexo clean",
      "deploy": "hexo deploy",
      "server": "hexo server"
    
    },
    

    完成上面的設定後,只要輸入指令 npm run go 就會執行清除、重建和開啟本地伺服器3個動作,指令名稱和執行的動作都可以自由更改。


6. 常用指令

  • hexo server(hexo s):如果希望在上傳到 GitHub 前能先查看編輯的成果,可以用這個指令,預設會在本地端的 4000port 開啟(網址是:http://localhost:4000/),只要在終端機中按下 Ctrl + C 就能關閉伺服器。
  • hexo new "文章名稱":新增一篇文章,新增完成後可以到 source/_posts 這個路徑底下找到文章並且編輯。

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


上一篇
[Day30] Vue3 - 條件判斷
下一篇
[Day32] Hexo - 修改主題樣式及一些問題排除
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言