↓Skip to main content

[數位工具]用Hugo+Github建立靜態網站

·1 min
Table of Contents

零基礎，非工程師也能架設自己的靜態網站

這篇記錄我上Hahow 好學校《Github 免費架站術！輕鬆打造個人品牌》這堂課的學習心得。

完課證明

這堂課內容分成三大篇章：

  1. 基礎篇：用 Hugo+Github 架設網站
  2. 強化篇：加入 Goolge 相關功能 (Google Search Console, Google Analytic)
  3. 進階篇：自定義網站版型、新增元件

目前僅完成基礎篇，架設了網站，陸續會再新增其他功能。 (先從 0 到 1，再往60、80、100邁進！)

要能順利架站，以下五點筆記：

一、申請 Github 帳號 - 注意 Username 命名 #

從Github 首頁點選 Sign up，進入 Github 帳號創建畫面。除了填入 Email 作為帳號及設定密碼之外，也要命名一個 Username。Username 會用於個人網站的網址 username.github.io。

註：未來若購買網域，可再自行設定網址。

二、挑選 Hugo 主題 - 響應式主題優先 #

進入Hugo 主題庫，會有各種主題任君挑選。建議從「響應式(responsive)」的主題挑選，因為它能讓讀者在電腦、手機或平板上有較佳的瀏覽體驗。

我選定「Congo 主題」來實作，原因有三：

  1. 主題說明書清楚易理解： 像 IKEA 的說明書，步驟清楚，解釋易懂，讓人可以享受架站的過程。
  2. 使用者清單透明可參考： 看不同使用者搭建的網站，能想像自己的網站可以做到類似的功能。
  3. 有持續更新較讓人安心： 從 Hugo themes 頁面能知道這主題最近更新日期，表示作者團隊有持續維護。

三、用 VS code 設定參數 - 把網站捏成你想要的樣子 #

從 VS code 延伸模組(extension)下載「Even better TOML」，增加.toml 檔案的易讀性。

依照主題說明書的指示，開始一步一步設定網站參數、改變大頭照、增加社群連結等。

閱讀程式碼是我遇到的第一個成長點。 就像讀五線譜，要知道音符、休止符、升降記號等，才能順利識譜。 閱讀程式碼則需要知道命名規則(如駝峰式大小)、註解、引號與分號的使用等，才能讀懂。

四、新建公開資源庫 - 用 Username 命名 #

根據Github pages 首頁公告，得用「username.github.io」新建一個公開(public)資源庫，後續上傳檔案後才能順利生成個人網站。

五、用 Github desktop 上傳檔案 - 你的網站出現啦！ #

從 Github 資源庫點選「Set up in Desktop」，將資源庫複製(clone)到個人電腦資料夾。 將需要上傳的檔案複製一份到該資料夾，最後從 Github desktop 上傳(publish)到 Github 資源庫即可。

等待 5 分鐘內的時間，網站就出現在username.github.io啦！

對於還不會使用 Git 指定的我而言，Github desktop是架站這條路上的墊腳石。

完成架站後，面對第二個成長點：持續更新。

To be continued.

《Github 免費架站術！輕鬆打造個人品牌》