安裝與使用 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 預設佈景的部落格。

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

EP.2 要分享的是經由幾個步驟,大致完成 GitHub 端的初始設定。

是的,在本機把 Git、Node.js 以及要 Blogging(發貼文)用的資料夾設定好之後,接下來要做的事,就是到 GitHub 申請一個帳號,並完成 GitHub 端的初始設定。

如果,已經有 GitHub 帳號,可以直接跳到後面說明 5;如果,還沒有 GitHub 帳號,請先 Sing up 一個,申請的步驟,大致如下:

  1. 填寫 Email、密碼與帳號名稱,至於第 4 欄是要問使用者要不要透過 Email 接收產品更新通知,所以,選「y」或「n」都不影響操作,這 4 欄都寫好之後,會代入「Verify your account」,主要是為了驗證使用者是「真」人,而非網路機器人。
  2. 來到一個信箱驗證的程序畫面,請跑一趟去打開剛才註冊時所提供的 Email 信箱,找到一封標題為「Your GitHub launch code」的 Email,裡面應該會有大大的 6 個數字,請把它填入這個信箱驗證畫面,或是直接點該封 Email 裡面的「Open GitHub」按鈕。
  3. 驗證通過的話,會進入 2 個進場面畫,第 1 個畫面讓人感覺是飛向外太空,第 2 個就是下面這樣的畫面。
  4. 新帳號,直接就點「Create repository」,在這個步驟,如果還沒有打算花錢註冊自己的專屬域名,那麼,建議是建一個名為「帳號名稱.github.io」的 Repository,以我而言,就是 jutedev.github.io。
  5. 舊帳號並且已經有其他的 Repository 的話,就點「New」這個按鈕。

先寫到這裡,EP3 的部分,原則上就是把 EP1 與 EP2 做好的前置工作,進行一個連結的動作,連結完之後,就可以看到一個初始化樣貌的部落格網站,像這樣:jutedev.github.io(↗)

另外,以上圖示,有關個人資料部分,我都有經過後製,可能不是我本人的帳號。

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

EP.1 要分享的是經由幾個步驟,大致把本機的環境架設起來。

我在 Windows 上使用 Hexo+GitHub 撰寫貼文一段時間,覺得這樣的搭配很方便、好用。

之前,一直強調很容易設定,因為參考官網就大概可以成功,而且,網路上的教學與資源很多,我今天也寫一份下來,給自己當參考用,另外,如果覺得比較習慣我的敘述方式,也歡迎參考與討論。

Hexo 有兩個非常基本搭配元件:Git、Node.js,這個只要能夠在網頁上找到「Download」,下載後找到檔案,進行一般的安裝(一直點下一步或 Next)就可以完成。

installHexoandStartBloggingonGithubEp1

接下來,進入命令提示字元 (CMD),進行以下幾個步驟:

  1. 執行官網上幾乎可以說是 Slogan 的指令與參數:npm install hexo-cli -g。
  2. 新增一個在本地端要拿來寫貼文的資料夾:使用的指令是 mkdir。
  3. 初始化剛才新建立的資料夾:使用指令與參數 hexo init。

下完指令看到「Start blogging with Hexo!」,就大致完成本機端的初始設定。

EP2 要分享的,就是處理 GitHub 端的設定:申請帳號與新增 Repository。

把我的部落格從 Blogger.com 轉移至 GitHub

GitHub 可以免費架設部落格,引發了我的興趣,我花了大概 6 個小時,去瞭解 GitHub 的部落格相關基本知識、遷移 Blogger 到 GitHub 的方法。

我選用 Hexo,至於轉換上的心得,我自己實做後的感想是 Blogger 直接轉換成 MarkDown 還算容易,但是在整個部落格文章的轉換上,先把 Blogger 轉到 WordPress.com 後,再匯出 WordPress 上的 xml 檔,接著,再使用 Hexo 做最後的轉移,反而是比較穩定的做法。

目前稍為看了一下文章,初步的發現是 Blogger 的文字特性(粗斜體、顏色)等等會在過程中跑掉,變成被斜線號(Slash)夾在中間的文字。