hugo 建立 Blog

部署Hugo個人網頁至GitHub

Posted by Ian Tsai on Saturday, May 2, 2020

    之前用Hugo架設個人網站，但架設完成後還是需要部署到一個平台，才有辦法瀏覽， 這篇就來分享如何將網頁部署到GitHub以及途中遇到的一些問題

    如果還不知道怎麼架設個人頁面的可以參考 使用HUGO建立個人網頁

    讓我們繼續看下去!

    **Hugo GitHub**上有兩個方法，這邊兩種都會介紹！

    User/Organization Pages
(https://<USERNAME|ORGANIZATION>.github.io/)

Project Pages
(https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/)

    • User/Organization Pages

    1. GitHub建立兩個repository

    首先要先建立兩個repository

    my_blog(可自行命名)                     放你原始Hugo程式
my_account.github.io(用自己的帳號)      放要部署的網頁程式

    這邊要記得，my_account.github.io這個建立時要選public，若不小心選到private的話可以依照這路徑去更改 Setting > Danger Zone > Make this repository public

    2. 建立部署網頁的資料(/public)

    回到根目錄，輸入

    hugo

    根目錄下面就會產生一個public的資料夾，裡面有自動產出的html，這是等等要部署到GitHub的頁面

    如果你在執行這步驟時，有開啟server，記得要先關閉在執行

    2-1. 設定pages source

    當你部署完成後，需要將Setting內GitHub Pages的Source指定到master，這樣待會測試時才會有網頁出現

    GITHUB PAGE
    GITHUB PAGE

    3. 連接public及my_account.github.io

    cd public
git init
git remote add blog <my_account.github.io_repository> #註1
git add .
git commit -m "first commit"
git push blog master

    git的部分就不在多做贅述，若有不清楚的可以點here看看

    註1：這邊remote name不用origin是因為另一個repo的remote name也會用origin，當初兩個都用一樣，在更新文章(下面會提到)時遇到不少問題，所以索性就用不一樣的名稱，這樣也比較好辨識，這可以照自己的習慣命名。

    4. 將Hugo資料夾連接到my_project

    cd ..
git init
git remote add origin <my_project_repository>
git add .
git commit -m "first commit"
git push origin master

    等待一下，然後輸入https://my_account.github.io/顯示出你的網頁就代表成功囉！

    • Project Pages

    0. 設定config.toml

    這邊要先更新config內的baseurl

    baseurl                 = "https://my_account.github.io/my_page/" #my_page為等等要建立的repo name，可自行命名
DefaultContentLanguage  = "zh"
title                   = "Ian Blog"

    1. GitHub建立兩個repository

    首先要先建立兩個repository

    my_blog(可自行命名)                   放你原始Hugo程式
my_page(要對應config內的baseurl)      放要部署的網頁程式

    這邊ㄧ樣要記得，my_page這個建立時要選public，若不小心選到private的話可以依照這路徑去更改

    Setting > Danger Zone > Make this repository public

    2. 建立部署網頁的資料(/public)

    回到根目錄，輸入

    hugo

    根目錄下面就會產生一個public的資料夾，裡面有自動產出的html，這是等等要部署到GitHub的頁面

    如果你在執行這步驟時，有開啟server，記得要先關閉在執行

    2-1. 設定pages source

    當你部署完成後，需要將Setting內GitHub Pages的Source指定到master，這樣待會測試時才會有網頁出現

    GITHUB PAGE
    GITHUB PAGE

    3. 連接public及my_account.github.io

    cd public
git init
git remote add blog <my_account.github.io_repository> #註1
git add .
git commit -m "first commit"
git push blog master

    git的部分就不在多做贅述，若有不清楚的可以點here看看

    註1：這邊remote name不用origin是因為另一個repo的remote name也會用origin，當初兩個都用一樣，在更新文章(下面會提到)時遇到不少問題，所以索性就用不一樣的名稱，這樣也比較好辨識，這可以照自己的習慣命名。

    4. 將Hugo資料夾連接到my_project

    cd ..
git init
git remote add origin <my_project_repository>
git add .
git commit -m "first commit"
git push origin master

    等待一下，然後輸入https://my_account.github.io/顯示出你的網頁就代表成功囉！！

    page
    apge

    • 寫自動化腳本

    部署成功後的，當然就是開始寫自己的blog拉！

    但如果每次發佈都要打一堆指令，個人會覺得很累，所以就來寫個腳本吧ＸＤ

    1. 建立deploy.sh

    在你的根目錄下建立deploy.sh的檔案，然後打開terminal，輸入chmod +x deploy.sh讓他變成可執行的檔案

    2. 撰寫deploy.sh

    #!/bin/sh

set -e

hugo 

cd public

git add .

msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"

git push blog master #註2

    註2：這邊就會遇到剛提到的remote的問題，如果兩個remote name都叫origin，那在這邊執行時就會有問題，因為原本的repo已經被第二個蓋掉了，所以這邊才用不同的remote去做分類

    3. 更新文章

    假設現在已經寫好文章要更新了 在根目錄下

    git add .
git commit -m "update new post" # 在更新前一定要將你的文章commit才可以往下執行

./depoly.sh

    這樣就完成拉！！ 也不用像一開始打一長串的指令，快速方便又好用！！

    • References

    • Host on GitHub 再次感謝官方文件大力贊助播出