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

聊聊使用自己的域名製作網站的二、三事

說到在網路上江湖闖盪,一個專屬的網域名稱,似乎是一個遲早都要考慮的選項,今天來分享一下我的心得。

1.域名選擇:
1.1. 我最早註冊的域名是 jute.idv.tw,因為當時並不知道可以註冊 .com、.net 或是 .org 等頂級域名。
1.2. 當時國內要註冊 .com.tw 的域名,似乎要有營利事業登記證,現在不知道還要不要,反正,可以直接註冊 .com,要不要附上營利事業登記證,也就不是那麼重要。
1.3. 考量到費用的問題,同時抱著姑且試之的態度,就給自己註冊一個 .idv.tw 的域名。
1.4. 為什麼是 jute,其實當時只是為了找到單字組合的字母數比較少,同時又有點意義的字來註冊,不過,我最近在使用時,覺得在鍵盤上打起來,還挺順手的。

2.註冊商選擇:
2.1 HiNet:起初,我跟中華電信額外註冊一個固定 IP 的網路連線(不是「HiNet非固定制固定IP申請」這項服務),並且找了部電腦,用 Linux 架設 Web Server,所以,我決定選用 HiNet 域名註冊服務(…這算是另外一種生態系嗎?)。
2.2 國內其他註冊商:印象中有用過 PChome,但介面長怎麼樣,已經不清楚,不過,如果要再註冊的話,域名設定後的更新速度會是我主要的考量。
2.3 Godaddy:有段時間,我用中文姓名的羅馬拼音組合,一次註冊 .net、.org 與 .info 等域名,而 .com 的部分,我記得是域名蟑螂開了一個數目不小的價格,問我要不要,我當時是請 Godaddy 客服出面,幫我用一個比較合理的價格取得該域名。Godaddy 當時還沒有中文,客服能夠讀懂我的破英文,並且提供服務,真的是滿不錯的。
2.4 Google:老早以前,在 Blogger 服務上面得知 Google 也有提供域名註冊的服務,今次我索性註冊 jutedev.com 來試試,使用至今,我實在非常滿意,比方說,域名設定更動後,更新速度奇快,而且,對於 Google 家的其他產品整合度高,例如:Google Console Search、Google Analytics 與 Google AdSense 等,設定上也相對方便許多,而目前大家注重的隱私權部分,除了幾個域名有其本身的限制外,例如:.DE 網域不支援隱私保護服務,基本上,Google 都提供帶有支援隱私保護服務的域名,不用額外花費,算盤打起來,我認為是划算的。

3.域名經營與維持:
3.1 有段時間,我棄用 jute.idv.tw,原因是我對頂級域名有些嚮往,而且折算下來,每年要付的費用不用到 400 元,就這樣一個決定,後來 jute.idv.tw 有了一段奇妙的遭遇。
3.2 如果,域名經營得還算不錯(以前有 PageRank 可以參考),或是自己用得很習慣,也滿常拿來代表自己,甚至印在名片上的話,那麼,這個域名的使用上,雖不用到至死方休,但,最好是持續用下去,這個預算不能省。
3.3 假設想要轉換到不一樣的域名,那麼,舊的域名做好轉址設定後,至少要再用個一年,這一點我記得在 Google Console Search 也有看過類似的建議。

最後,再筆記一下,我每年在域名註冊的費用上,大概是 400(jute.idv.tw) + 350(jutedev.com) + 800(Godaddy 初級版 Linux 主機服務) = 1,550 元。

我在 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)夾在中間的文字。