如何用hexo在github page上部署屬於自己的第一個網站

發表於 更新於

起頭

部落格開張的第一篇文章，就決定以部署hexo產生的靜態網頁到github上來開頭了！

前置需求

  • 常用的文字編輯器(我是用visual studio code)
  • node.js



    安裝完之後，就可以開啟終端機來安裝hexo了~

hexo的環境建置

Step1. 安裝hexo

  • 打開終端機以後，輸入以下指令安裝hexo
1
npm install hexo-cli -g
  • 安裝完以後，可以在終端機輸入’hexo -v’，確定一下hexo是否成功安裝並顯示版本。

Step2. 初始化一個Hexo資料夾

輸入以下指令

1
hexo init <資料夾名稱>

則hexo會幫你產生一個資料夾，這個資料夾內就是你的blog根目錄了

Step3. 在資料夾安裝必要檔案

  • 目前的資料夾內部還沒有東西，首先先把終端機的目錄切換到剛剛產生的資料夾，接著執行以下指令來安裝所需要的套件:
    1
    npm install
    至此基本的hexo網頁架構就完成了！你的blog資料夾應該會長得像這樣：



之後要針對網頁內容的修改都會到source/_posts裡面更改

Step4. 建立一個新的網誌

  • 如果想要建立一個新的空白網誌，在終端機輸入
    1
    hexo new post "你的網誌標題"
    hexo就會幫你建立一個新的網誌，並且會在 source/_posts 新增一個md檔，md檔使用markdown語法來撰寫，因此建議對markdown有些基本認識[點我來去看新手教學]。在md檔裡面撰寫的內容會直接更新到網頁上


  • 如果想要測試你的網站的實際模樣，可以輸入
    1
    hexo server
    或是
    1
    hexo s
    來讓hexo把網頁部署到localhost，根據終端機顯示的ip用瀏覽器打開就會看到你剛剛的成果囉~

    至此基本的hexo網頁就完成了!

將hexo產生的網頁部署到github pages

先假定大家都已經有一個github帳號了，首先到github先開一個新的Repository，我們會將網頁內容上傳到這裡

接下來回到文字編輯器，打開_config.yml檔案，找到deploy子項，將repo改成你剛剛的repository連結



完成後到終端機輸入

1
2
3
hexo cl  //清空hexo的快取，避免有些內容沒有更新到
hexo g //在部署網站前先產生好靜態檔案
hexo d //deploy，把檔案上傳到你設定的deploy目的地，本篇教學是送到git

或也可以直接輸入

1
2
hexo cl
hexo g -d

這樣就完成網站部署了，在瀏覽器中輸入https://username.github.io/就可以實際看到你部署好的網頁囉~