🇹🇼 國慶日快樂!限定加碼 $1,010 購課金 🎇 點擊再現領 \\ 全站課程 85 折券 //
天
時
分
國慶特選課現折 $1,010💥
登入/註冊
Github 免費架站術!輕鬆打造個人品牌
0 seconds of 2 minutes, 24 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
00:00
00:00
02:24
 
古君葳

Github 免費架站術!輕鬆打造個人品牌

如何架設專屬於自己的網站?大部分的人會直接利用網路上已有的平台,像是:痞客邦、WordPress、Wix⋯⋯等,這些平台雖然非常方便使用,但是其最大的缺點,就是永遠看起來都差不多的主題介面。 如果你想要架設一個不一樣的個人網站,使用 Github Pages + Hugo 是一個不錯的選擇。Hugo 提供了非常多樣的主題做選擇,並且使用 Markdown 進行文章的格式排版,非常容易上手。 本課程會一步步的教學如何從零開始架設個人網站,當上完這門課時,你的個人網站也已經完成了!
查看更多
Hahow AI 學習升級
評價優於前 10% 課程
5.0
(223)

關於課程

課程包含

包含 5 章 18 單元、1 項作業

課程時長

4 時 24 分鐘

課程總人數

2358 位同學

觀看限制

不限觀看次數,還會附贈完課證書

學習升級

Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解,讓知識派上用場

最新消息

課程內容

主題標語為「Github 免費架站術!」與「輕鬆打造個人品牌」,畫面呈現 GitHub 程式碼、網頁介面、HTML、CSS 與工具圖示,傳達個人網站架設概念。

近幾年網路興起,個人品牌也逐漸的被重視,像是 Youtuber 阿滴、啾啾鞋⋯⋯等,只要一提到他們,就能夠快速地聯想到他們專精的領域。而我相信,再小的個體,也能夠擁有自己的品牌,所以我透過架設自己的個人網站,希望能夠用自己的力量去影響更多人,同時也透過寫作,不斷的累積自己的專業技術能力。

想要架設個人網站的你,是否曾經在 Wordpress、Wix、痞客邦⋯⋯等網站尋找已久,卻總是找不到自己喜歡的排版?又或者說該平台充斥著非常多廣告,非常影響你的文章的閱讀品質?

如果你曾經打從心底希望,能找到一個更快速、更簡約、樣式更有特色的個人網站,那麼就來嘗試使用 Github + Hugo 架設屬於你自己的個人網站吧!

這堂課程適合:

  1. 想要經營個人品牌的你:跟著這堂課一邊做,上完課就能擁有你的個人網站!

  2. 有意製作個人網站的你:不知道該怎麼開始?覺得既有網站服務太貴?這堂課將教你怎麼「免費」架站!

  3. 已經有個人網站的你:如果覺得套版枯燥乏味,可以透過 Github + Hugo,靈活且彈性的製作一個更有特色的網站!

為什麼工程師該架設個人網站?

身為一個工程師,當然要用工程師的方式來展示自己啦!

如果你有一個自己的個人網站,你就可以將自己過去的經歷總合在一起,像是學歷、工作經歷、擅長的技能、累積的技術文章...等,比傳統制式的履歷表好看多了。

一個好看的個人網站,不僅可以讓人耳目一新,另一方面,也會讓人覺得你的技術力是受肯定的,因此對於工程師來說,架設個人網站可以說是一舉兩得!

如果不是工程師,也適合這堂課程嗎?

不是工程師的你,難道就不能夠架設自己的個人網站了嗎?肯定不是這樣的,只要你願意學,架設個人網站真的不難,並且這門課上會用到的所有資源都是免費的,既然也不會花多少錢,何不嘗試給自己一次機會接觸看看程式的力量呢?

為什麼要使用 Github + Hugo 架設個人網站?

架站比較:痞客邦、WordPress、Wix 廣告多、模板差不多、需要繳年費,且網站內容無法匯出;Github + Hugo 無廣告、可自定義網站版型、完全免費,網站內容屬於自己。

優點一:免費!免費!免費!

免費真的是最重要的一件事情了,如果你是使用其他的架站工具架設個人網站,每年都需要付年費給主機商,而且年費還可能會越來越高。並且像是 Wix、WordPress 這類架站工具,還會限制你不能把網站的內容匯出,因此就算你兩年過後想要將網站內容帶走,拿到另一個主機上繼續使用,也是沒有辦法的,你只能一直在那家架站工具上,不斷的繳年費給主機商,才能維持你的個人網站,否則你就只能打掉重來,在另一個地方重新建起你的個人網站。

而對於使用 Github 來架站的人來說,則完全不會有這個問題。

你可以把 Github 視作一個永久免費的主機商,並且不會對你的內容做限制,你喜歡放什麼東西就放什麼東西,如果有一天你想將個人網站遷移到另一個主機上時,也只要一兩行 Git 指令就可以了,非常快捷。

優點二:給人技術力強的印象

使用 Github + Hugo 架設個人網站的工程師,和使用現成架站工具架設個人網站的工程師,當然是使用 Github + Hugo 的工程師給人技術能力比較強的印象啦!因為一個需要寫程式,而另一個則是直接使用 UI 介面。

並且 Github 是程式領域中非常具指標性的平台, 當別的工程師看到你有在使用 Github 時,對你的技術力好感度也會上升。這也是為什麼有時候面試時主管會要求你填上 Github 帳號的原因之一,有在使用 Github 的工程師,會給人技術力較高的印象。

優點三:快速好上手,架站真的可以很簡單

如果說免費是 Github 的特點,那麼快速好上手就是 Hugo 的特點了。

要知道,從頭架起一個個人網站是很麻煩的,你必須要考量到怎麼設計文字編輯器、怎麼設計頁面結構,而 Hugo 就是幫助我們簡化了這件事情。Hugo 讓我們可以下載別人設計好的主題,接著運行一行指令,就可以快速的把個人網站架起來。

優點四:版面簡約優雅卻不失靈活性

Hugo 在簡化架設個人網站之餘,仍然保留了靈活性,只要你有 Html、Css 的相關知識,你就可以非常輕鬆的在網路上搜尋你喜歡的元件,然後把它加進你的個人網站。

像是我的個人網站 https://kucw.github.io/about 頁面中,Experience、Skill、Course 的圖表部分就是我自己參考網路上的功能、自己設計樣式,最後才加進我的個人網站裡的。相比較之下,其他架站工具只能依靠現有的模板、或是現有的插件來設計你的個人網站,並不能夠自己修改該頁面的 Html、Css,間接扼殺了你的創意發想。

個人經歷與技能摘要:2019 May ~ Now 任職 Java Backend Developer(Taipei, Taiwan),曾於北京任職;學歷包含台灣大學資訊工程研究所與交通大學資訊工程學系,技能列出 Java、Spring framework、Elastic Search、Linux、Git。

課程核心特色

從零開始一步步架站,上完課即完成!

本課程目的在教你如何使用 Github + Hugo 架設個人網站,我會一步步的教你如何從零開始架設個人網站,當你上完這門課時,你的個人網站同時也已經完成了!本課程每一堂課都是直接實戰演練,建議跟著課堂一起操作,會學習的比較快哦!

科技新手也適用,老師將一一解釋、不怕聽不懂

由於這門課程會牽涉到比較多專有名詞,像是 Github、Hugo、Markdown⋯⋯因此大部分的同學可能一開始就會感到害怕。但是,不了解(甚至沒聽過)這些專有名詞的同學不需要緊張,我會在課程中一一解釋這些名詞的意義,以及我們如何去使用它,上完這門課之後,相信你不會再對這些專有名詞感到陌生。

課程單元規劃

本課程將分成三部分,帶你建構出自己的網站:

課程內容分為三階段:基礎篇使用 Github + Hugo 架設個人網站,強化篇運用 Google 相關功能提升網站,進階篇學習自定義網站版型。

基礎篇 ► 了解如何使用 Github + Hugo 架設個人網站

  • 介紹什麼是 Github,以及如何申請 Github 帳號、如何使用 Github

  • 介紹什麼是 Hugo,以及如何安裝、運行 Hugo

  • 介紹什麼是 Markdown,以及 Markdown 相關的語法

強化篇 ► 了解如何使用 Google 相關功能強化你的個人網站

  • 介紹如何為你的個人網站加上 Google 相關功能(Google Search Console、Google Analytic),讓你能夠更好的管理個人網站

  • 介紹如何為個人網站加入評論功能

進階篇 ► 了解如何自定義網站版型

  • 介紹如何自定義網站版型(Html、Css)

  • 介紹如何添加新的元件在你的個人網站上

  • 介紹如何自定義 Markdown 渲染效果

上完這門課,你也可以做到!

時間軸版面 ► 用來呈現個人經歷、專業經驗 

Kucw's Blog 的 About Me 與 Experience 經歷時間軸:2019 May ~ Now 任職 Java Backend Developer,位於 Taipei, Taiwan;曾於 Beijing, China 工作,並就讀台灣大學 資訊工程研究所、交通大學 資訊工程學系,於 MediaTek 實習。

文章版面 ► 可以整理個人的想法、讀書心得、活動參加經驗,展現自己的軟實力!

Kucw's Blog 網頁截圖,左側有 About Me、Java Backend Developer 與 Category,右側列出「Superset 安裝教學」及「ElasticSearch-地理座標點 geo_point」文章。

課程教學方式

本課程會使用螢幕錄製的方式進行實作講解,一步步的帶你從零架起一個個人網站,建議可以在上課時,跟著課程一起操作,會學習的比較快!

關於講師

古君葳

我是古君葳,畢業於台灣大學資工所,目前在外商科技公司擔任 Java 開發工程師,負責開發 app 的後端程式。

我相信在現在這個網路時代,每個人都能夠在網路上發揮影響力,科技改變的不只是生活的方式,也改變了知識傳播的方式!

問題回覆與作業設計

問題回覆

可以在 Hahow 的問答區聯絡我、詢問課程相關問題,通常 1 ~ 3 天內我就會回覆,不管是程式還是環境相關的問題都可以詢問~

作業設計

本堂課程只有一門作業,就是在最後的時侯向所有同學分享你設計的個人網站,歡迎大家參考其他同學的網站設計,一起學習成長。

畫面左側以 GitHub 圖示搭配 HUGO 六角徽章,右側是探頭的藍色卡通角色,並有英文文字「Join us!」,呈現邀請加入的視覺設計。

哪些人適合這堂課?
1. 想要學習架設個人網站的學生 2. 資訊相關領域畢業的社會新鮮人 3. 想要轉職到科技領域的工作人士 4. 已經有許多作品集的 freelancer PS:「我不是工程師,適合上這堂課程嗎?」 工程師因為有相關背景,所以上手會相對容易一點,但即使不是工程師,只要願意跟著課堂學習,並且有實驗的精神,也可以創作出一個獨特的個人網站哦(如果你是跨領域的人才,做出來的效果可能還會好過於工程師哦,因為設計個人網站還是需要一點美感的XD) 自己架網站有別於一般套版付費的網站,可以更彈性調整自己想呈現的網站樣貌、也更能展現科技力,因此如果有心想加入科技產業的話,有一個自己架出來的網站,在求職時絕對是大大加分!
你可以學到
初學:套用 Hugo 現有主題,完成一個個人網站 進階(有前端相關知識):在現有的 Hugo 主題基礎上,修改出自己的個人網站 影片中提到的我的個人網站就是使用 Github + Hugo 架設的 ,網址在此 https://kucw.github.io
上課前的準備
需要準備的工具 / 軟體(若購買課程前不清楚版本是否支援,請先留言與老師確認。)
一台電腦(Mac、Windows 皆可以),課程中用到的 Github 以及 Hugo,會在上課時帶大家一起安裝
需要具備的背景知識
在架設個人網站的過程中,會需要更改一些程式碼,所以如果曾經學過任何一門程式語言(C、C++、Java、Python⋯⋯),會上手的比較快。不過,沒有上過任何一門程式語言的同學也不用擔心,只要有一份願意學習的精神,跟著課堂一步步的前進,也是可以完成個人網站的架設的。 本課程的第五章節為進階篇,進階篇中需要同學先了解一些前端相關知識(Html、Css)之後,再來學習,效果會比較好喔!
單元一覽
5 章 18 單元|總時長 264 分鐘
全部展開
1
認識 Github
影片單元
單元 1 - Github 是什麼?Github Pages 又是什麼?
影片單元
單元 2 - 申請 Github 帳號
09:17
影片單元
單元 3 - 在 Github 上建立你的第一份 code
15:34
2
認識 Hugo
影片單元
單元 1 - Hugo 是什麼?挑選一個你喜歡的主題吧!
08:02
影片單元
單元 2 - 在 Mac 上使用 Hugo 運行個人網站
13:39
影片單元
單元 3 - 在 Windows 上使用 Hugo 運行個人網站
12:09
影片單元
單元 4 - 安裝 VS Code、個人網站參數設定
34:41
3
嘗試寫一篇文章吧
影片單元
單元 1 - Markdown 是什麼?Markdown 語法介紹
27:54
影片單元
單元 2 - 分類文章、為文章加上標籤
13:07
影片單元
單元 3 - 使用 Hugo shortcodes
10:39
4
展示你的個人網站
影片單元
單元 1 - 發佈個人網站到 Github Pages 上
09:09
影片單元
單元 2 - 添加評論功能
14:51
影片單元
單元 3 - 添加 Google Analytics
20:43
影片單元
單元 4 - 添加 Google Search Console
影片單元
單元 5 - 聊聊 Google Adsense
03:32
作業單元
作業 1 - 分享你的個人網站
查看作業
5
進階篇:客製化現有主題
影片單元
單元 1 - 自定義網站版型
17:25
影片單元
單元 2 - 創造靈活度!添加新的元件吧!
影片單元
單元 3 - 自定義 Markdown 渲染效果
10:42
試看單元
播放試看影片
章節 1 - 認識 Github
單元 1 - Github 是什麼?Github Pages 又是什麼?
試看影片
10:13
播放試看影片
章節 4 - 展示你的個人網站
單元 4 - 添加 Google Search Console
試看影片
15:25
播放試看影片
章節 5 - 進階篇:客製化現有主題
單元 2 - 創造靈活度!添加新的元件吧!
試看影片
17:09
課程評價
5.0
/ 5.0
223 則評價
陳光宗2023-06-04
非常實用,無痛上手
我本身有付費Wordpress的個人網站,所以每個月用起來壓力山大,常常需要根據文章的點擊與入站人數,時刻在調整,但我又是一個不勤勞的人,更新是為了流量而更新,完全少了自願寫文的感覺,幸好有這堂課,我直接把付費網站關掉,直接無痛使用免費版,發現寫文的速度突然變得很快。雖然沒有HTML與CSS的基礎,但仍舊可以順利完成課程,產出自己的個人網頁。
查看更多
5 人覺得有幫助
蔡紹恩2023-12-19
Github 免費架站術!輕鬆打造個人品牌
這門"Github免費架站術"的課程真的讓我受益匪淺。老師的教學手法非常易懂,特別是對於沒有相關基礎的人來說,深感受益良多。循循善誘地帶領我們了解GitHub的架站技巧,透過實例演練輕鬆掌握要點。 課程安排很合理,分解教學內容,給予充裕練習時間,讓我能夠深入理解每個步驟。老師深入淺出地解釋GitHub相關概念,使我能夠迅速上手,輕鬆打造個人品牌網站。 值得一提的是課程分享環節,老師會分享自己在使用GitHub建立個人品牌網站上的心得與經驗,這讓我更深入了解實際應用場景,收穫頗豐。總體而言,這門課程不僅教授實用技能,更為我打開了展示個人風采的大門,感謝老師的用心教學。
(已編輯)
查看更多
1 人覺得有幫助
TripleWei2020-09-24
仔細又詳盡的架站~
只認識一點點前端跟網頁的基礎,還是可以透過老師的課程完成自己的網站! 之前就有透過網路上的文章,研究靜態網站的架站。但是光用git指令對初心者還是需要一些時間摸索。 老師還有教透過Google來展示網站,這是之前自己網路上摸索不會知道的!能透過老師快速地完成自己的網站,真的很開心! 老師講解的很仔細,口條也很清晰,沒有任何的問題!是一堂非常好的架站入門課,還能引發更多動機跟想法去學習更多網站的技術。 五星推推!
(已編輯)
查看更多
1 人覺得有幫助
林文揚2021-06-06
完全沒接觸過程式語言的人也能架起網站
網站架起來、套模版不太困難,要設計成自己想要的樣子比較花時間。有機會的話想學習更進階的,想要自由在想要的區塊加入配件。我是完全沒接觸過程式語言的人,做完很有成就感,感謝老師!(也學會了在Youtube輸入關鍵字找國外免費教學影片) 備註:我自己聽課的順序是聽1到3章後,先聽第5章,學會怎麼調整成自己想要的版型之後再上架,不然看著預設的網頁很難過啊。總之建議也可以最後再聽第4章,其實也不太會太進階。
查看更多
1 人覺得有幫助
廖晨瑄2022-06-29
適合網站初學者
老師的語速舒服,步驟邏輯流暢,能夠替學生設想並製作許多相關功能的教學,是能夠輕鬆跟著實作的課程。 這堂課適合沒有接觸過程式語言卻初次想嘗試製作個人網站的人。 因為很喜歡老師的表達、教學方式,因此也特別希望古古能夠再更詳細的介紹一些Github相關的功能與含義(例如github desktop裡的branch是什麼意思,Github網站初始設定時的readme是什麼等等)
查看更多
1 人覺得有幫助

意猶未盡嗎?

關於講師

古君葳
3堂課程
1篇文章
5,751位學生
哈囉!我是古君葳(古古),畢業於台大資工所、陽明交大資工系,曾在 Garmin 擔任 Java 資深後端工程師,也曾榮獲 2023 iThome 鐵人賽的《優選》獎項。 更多後端技術文章:https://kucw.io
前往講師頁面
精選學生作業

購課前問答

日期最新
日期最新
日期最舊
愛心數
f
2025-12-27
請問架設這個,可以有自己網址?固定?短的?免費?
古君葳
授課老師
2025-12-28
同學你好,對的!使用這個課程架設的個人網站可以有自己的一組免費網址,不過域名固定會是 https://xxx.github.io (xxx 是同學到時申請的個人帳號),再麻煩同學留意一下了~感謝!
(已編輯)
f
2025-12-28
老師請問,這樣免費網址,這樣您說的個人履歷或成果集,是可以private私人或限制公開,還是免費網址,內容要全部公開所有人呢? 謝謝,目前知道有這平台,但不太了解
f
2025-12-28
最重要是要會寫程式? 還是小白也能會?
古君葳
授課老師
2025-12-28
課程架設的個人網站必須是公開的唷,無法轉成私人的,再麻煩同學留意一下~ 另外不需要會寫程式也沒問題👌,課程中會帶大家一步步操作,如果中間遇到問題也可以隨時到討論區發問
f
2025-12-30
謝謝老師
f
2025-12-30
thanks
(已編輯)
f
2026-01-01
採購了
回覆
我也想問
云水
2025-12-08
老師 您好 想問這種就以內容為主的靜態式網站能導入影音影片和線上購物金流系統在個人網站裡嗎?
古君葳
授課老師
2025-12-12
同學你好,這是個好問題!這門課程因為使用 Github pages 來呈現個人網站,因此只能實作靜態頁面,如果同學後續想要導入線上購物和金流的話,會需要將網站搬遷到雲端主機上~ 但因為這部分的內容超出本門課程滿多的,而且也會需要比較深入的程式設計能力,如果同學是以架設購物網站為目標的話,這門課程可能不太適合🥹,再麻煩同學購課前留意一下了,感謝🙏
云水
2025-12-12
謝謝老師回覆
回覆
我也想問
李麟
2025-12-07
老師您好 我想寫作 也有一些自己做的原石飾品 想展示 看到此課程能架設自己的網站有興趣 但Githup都是英文版頁 英文不好的我且又是小白 能上手嗎?
古君葳
授課老師
2025-12-12
同學你好,抱歉晚回了😣,如果你是想架設一個個人網站用來展示你的原石飾品,那麼這門課完全沒問題唷👌,不需要有任何程式底子也可以上這門課,英文的話只要有基本能力就可以了,如果真的不太了解也可以隨時到討論區發問~我會盡力幫助大家解決問題 >< 希望有回答到你的問題!
回覆
我也想問
f
2025-11-18
請問網站,也可以有訂購功能或聯絡的功能?謝謝
古君葳
授課老師
2025-11-18
同學你好,這門課程介紹的網站主要為「靜態網站」,因此只能架設個人部落格、landing page 這種類型的靜態頁面,沒辦法有動態的訂購、新增購物車、結帳...等功能😣,再麻煩同學購課前留意一下了~感謝!
f
2025-11-19
是 好的 thanks
回覆
我也想問
Anne
2025-01-23
老師你好!請問目標是建立部落格,未來可能會有許多圖片,但Github pages容量有1GB的限制,請問還適合使用Github pages嗎?
古君葳
授課老師
2025-01-27
同學你好,哇這真是個好問題,以我自己的使用經驗來說,我的 Github pages 裡面約有 90 篇文章,總共添加了 300 張圖片,總大小為 70 MB,所以如果同學僅是一般寫技術文章 or 記錄生活的話,應該是不用擔心會超過 1GB 的限制~ 不過如果同學是想要放比較高解析度的圖片(專業攝影作品、4K 圖片)的話,那可能 1GB 的容量就真的會有點不太夠用,建議可以將圖片上傳到其他圖床,再在 Hugo 的文章中引入該圖片,這樣子也可以~ 因此不論同學你的圖片大小有沒有超過 1GB 的限制,都是可以使用 Github pages 架設個人網站的~差別只在這個圖片是放在哪個空間儲存而已! 希望有回答到你的問題~
回覆
我也想問
購買單堂課

NT$890
有什麼優惠可以用?
小蛙幫你找最佳優惠
登入看看 有什麼優惠用

相關標籤