所謂工欲善其事必先利其器,在開始製作網站之前有一些準備工作要做,跟著我一起 step by step 吧!
Step1: 安裝兩套軟體
由於我們需要透過 Node.js 來安裝 Hexo 網站並且透過 Git 來部屬網站,所以需要先下載並安裝下面兩套軟體:
安裝步驟基本上就是一路按下一部直到安裝完成即可。
Step2: 註冊 GitLab 當作主機及網址
註冊 GitLab 帳號
由於我們是透過 GitLab 作為靜態網站的主機及網址,因此我們需要先註冊一個 GitLab 帳號:
設定網址名稱
並且我們的網站網址就會是 “https://您的帳號.gitlab.io”
其中 “您的帳號” 會在註冊後會顯示在這裡:
若您不喜歡在網站正式上線前可以隨時在這裡更改:
※ 網站上線後嚴重不建議修改!
創建主機
接著跟著下方影片步驟創建一個 GitLab 專案當作自己的網站主機:
※ 其中有幾點需要特別注意:
- 專案名稱一定要是 “您的帳號.gitlab.io”
- 專案一定要設定為私人以在一定程度上保護您的網站
Step3: 正式開始安裝 Hexo 部落格網站
※ 溫馨提示:以下資料夾路徑盡可能不要有中文及空格!
打開命令提示字元並輸入下列指令安裝 Hexo
1 |
npm install -g hexo-cli |
在您的電腦上,打開您要放網站的資料夾並在該資料夾路徑上輸入 “CMD” 打開命令提示字元:
輸入下列指令以安裝您的網站
1 |
hexo init "您的網站英文名稱" |
Step4: 測試 Hexo 初始化網站是否可以運行
做完上述步驟,我們的基本網站模板就已經出來了!我們已經可以在自己的電腦上看到一個網站的雛形!
接著就來看看網站的雛型是否有安裝成功吧!
輸入指令以建置網站
一樣在 Step3 的最後一步後繼續輸入下列指令來產生靜態網站的資料
1 |
hexo g # 即 hexo generate 的意思 |
輸入指令來將網站部屬到電腦的伺服器上
如果在建置後沒有任何問題,就可以將網站部屬到我們電腦自己的伺服器上並打開 google chrome / microsoft edge 等瀏覽器,並在網址列輸入 “http://localhost:4000" 就會出現我們現在網站的模板囉👏👏👏
1 |
hexo s # 即 hexo server 的意思 |
那麼以上就是我們 五天打造完全免費的部落格網站 第一天!
如果沒有問題,恭喜你已經完成 20% 囉!
我們往 第二天 邁進!