只要五天透過 Hexo + GitLab 打造完全免費的部落格網站 Day1 | 不只是個工程師

所謂工欲善其事必先利其器，在開始製作網站之前有一些準備工作要做，跟著我一起 step by step 吧！

Step1: 安裝兩套軟體

由於我們需要透過 Node.js 來安裝 Hexo 網站並且透過 Git 來部屬網站，所以需要先下載並安裝下面兩套軟體：

• Node.js
• Git

安裝步驟基本上就是一路按下一部直到安裝完成即可。

Step2: 註冊 GitLab 當作主機及網址

註冊 GitLab 帳號

由於我們是透過 GitLab 作為靜態網站的主機及網址，因此我們需要先註冊一個 GitLab 帳號：

• 註冊 GitLab 帳號

設定網址名稱

並且我們的網站網址就會是 “https://您的帳號.gitlab.io”
其中 “您的帳號” 會在註冊後會顯示在這裡：

若您不喜歡在網站正式上線前可以隨時在這裡更改：
※ 網站上線後嚴重不建議修改！

創建主機

接著跟著下方影片步驟創建一個 GitLab 專案當作自己的網站主機：
※ 其中有幾點需要特別注意：

• 專案名稱一定要是 “您的帳號.gitlab.io”
• 專案一定要設定為私人以在一定程度上保護您的網站

Step3: 正式開始安裝 Hexo 部落格網站

※ 溫馨提示：以下資料夾路徑盡可能不要有中文及空格！

打開命令提示字元並輸入下列指令安裝 Hexo

1

npm install -g hexo-cli

在您的電腦上，打開您要放網站的資料夾並在該資料夾路徑上輸入 “CMD” 打開命令提示字元：

輸入下列指令以安裝您的網站

1
2
3

hexo init "您的網站英文名稱"
cd 您的網站英文名稱
npm install

Step4: 測試 Hexo 初始化網站是否可以運行

做完上述步驟，我們的基本網站模板就已經出來了！我們已經可以在自己的電腦上看到一個網站的雛形！
接著就來看看網站的雛型是否有安裝成功吧！

輸入指令以建置網站

一樣在 Step3 的最後一步後繼續輸入下列指令來產生靜態網站的資料

1

hexo g # 即 hexo generate 的意思

輸入指令來將網站部屬到電腦的伺服器上

如果在建置後沒有任何問題，就可以將網站部屬到我們電腦自己的伺服器上並打開 google chrome / microsoft edge 等瀏覽器，並在網址列輸入 “http://localhost:4000" 就會出現我們現在網站的模板囉👏👏👏

1

hexo s # 即 hexo server 的意思

那麼以上就是我們 五天打造完全免費的部落格網站 第一天！
如果沒有問題，恭喜你已經完成 20% 囉！
我們往 第二天 邁進！

• Day1 事前準備
• Day2 透過最多人使用的主題 NexT 做出範例網站
• Day3 客製化網站並新增更多內容
• Day4 加入外掛及優化 SEO
• Day5 未來展望