只要五天透過 Hexo + GitLab 打造完全免費的部落格網站 Day1

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

#1: 安裝兩套軟體

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

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

#2: 註冊 GitLab 當作主機及網址

註冊 GitLab 帳號

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

設定網址名稱

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

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

創建主機

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

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

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

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

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

1
npm install -g hexo-cli

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

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

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

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

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

輸入指令以建置網站

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

1
hexo g # 即 hexo generate 的意思

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

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

1
hexo s # 即 hexo server 的意思

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



✏以上就是本次的內容,
💡希望對正在閱讀的你也有幫助,若有誤的地方也歡迎指教。
❓若有什麼疑問歡迎下方留言,我會盡速回復您!


支持|不只是個工程師

如果這篇文章對你有幫助,請幫我
拍拍手|LikeCoin基金將會分發LikeCoin獎勵創作者
追蹤| Facebook & Instagram
也歡迎點我小額訂閱【不只是個工程師】

歡迎關注我的其它發布渠道