將網站上傳到Github

佈署到 Github

• Hugo 官網教學文件
• Github - Working with GitHub Pages

01 佈署方式

佈署到github可以分為2種

1. 個人的首頁
   • https://<USERNAME|ORGANIZATION>.github.io/
   • 一個帳號只能有一個首頁 (這裡介紹的方式)
2. 專案網頁
   • https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/
   • 一個帳號可以有多個專案網頁
   • 需先上傳一個檔案，再把專案設為master branch

02 Github建立 Repository

在Github建立2個Repository

1. 和自己Github帳號同名 + github.io的Repository
   • yehyoung.github.io
2. 用來放整個網站源始碼的的Repository
   • 如果網站不想做版本控制，可以省略

• 建立時不要勾自動產生README.md
  • 如果Repository不是空的，就要先Pull

03 修改config.toml baseURL

修改baseURL很重要，設定錯誤可能網頁出不來(404)或是佈景沒有作用

• 網頁裡的css或JS檔有部份都是依據baseURL的值產生的，所以設錯會出現奇怪的問題
• 常見的設錯
  • 網址打錯
    • “Github帳號.github.io.git”
  • 沒有加https
    • “Github帳號.github.io”
    • “http://Github帳號.github.io”
  • 沒有設定
    • “/”

baseURL = "https://Github帳號.github.io"

04 產生要上傳的網頁

• 在網站的根目錄執行 hugo 或 hugo -t 佈景名稱
• 第一次要產生佈景相關的檔案(css, js, …)所以要執行
  • hugo -t hugo-theme-techdoc
• 執行後會產生 public 資料夾
  • 裡面存放 hugo 編譯完的檔案
  • 只需要上傳這個資料夾的內容到 Github 的檔案

05 上傳到 Github

cd public
git init
git remote add origin https://github.com/yehyoung/yehyoung.git
git add .
git commit -m "Initial commit"
git push -u origin master

06 瀏覽網站

在瀏覽器輸入網址:

• https://yehyoung.github.io/