建立一個屬於自己的(程式)部落格!
前言
開始上班後,Medium的產量大減,一部份的原因是還在適應職場的環境,但另一個更重要的原因是:
Medium不適合發跟程式碼或是數學有關的文章
在編輯上沒有支援Markdown語法或是程式碼Highlight,讓人很難提起動力寫跟程式有關的筆記。
但最近看了非常非常多的工作相關資訊,很希望能有個空間紀錄自己的心得、經驗,累積成自己成長的軌跡。於是我開始想要找一個方法經營自己的另一個Blog,用來記錄在工作過程中累積的經驗值、而Medium拿來紀錄自己的想法、分享最近看到的好書。
我希望這個Blog能夠有下列的特點:
- 擁有自己的DNS
- 免費
- 最好能有調整的彈性
綜合上述條件,最後我選擇使用Github Page + Hexo框架來 Own 一個Blog. 最後的結果我還蠻滿意的,能夠用Markdown語法撰寫、也具有程式碼Highlight的功能,很適合拿來紀錄工作上的心得~
成品連結:
有屬於自己的Domain Name,雖然掛在github下面,但穩定且又好記,最重要的是不需要付費,算是相當符合我的需求。
選用Hexo則是看中他的框架,能夠很方便的Deploy到github page上,並且提供Markdown語法來編寫網誌,也有多樣的主題跟外掛能夠選用。
附上Hexo 官網:
如何建立?
我們將其分為:
- 建立屬於自己的Github Page.
- 在本地端安裝Hexo、Hexo的基本簡介
- 選擇主題、安裝必要外掛
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版本,可以慢慢找出一個最適合自己的!
通常來說,分成兩個步驟:
- 首先是把Repo Clone到本地專案資料夾的 Themes資料夾中
2. 接著再到專案的config.yml檔案中設定Themes Value.
每一個主題基本上都是一個Github Repo,在裡面的README.md通常都會有安裝的指引,這邊就不再贅述。
後記
Hexo的好處在於有著非常完善的中文文件,所以有興趣使用的讀者,可以很輕鬆的找到部署的資源! 如果真的在建立的過程中遇到什麼問題,也很歡迎跟我一起交流! Have Fun!