Hugo+github+cloudflare 免費開源個人網站模板架站工具
不會寫程式也能架網站?
期末報告想放在線上分享?面試需要作品集網站?想幫社團做個官網?
你可能會想:「我又不會寫程式,架網站一定很難又很貴吧?」其實不會。
今天要分享的這組免費工具,讓你一小時內就能擁有自己的網站。完全免費。
三個免費工具,搞定整個網站
建網站需要三樣東西:網站設計、存放空間、還有主機。
以前這些都要花錢,現在有免費方案:
Hugo:幫你把內容變成網站
Hugo 是個「靜態網站生成器」。聽起來很專業?簡單說,就是幫你把文字自動排版成網頁的工具。
你用類似 Word 的方式寫內容,Hugo 自動幫你變成漂亮網站。
它有超過 500 種免費主題,部落格、作品集、官網樣式都有。而且很快,幾秒就能生成整個網站。
不用寫程式碼,選個喜歡的主題套上去就好。
GitHub:免費的雲端空間
GitHub 原本是工程師存程式碼的地方,但也很適合存網站檔案。就像 Google Drive,但專門為網站設計。
把網站檔案放上去,它會自動保存每個版本。
改壞了可以還原。完全免費,沒有容量限制。
Cloudflare:免費網站主機
網站做好了要放哪裡?傳統主機一年要幾千塊,但 Cloudflare Pages 免費。
它提供:
- 主機空間
- SSL 憑證(網址前面會有 https 小鎖頭,看起來更專業)
- 全球 CDN 加速(世界各地的人開你的網站都很快)
- 自動部署(你在 GitHub 更新內容,網站立刻跟著更新)
這些功能全免費,沒有隱藏費用。
為什麼推薦給大學生?
- 履歷加分 - 有自己的網站,面試時比別人專業
- 門檻低 - 不用學寫程式,會打字就會
- 省錢 - 一年至少省 3000 元主機費
- 展現自學力 - 證明你有解決問題的能力
三種實際用法
學術:期末報告放上網,隨時都能看
大四的Jenny 做了份「台灣老街文化研究」報告。他用 Hugo 的部落格主題,把報告內容、田野調查照片、訪談影片整理成網站。
上台報告時直接打開網址給大家看。教授覺得很專業,還分享給其他班參考。
Louis 把網址放履歷上,申請研究所時, 在面試時讓教授看到他的線上研究內容。
適合:論文報告、研究筆記、專題成果
好處:不用印一堆紙,內容隨時能更新,還能放影片和圖表
求職:做個作品集,讓 HR 看到實力
企管系的小美想應徵行銷企劃,但履歷上的「文案能力強」總覺得空泛。
她用 Hugo 做了作品集網站,放上幫社團寫過的宣傳文案、活動企劃、社群經營成果。
面試時 HR 問有沒有相關經驗,她打開網站說:「我做了個作品集,可以看一下過去的專案。」HR 看完印象很好,後來順利錄取。
適合:履歷網站、作品集、專案展示
好處:比 PDF 履歷生動,能放影片、圖片、連結
社團:辦活動需要宣傳網站
學生會要辦校慶活動,需要宣傳網站。
以前要花錢請人做,或用免費平台(但會有廣告、網址很醜)。
他們用 Hugo 的主題,花了半天時間做好活動官網。
網站有活動介紹、報名連結、精美照片,網址也簡潔(像是 schoolfest2025.pages.dev)。
分享到社群時,預覽圖漂亮,點閱率明顯提升。
適合:社團官網、活動宣傳、線上刊物
好處:免費、快速、專業,不會有廣告
5 步驟快速開始
步驟 1:安裝 Hugo(5 分鐘) 到 Hugo 官網(gohugo.io)下載安裝檔,點兩下裝好。
步驟 2:選主題(10 分鐘) 到 Hugo 主題庫(themes.gohugo.io)挑喜歡的樣式,用範例程式碼建立網站。
步驟 3:寫內容(30 分鐘) 用 Markdown 格式寫內容。不會 Markdown?網路上 5 分鐘就能學會基礎。
步驟 4:上傳 GitHub(10 分鐘) 註冊 GitHub 帳號,建立儲存庫,上傳網站檔案。
步驟 5:部署到 Cloudflare(10 分鐘) 註冊 Cloudflare Pages,連接 GitHub 儲存庫,按部署。完成。
整個流程大約一小時,網站就上線了。
試試看吧
看到這裡你可能還在想:「真的這麼簡單?」
老實說,第一次用確實要學一下。但網路上教學很多,遇到問題 Google 都找得到答案。學會之後,你就擁有隨時能用的技能。
不管是作品集、部落格、還是社團官網,這組工具都能做到。最重要的是,履歷上可以寫:「能獨立建立網站」— 這在求職時是個加分項。
延伸資源
- Hugo 官網:https://gohugo.io/
- Hugo github : https://github.com/gohugoio/hugo
- github : https://github.com/
- Cloudflare Pages 教學:https://developers.cloudflare.com/pages/