安裝與使用 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。

我在 WordPress.com 與 WordPress.org 之間的最終選擇

關於 WordPress.com 與 WordPress.org 之間,有什麼樣的差異,WordPress 官方有說明的文件:WordPress.com 與 WordPress.org – 支援

我的選擇是以 WordPress.org 自助託管版本的軟體架設在 Godaddy.com 為主,WordPress.com 則是拿來備份部落格。

做出這樣的選擇,主要是考量到預算與自由度。

  1. 預算:Godaddy.com 的虛擬主機(伺服器)服務中,有一個等級:初級版,這一級每月的費用是新台幣銅板價,相當符合我的需求。
  2. 自由度:這一點,WordPress.org 自助託管版本軟體是相對比較好使的,而且,當我思考在 WordPress.com 掛上自己的網域等,並取得一定的自由度時,就會把問題又回到預算上。

不只有 Godaddy.com 一家,其實有不少主機商都有提供方便安裝 WordPress.org 自助託管版本的軟體,這一點也讓想要入門的人,再減低了一些門檻。

附帶一提的是如果要拿 WordPress.com 來備份含有多媒體檔的文章,那麼,在多媒體相關附檔的處理上,會相對比較麻煩一點,以圖片或照片為例,我以前學來的經驗是使用 Flickr 等網路服務,把圖片或照片嵌入文章,而不是上傳到 WordPress.org 自助託管版本軟體所在的主機上,這樣一來,無論是從 WordPress.com 備份站轉入或轉出,都可以不用再耗費氣力去搬圖片或照片的檔案,只不過,以往這類免費的服務,開始有越來越多的限制,並且有慢慢朝向使用者收取費用的趨勢。

沒有不好,只是算盤常常要拿出來打一打。

搬回 WordPress

原本租用 Godaddy.com 上的主機服務,但是執行 WordPress 的效能實在不是很理想,讓我覺得花了冤枉錢,想要比較符合我要求的主機效能,費用有點高。所以,我輾轉使用了 Blogger、WordPress.com 與 Github,來重啟部落格之路。

最近接到 Godaddy.com 的提醒,表示我的主機服務即將到期,建議我續約,我因此登入 Godaddy.com 去確定「不續約」的設定是否安然無羔,也因此注意到 Godaddy.com 把主機的硬體做了一點升級。

猶豫了幾天後,我想,反正就當是一個為期約 3 個月的試驗,試用期間我會暫時停止更新這裡,考量到我還是有可能會回來繼續使用 Hexo 來維護部落格,我決定先把這裡保留下來。

如果效能符合期待,那麼,我願意繼續花錢把部落格架設在 WordPress 上面,而 GitHub 這裡也將持續保留,並且極有可能將不再更新。

筆記關於我目前選擇的 WordPress 外掛

下列是我在重新使用 WordPress 來維護部落格時,我目前選擇使用的外掛(Plug-ins):

  1. Akismet Anti-Spam
  2. CoBlocks
  3. Import Markdown
  4. Limit Login Attempts Reloaded
  5. Really Simple SSL
  6. Site Kit by Google
  7. WordPress Importer
  8. WP Githuber MD
  9. WP Statistics

除了預設安裝的外掛,我首先想要安裝的是 Really Simple SSL,這支外掛很重要,就我所知,沒有 SSL 加密的話,會影響到 Google 搜尋結果,而且,沒有 SSL 加密,瀏覽器還會顯示這個網站不安全之類的。你說,這好嗎?這當然不好,所以,我果斷先安裝這個外掛。

再來,我還有安裝跟 Markdown 有關的外掛,其中,我尤其推薦 WP Githuber MD 這一支外掛,它可以讓直接預覽用 Markdown 語法所產出的網頁模樣,雖然我之前認為預覽也沒有差,但是用過之後,就不會想再回去用 Notepad++ 寫 Markdown。

統計流量的外掛,我安裝了 2 支,主要是為了做比較,有助於實際觀察 Google 對流量的計算方法。

使用 Markdown 心得

使用 Markdown 大概快 3 個月了,來說說我的心得吧!

環境設定

  1. 設定 Hexo 算是很簡單的:把 Git 與 Node.js 裝上去,基本上就差不多搞定,雖然,我在網路上參考不少文章,而且多半是分享他們在 macOS 上的做法,但,我從一開始就選擇在 Windows 上設定本地端的撰寫環境。
  2. 原因是我想使用 Windows 的純文字編輯程式(最後我選擇 Notepad++),再來是假設我要換機的時候,我希望本地端的資料處理可以容易一點,…由於我還讀到 macOS 上的換機建議文章,在還沒有細讀之前,我就決定用別的作業系統來處理,Windows 在這個部分,可以說相當容易:只要在新機子上重新安裝 Git 與 Node.js,然後把本地端的資料整個轉到新機器上面,大致就搞定。

文章撰寫

  1. Markdown 的語法,從開始使用到目前,我沒有記得很清楚,可以說…都沒有在記,能夠讓我這麼懶的原因是我的貼文有一定習慣的寫法,而這裡的文章,要不就是插個圖檔或是影片檔,如果貼文的結構類似,直接就是製複、貼上,然後我把想要寫的東西置換就好。
  2. 寫完貼文後,看不到即時預覽是我目前遇到的狀況,我認為應該有工具可以讓自己寫的 Markdown 即時預覽,但,就跟上面說的一樣,貼文結構單純,再者,貼文量不大與更新率也不高,所以,沒有預覽,對我的影響也不大,上傳後的文章呈現的樣貌若與我的想像有差距,再改就可以,使用至今,多半只有微調而已。

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

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

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

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