安裝與使用 Hexo 在 Github 上撰寫部落格 EP.4

EP.4 我想要分享的是 Start Blogging。

發文的部分,我後來知道有不少支援 Markdown 的程式,也有人會用線上的 HackMD – Markdown 協作知識庫(↗) 來編輯自己的文章。

我的話,一開始就用 Notepad++ 來編輯,曾經有動過轉用別的方式與程式的念頭,後來都還是做罷,原因是複製貼上也很好用。

話是這麼說的…

  1. 請先進到「自己的部落格資料夾」(是的,就是一開始用 mkdir 做出來的那一個),來到路徑 /source/_post,由於是剛種好的嫩芽,裡頭只有一支 hello-world.md 的文章,我就是從複製這一個檔案開始用 Hexo 寫部落格的。
  2. 別小看這個 hello-world.md,一打開裡面就有一些 Markdown 的語法說明,馬上就可以拿來用。

有一個小地方,我會特別注意一下,就是 Markdown 的檔名,就會影響到部落格上面的 Permanent Link (縮寫為 PermaLink),一般來說,PermaLink 會盡量讓網址本身是有意義,這樣也讓人比較好讀、好辨識一點,所以,我會花一點時間用英文命名。

所以…,我用很懶的方式,寫了一篇 After Hello World(↗),讀到這裡的時候,原則上已經被我推送上去。

寫完後,記得存檔,在「自己的部落格資料夾」下一道指令:hexo d -g,原則上,部落格的貼文就會更新,如果沒有,要不就是稍等一下再重刷,再不就是刪掉瀏覽器的暫存檔,重新載入部落格。

安裝與使用 Hexo 在 Github 上撰寫部落格 EP.3

EP.3 可以大致分成 2 個部分,分別是:

  1. GitHub 端的連結準備:詳見本文後敘步驟 1 至 3。
  2. 本機端的連結準備與推送:詳見本文後敘步驟 4 至 8。

依據 EP.2 我個人給的建議,我也給這個 Demo 用的 Hexo 部落格網站,命名為 jutedev.github.io(這會是這個部落格的網址)。

  1. 建立好 Repository,點到該 Repository 的「Settings」,找到左下「Pages」那個選項,點「Choose a theme」。
  2. 點好之後,就會跳到下面這個畫面,基本上,直接點完「Select theme」,就可以再從「Settings」回到剛才那個「Pages」選項。
  3. 接著,就能夠看到自己即將發佈部落格的網址,正是 jutedev.github.io。這裡有 2 個重點要注意:其一,注意 Enforce HTTPS 一定要勾選核取;其二,看看「Source」那一項裡面,Branch 的名稱,通常是「gh-pages」,或者是像下圖所示的「main」,無論是那一個名稱,新手我建議直接記下來就好,先不要去改動這個地方。
  4. 完成上面 1 至 3 個步驟後,基本上 GitHub 端的連結準備已經做好,接著就是本機端的連結設定。首先,使用檔案總管,開啟 EP.1 時用 mkdir 這個指令產生的初始資料夾,找到「_config.yml」這個檔案,並使用文字編輯器(我選用 Notepad++)開啟這個檔案。
  5. 先處理網站標題、編輯者、語言與網站網址,在檔案一開始 1 至 16 行就可以找到 title、author、language 與 url,下圖的 language 我並沒有更動,如果想要讓網站以繁體中文顯示的話,請改成 zh-TW。。
  6. 接著來到「_config.yml」這個檔案的第 105 行,預設應該只會寫 type,這裡請自己把下面幾行程式貼過去用。

    type: git
    repository: https://github.com/jutedev/jutedev(記得改成自己的).github.io
    branch: main(記得步驟 3 的提醒,這裡的名稱要設定正確)

  7. 開啟命令提示字元(CMD),直接殺到一開始用 mkdir 新增的初始資料夾,先下一道指令:npm install hexo-deployer-git –save。眼尖的伙伴,應該會看到我立馬下另外一道指令:hexo d,雖然會吃到錯誤訊息,不過,我覺得走這條路,設定起來也算快,這個錯誤訊息是在跟使用者說,還沒有完成 Git 的初次設定,這裡我建議新手先做全域 (global) 設定。

    $ git config --global user.email "jutedev@gmail.com(記得改成自己的)"
    $ git config --global user.name "jutedev(記得改成自己的)"

  8. 再下一次 hexo d 這道指令,會再出現另外一個錯誤訊息:還沒有做完 Git 認證,所以很貼心地提供 2 種方式:要用網頁登入的方式,還是直接在 CMD 裡面輸入帳號密碼,預設 (default) 是網頁登入。在這裡,我選擇第 2 項,設定好 hexo d 會自行繼續走完。

順利的話,走完 8 道程序,就完成本機端與 GitHub 端的連結與推動,看到一個 Hexo 預設佈景的部落格。