建立一個屬於自己的(程式)部落格!

吳明倫 MingLun Wu
8 min readMar 18, 2020

--

前言

開始上班後,Medium的產量大減,一部份的原因是還在適應職場的環境,但另一個更重要的原因是:

Medium不適合發跟程式碼或是數學有關的文章

在編輯上沒有支援Markdown語法或是程式碼Highlight,讓人很難提起動力寫跟程式有關的筆記。

但最近看了非常非常多的工作相關資訊,很希望能有個空間紀錄自己的心得、經驗,累積成自己成長的軌跡。於是我開始想要找一個方法經營自己的另一個Blog,用來記錄在工作過程中累積的經驗值、而Medium拿來紀錄自己的想法、分享最近看到的好書。

我希望這個Blog能夠有下列的特點:

  1. 擁有自己的DNS
  2. 免費
  3. 最好能有調整的彈性

綜合上述條件,最後我選擇使用Github Page + Hexo框架來 Own 一個Blog. 最後的結果我還蠻滿意的,能夠用Markdown語法撰寫、也具有程式碼Highlight的功能,很適合拿來紀錄工作上的心得~

成品連結:

有屬於自己的Domain Name,雖然掛在github下面,但穩定且又好記,最重要的是不需要付費,算是相當符合我的需求。

選用Hexo則是看中他的框架,能夠很方便的Deploy到github page上,並且提供Markdown語法來編寫網誌,也有多樣的主題跟外掛能夠選用。

附上Hexo 官網:

如何建立?

我們將其分為:

  1. 建立屬於自己的Github Page.
  2. 在本地端安裝Hexo、Hexo的基本簡介
  3. 選擇主題、安裝必要外掛

1. 建立屬於自己的Github Page

首先你必須先有一個Github帳號,這是目前最有名的程式碼版本控制空間,有很多開源專案及Tutorial 都存放在這個網站。

註冊好帳號後,點擊右上角的新增專案(New repository)按鈕

進入創建頁面後,記得Repository的名稱一定要是

<使用者帳號>.github.io

舉例來說我的使用者id是 "MingLunWu",那麼這個儲存庫的名稱就必須是 "MingLunWu.github.io"

進到Repo頁面後,點擊上方右半邊的Settings連結:

其中會有一個Block可以進行github page相關設定。 這邊的Theme Chooser其實有一些Github內建的模板,可以先選一個看起來順眼的套用。

設定完成後,進入 : "https://<your user id>.github.io/" 頁面應該就能看到屬於你的網頁了! 如果已經很滿意這種套版的讀者,其實可以直接停在這裡,單純使用Github Page來建立自己的個人網站或是部落格。

如果我們要進一步的透過Hexo部署,請將這個Repo Clone到本地端。

二、在本地端安裝Hexo

我們在Hexo的首頁就可以看到簡單的安裝方法:

首先需要先安裝 npm (node package manager),這是屬於Node.js的套件管理工具,跟Python常見的Anaconda有點類似。 如果對這個工具不熟悉沒關係,在以下連結有附上每一個作業系統的安裝指示。

安裝好npm後,在Terminal 輸入下列指令

這邊要特別注意! 在執行上述指令後,會在當前目錄產生一個「blog」資料夾,裡面會有hexo的基本配置檔案。 我們需要把這些檔案原封不動的複製到上一個步驟Clone下來的資料夾裡面。

接著切換到Local Repo執行 "npm install",這個指令會根據我們剛剛複製的檔案中的 "package.json" 自動安裝需要的套件。安裝完成後,基本上我們就在本地端安裝好Hexo了!

Hexo的基本結構

這個是安裝好後資料夾內的檔案:

其中各個檔案簡介如下:

  • node_module -> 這個專案所需要的Package (剛剛透過npm install所安裝)
  • public -> 存放網頁中的文章、圖片、標籤等資料。
  • scaffolds -> 存放網站的內容模板。
  • themes -> 存放網站的主題 (稍後介紹)
  • _config.yml -> 主要設定網站內容的檔案

我們先在config.yml檔案中設定網站的基本內容:

可以設定網站標題、作者、以及網站的URL等基本設定,檔案中也有許多基本註解幫助你了解。

其中為了要透過指令自動部署到git page,務必記得要在config.yml的最後加上下列程式碼:

更多詳細的介紹可以參考官方文件:

Hexo的基本指令:

更動完 config.yml後,需要透過 clean 以及 generate重新根據設定來產生靜態網頁。 接著可以透過執行server來在本地端先查看網頁是不是符合需求。如果一切準備就緒,可以透過deploy來自動部署到git page上。

注意,如果在上一個步驟沒有在config.yml中加入deploy的設定的話,在這邊執行 hexo deploy是沒有辦法更新的喔!執行完畢後可以上到github的repo頁面,如果發現檔案有更新的話,應該就是執行成功了!

這時候如果再到 "https://<your user id>.github.io/" 頁面,應該可以發現網站已經變成另外一個樣子囉!

3. 選擇主題、安裝必要外掛

接下來要做的事情,就是為自己的Blog選擇一個適合的主題,可以到下面這個連結去尋寶:

裡面有數百個風格截然不同的主題,點進去也都能看到人家的Demo版本,可以慢慢找出一個最適合自己的!

通常來說,分成兩個步驟:

  1. 首先是把Repo Clone到本地專案資料夾的 Themes資料夾中

2. 接著再到專案的config.yml檔案中設定Themes Value.

每一個主題基本上都是一個Github Repo,在裡面的README.md通常都會有安裝的指引,這邊就不再贅述。

後記

Hexo的好處在於有著非常完善的中文文件,所以有興趣使用的讀者,可以很輕鬆的找到部署的資源! 如果真的在建立的過程中遇到什麼問題,也很歡迎跟我一起交流! Have Fun!

--

--

吳明倫 MingLun Wu
吳明倫 MingLun Wu

Written by 吳明倫 MingLun Wu

筆記控 / 攝影者 / Data Engineer | 希望能靠著筆記提升忽高忽低的生產力 | 技術筆記 @ minglunwu.com