方格精選

技術筆記|使用 Hugo 免費搭建個人網站

更新於 發佈於 閱讀時間約 7 分鐘

兩年多前,開始有了重新架構網站的想法,所以把 Blogger 架設的網站,移轉至到了新的平台,當年我也做過了一些優缺點評析,剛好最近又再重新整理網站的所有架構,順便也重新啟動了一次 Hugo 架設網站的循環。

奇妙的共振,讓我在 Matters 看到了篇關於自架網站的相關文章,透過連結看到許多自架站的成果,例如魔鬼小編的生活就是這麼廢YZ Straight Talk|繼續寫字,提供了許多網站排版的靈感,漸漸把自己從無盡的「版型搜尋」解放出來,開始設計一個改版後的網站,呈現改版後的自己。

如之前說過的,我對於手把手的文章沒有這麼擅長,所以大概講一下頭跟尾,並提供更多的資源給大家參考外,還是要回來著重思考的過程以及獲得的內容。

Hugo 的門檻

寫部落格十幾年的時間,想當年最喜歡的平台是「明日報」(相信大家應該幾乎沒聽過),幾個大平台來來去去,到現在大概就幾大主流 Google 旗下的 Blogger、具領導地位的 Wordpress,廣告非常惱人的 Pixnet,還有幾個 WIX 類型的網站建置系統。

Hugo 算是近年興起,慢慢擁有一片天的網站架設工具。基本上,很類似 Wordpress,他可以提供不僅僅只是部落格,更強大的是可以成為一個網站。

但相較於其他平台,Hugo 門檻是比較高的,這樣的門檻帶來了一些特色,卻也讓很多人沒有辦法入手,例如:

  1. 熟悉 Markdown
  2. 能夠懂 Github 使用
  3. 能夠自主的架設 Hugo 在電腦上產生網頁

Hugo 是否過 Google 研發的 GOlang 為基礎,創造出來的靜態網站編譯器。所有的網站最後都會經過轉譯成為 HTML 檔案,擁有極佳的速度體驗,但去也產生了門檻跟限制。

第一個編輯文章的時候,需要倚靠 Markdown 來編輯原始稿件,Hugo 支援許多 Markdown 格式,不過對於不熟悉 Markdown 的人,你當然可以開啟 HTML Code 書寫模式,但其實就沒有這麼方便。

再來就是架設網站的時候,有多種選擇,目前看起來最方便的就是透過 Github,基礎是創建一個 Github Page 把輸出的 HTML 檔案放在裡面,不過後來我發現更好方式是把 Github 連結到 Netlify,這樣可以自動部署。

講到這邊都是技術門檻,網路上是有許多資源的,1大家可以自己去參考或搜尋 Hugo。

總的來說,技術的門檻比現在盛行的工具,是高出許多的,但我自己覺得,結果是一個甜美的果實。

客製化設定的部分

延續這樣的門檻,如果大家有興趣,可以慢慢的自己做做看。當你突破了技術設定的部分,或許會對能客製化的部分吸引。

這兩年多來,總是會因為自己覺得能夠更好的部分,對網站有增減的部分,很多技術面的內容,我有收整在另外一篇文章

Hugo 的好處就是完全的免費開源,也已經有許多人使用在自己的網站上,所以當有問題的時候,上網搜尋可以看到許多問答集,自己慢慢測試可找到答案。

另外一層面,即使你不熟悉程式碼,但只要基礎的 HTML 跟 CSS 設定,也能夠達到許多客製化版位的部分。

例如,目前未來六米上面有許多欄位都是透過 HTML 與 CSS 設定出來的,例如以下的三個版位。

raw-image
raw-image
raw-image

還有許多其他的版位,歡迎多光光網站不同的文章。基本上都是透過 CSS 與 HTML 簡單的改寫之後,就可以完成的。

我自已本身就已經累積了一定的經驗,所以可以根據自己需求制定,當然你也可以選擇一個自己喜歡的版型,目前已經累積了上百種的免費版型,真的要使用的話,其實也是充滿不同的選擇。

使用免費的主機資源

在使用 Wordpress 的時候,因為整個套件上面是包含了程式在裡面,所以需要主機的規格,要能夠提供 PHP 跟 MySQL 等資料庫與程式語言。這一點,Hugo 具備大大的優勢,因為所有 Hugo 編譯出來的網站,是靜態網頁。

目前已經有許多免費的資源,如之前講到的 Github Page,就是穩定的一個主機空間,當然網路上也有許多支援 HTML 網頁的免費空間,另外一方面如 Netlify、還有 Cloudfare Pages

如果使用付費的空間,當然也是可以的,所以在部署網站上面,Hugo 提供的選擇是非常多元的,雖然有一定的入門門檻,但之後主機上面選擇就非常多,且流量相對要程式運算的網站,也有節約的可能。

小結:做網站是一個反思的過程

上面大概是整合了一些不同的資源,感謝這文章的整理,讓我重新複習使用 Hugo 架設網站的過程。除了技術面以外,另外一部分的經驗是,一直在思考自己到底想要什麼。

因為看到幾個版型很舒服、清晰的網站,2使得自己在過程中,一直在思考著,我到底想要呈現什麼樣的感覺,又如何能夠創造一個連自己閱讀起來都覺得滿意的環境。

其實在這次動工之前,我大概每幾天都會回去看不同的版型,想著我應該要換到哪一個版型。設定很多條件,例如需要有亮色與暗色版本、需要能夠有多層次的選單等等。

好幾次,覺得自己選好了,最後又被那種無端的完美主義打敗,覺得這麼版型有個地方不合,這樣應該來回超過十次。

終於在這次的端午連假前夕,忽然覺得既然找不到一個完整屬於自己的,不如自己找一個適合的慢慢改成自己喜歡的吧

從過去修改到一半的版型,慢慢找到一個自己覺得適合修改,開始動工。感謝過去兩年多的累積,在修改上面能夠達到自己的需求;也感謝網路上許多的資源,能夠提供嘗試的可能,並且達到預期的效果。

在每次一個新的元素設計出來後,總是不斷地再斟酌,到底應該多少行距?要用什麼字型?大小、顏色是如何?要使用背景色嗎?一對問題不斷的自我省思,不斷地去思考:「哪些是我自己看了會開心,甚至於興奮的?

最後成就了現在的版型,相信你應該會發現在這裡面,充滿著許多我參考的一些影子,那是反覆抉擇下,找到的舒適感,參考別人的美,創造出自己的獨特。

這兩、三天的全力投入,前半段的端午假期都沒有做其他的事情,終於昨天推出了成果,是一段充滿不同思考的珍貴過程,相信這一段養分,在未來的文章中,也會不斷地呈現。

期待更多的分享以及碰撞出的火花

  1. 將部落格從 Wordpress 轉換到 HugoWordPress 搬家 Hugo 的記錄與設定[BLOG] 從WORDPRESS 移動到 HUGO ↩︎
  2. 雷蒙三十科技島讀電腦玩物 ↩︎


留言
avatar-img
留言分享你的想法!
avatar-img
韋觀 • Eyewithouts
83會員
109內容數
縮短知識與實踐的距離 📪 理清人生的脈絡,過上想要的生活。
韋觀 • Eyewithouts的其他內容
2025/03/25
Kin 1 磁性的紅龍,重新歸零,讓我們回到大地之母的關懷,擁抱屬於自己的本能與根性,為未來的開展留下更多的可能,展現承擔未知的勇氣。 我以為旅行是快樂的,但其實,不然,快樂從來都不應該「只」跟事情連結,應該是更屬於我們自己內心自然波動。
2025/03/25
Kin 1 磁性的紅龍,重新歸零,讓我們回到大地之母的關懷,擁抱屬於自己的本能與根性,為未來的開展留下更多的可能,展現承擔未知的勇氣。 我以為旅行是快樂的,但其實,不然,快樂從來都不應該「只」跟事情連結,應該是更屬於我們自己內心自然波動。
2025/02/01
一場聊天,可以得到好多提點。得很多事情的發生,雖然在當下的我們,會覺得很難受。但實際上,經過一段時間回來看,總會不自覺得深深相信,每個經歷的學習都會成為養分。
2025/02/01
一場聊天,可以得到好多提點。得很多事情的發生,雖然在當下的我們,會覺得很難受。但實際上,經過一段時間回來看,總會不自覺得深深相信,每個經歷的學習都會成為養分。
2025/01/31
因應 Apple Notes 加入,Craft 在我的流程之中,原本的 Content Center 功能,就會被 Apple Notes 跟 MWeb Pro 取代。
2025/01/31
因應 Apple Notes 加入,Craft 在我的流程之中,原本的 Content Center 功能,就會被 Apple Notes 跟 MWeb Pro 取代。
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本文分享自架網站及方格子寫部落格的差異,包括成本費用、彈性度、保障性、流量及門檻。針對自架網站的成本費用、彈性度、保障性、流量及門檻進行詳細分析,提供寫部落格猶豫使用哪個平臺的人一些建議。
Thumbnail
本文分享自架網站及方格子寫部落格的差異,包括成本費用、彈性度、保障性、流量及門檻。針對自架網站的成本費用、彈性度、保障性、流量及門檻進行詳細分析,提供寫部落格猶豫使用哪個平臺的人一些建議。
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
分享一件有趣的事! 我在生日前夕又送給自己一份驚喜大禮,而這份禮物是我原本計畫在下個月才要開始進行的。 我之前有提到要架設一個部落格網站,也有在我的房間討論區裡詢問多方經營的格友們問題,簡單來說:我已經決定在今年架設好一個自己的部落格網站,我在年初時後將支出分配完成後得到的結果是:最快6月可以架設
Thumbnail
分享一件有趣的事! 我在生日前夕又送給自己一份驚喜大禮,而這份禮物是我原本計畫在下個月才要開始進行的。 我之前有提到要架設一個部落格網站,也有在我的房間討論區裡詢問多方經營的格友們問題,簡單來說:我已經決定在今年架設好一個自己的部落格網站,我在年初時後將支出分配完成後得到的結果是:最快6月可以架設
Thumbnail
建置平台 前一陣子,有人問我是否要找尋合適的平台或自主建置平台,讓自己的文章能夠有更大的能見度。我覺得這是個很好的想法,所以也考慮要自己建立平台。但細想了一下,我覺得建置網站沒有必要,因為我現在的幾個平台就已經足夠我使用,也達到我想要分享內心世界的想法的目的。反而是,我應該思考如何用好平台,讓平台
Thumbnail
建置平台 前一陣子,有人問我是否要找尋合適的平台或自主建置平台,讓自己的文章能夠有更大的能見度。我覺得這是個很好的想法,所以也考慮要自己建立平台。但細想了一下,我覺得建置網站沒有必要,因為我現在的幾個平台就已經足夠我使用,也達到我想要分享內心世界的想法的目的。反而是,我應該思考如何用好平台,讓平台
Thumbnail
以下,就要和大家分享,我是如何利用免費Bloger版型,建置屬於個人風格的寫作部落格No End’s Writing Blogger。 首先當然是找到分享版型的網站。我是利用BloggerTemplates進行搜尋,你可以看到首頁①即有免費樣版的標籤,除了針對響應式(適應手機)、SEO設計的版型外
Thumbnail
以下,就要和大家分享,我是如何利用免費Bloger版型,建置屬於個人風格的寫作部落格No End’s Writing Blogger。 首先當然是找到分享版型的網站。我是利用BloggerTemplates進行搜尋,你可以看到首頁①即有免費樣版的標籤,除了針對響應式(適應手機)、SEO設計的版型外
Thumbnail
總覺得是該經營點文章內容的東西,因為平時心裡有許多想法, 想這麼多不如就寫下來當個紀錄吧!原本只有經營IG,都放羊毛氈作品的照片, 初期只有搭配少少的文字(因為想不到怎麼寫), 結果後來每篇文章越寫越長...越寫越多 最後我決定還是另外找個部落格來寫吧~ (我真的太搞威)在思考要用哪個部落格之前,我
Thumbnail
總覺得是該經營點文章內容的東西,因為平時心裡有許多想法, 想這麼多不如就寫下來當個紀錄吧!原本只有經營IG,都放羊毛氈作品的照片, 初期只有搭配少少的文字(因為想不到怎麼寫), 結果後來每篇文章越寫越長...越寫越多 最後我決定還是另外找個部落格來寫吧~ (我真的太搞威)在思考要用哪個部落格之前,我
Thumbnail
我從什麼時候開始寫blog? 忘了..... 我為什麼要寫blog?.......這點我倒是一直都記得.... 說回來,決定要搬家了,那該怎麼做? 痞客邦上有幾百篇的文章要怎麼搬?
Thumbnail
我從什麼時候開始寫blog? 忘了..... 我為什麼要寫blog?.......這點我倒是一直都記得.... 說回來,決定要搬家了,那該怎麼做? 痞客邦上有幾百篇的文章要怎麼搬?
Thumbnail
我想討論/分享我從選擇使用Blogspot / Blogger到在上面寫文章最後卻在寫文章的心路歷程。 首先你或許會想知道我 ◆ 為甚麼一開始會選擇Blogger平台呢? ◆ 為甚麼轉移到方格子了呢? ◆ 選擇方格子的原因 ◆ 之後的發展
Thumbnail
我想討論/分享我從選擇使用Blogspot / Blogger到在上面寫文章最後卻在寫文章的心路歷程。 首先你或許會想知道我 ◆ 為甚麼一開始會選擇Blogger平台呢? ◆ 為甚麼轉移到方格子了呢? ◆ 選擇方格子的原因 ◆ 之後的發展
Thumbnail
感謝換日線、梁雪莉Shirley兩位關於如何透過google協作平台自建個人網站的文章,讓長期困擾沒有個人頁面的我動起了念頭。 本篇文章補充分享網頁造訪人次計數器的設置、版權聲明的宣告方式以及Likeco拍手嵌入,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。
Thumbnail
感謝換日線、梁雪莉Shirley兩位關於如何透過google協作平台自建個人網站的文章,讓長期困擾沒有個人頁面的我動起了念頭。 本篇文章補充分享網頁造訪人次計數器的設置、版權聲明的宣告方式以及Likeco拍手嵌入,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。
Thumbnail
1.申請痞克幫、 方格子 這個方法適合給不想要麻煩的架站程序,只想好好專心寫作的人。 2.用wordpress、blooger架站 這兩個架站方使應該算是最簡單且功能最齊全的。 3.用google site製作 非常簡單方便製作網站,缺點是網站管理功能沒有像wordpress那麼多。 4.外包給網站
Thumbnail
1.申請痞克幫、 方格子 這個方法適合給不想要麻煩的架站程序,只想好好專心寫作的人。 2.用wordpress、blooger架站 這兩個架站方使應該算是最簡單且功能最齊全的。 3.用google site製作 非常簡單方便製作網站,缺點是網站管理功能沒有像wordpress那麼多。 4.外包給網站
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News