Mark Ku's Blog

問題

因為身邊很多,想和我一樣,擁有一個個人的網站,但架一個網站,光是放在雲端空間,至少費用4000元 以上,但也不是每個人都像我有自己的伺服器,因此,今天我想來寫一篇超省錢的架站法。

架站費用

網站空間 4000 以上 / 年
域名 680 元 / 年

Jeklly 是什麼

Jekyll是一個簡單的靜態網站生成器,用於生成個人,專案或組織的網站。 它由GitHub聯合創始人湯姆·普雷斯頓·沃納用Ruby編寫,並根據MIT授權條款釋出。 (Wiki)

事先準備

* 註冊 Github 帳號 連結

* 購買一個屬於自己的域名 ( 台灣域名 振遠比較便宜,如果是國際域名,那就去 Godaddy 購買)

架設步驟

1. 首先挑選 Jeklly 模板

免費模板

2. fork 專案,本篇以 Zolan 開源版型為例,點擊 Fork

GitHub Zolan專案頁面,Fork按鈕被紅框標示
GitHub Zolan專案頁面,Fork按鈕被紅框標示

3. fork 完成,接著我們要設定 Github Pages,Settings > Pages > Source > Root > Save

GitHub Pages設定頁面,選擇根目錄並儲存
GitHub Pages設定頁面,選擇根目錄並儲存

4. Github Action 這時就會開始建置部署,並部署網站

GitHub Actions 頁面顯示部署成功
GitHub Actions 頁面顯示部署成功

5. 建置部署完, 就會在您的 Github Pages 頁籤中,顯示你的網站網址

GitHub Pages 網站發佈成功畫面
GitHub Pages 網站發佈成功畫面

6. 輸入要客製的域名 Save

GitHub Pages設定頁面,客製域名輸入框與儲存按鈕
GitHub Pages設定頁面,客製域名輸入框與儲存按鈕

7. 至 DNS 將域名,新增一筆 CNAME 記錄,指向 Github 指定的 Url

GoDaddy DNS設定CNAME記錄指向GitHub
GoDaddy DNS設定CNAME記錄指向GitHub

8. 編輯專案下的 _config.yml,將 baseurl 清空 > Commit changes

GitHub頁面顯示config.yml檔案的baseurl行
GitHub頁面顯示config.yml檔案的baseurl行

9. 此時,Github Action 會重新建置部署,建置部署好,你就可以訪問你的 blog

Zolan部落格首頁,顯示作者個人簡介
Zolan部落格首頁,顯示作者個人簡介

10. 如果想要 https 憑證,可以將 DNS 網域託管在 Cloud Flare,即可獲得免費的 SSL 服務。 參考先前的文章

網站文章編輯

1. 切換到專案 Code > zolan/_posts,此資料夾就是blog 的文章,點選任一選則文章。

GitHub專案zolan的 posts資料夾顯示文章列表
GitHub專案zolan的 posts資料夾顯示文章列表

2. 點選編輯

GitHub頁面顯示Jekyll文章內容與編輯按鈕
GitHub頁面顯示Jekyll文章內容與編輯按鈕

3. 試著修改標題及內容 > Commit change

GitHub編輯Jekyll文章的Markdown檔案 GitHub 提交文章變更的 Commit changes 介面

4. 直到Github Action 建置部署完,剛剛修改的文章內容,就更新了。

Jekyll部落格文章頁面截圖
Jekyll部落格文章頁面截圖

5. 如果新增文章,只你要在 zolan/_posts/資料夾下,新增一樣的檔案,則,就會跑出一篇新的文章。

補充資料

我的習慣會在 hackmd 將想法打完,在複製到該資料夾,發佈

相關檔案及資料夾介紹

zolan/_posts/ => 文章放置目錄
zolan/images => 圖片路徑
zolan/_data/settings.yml => 可以設置標圖及內容
zolan/_config.yml => 網站設置,可調整分頁大小
zolan/_layouts/ => 如果懂一些 html 可以調整板型

先前文章,在容器中架設JeKyll 連結

分類及標籤的部份 github page 基於安全性考量不支持, jekyll-tagging 套件,因此你得自己刻 連結

如果想優化Jekyll SEO ,可以透過下面兩個套件達成

jekyll-sitemap
jekyll-seo-tag

先前文章,在容器中架設JeKyll 連結

作者

Mark Ku

擁有 10+ 年經驗的資深軟體工程師,現為 AI 應用 Builder,專注於大型平台架構與簡化複雜系統設計,從電商系統到訂閱與收費平台,結合 AI Agent、AI 整合與自動化開發,打造高效率且可持續演進的產品技術基礎。閱讀更多

覺得這篇有幫助?

作者做的免費工具、每日 Podcast 與電子報,都在這裡。

Mark Ku · 本文採用 CC BY 4.0 授權,轉載請註明作者並附上原文連結。

留言

訂閱電子報

訂閱後即時收到新文章通知,不錯過任何技術分享。

提交即表示同意接收電子報,隨時可

熱門文章

View all
Mark Ku
··603

Oracle Cloud 永久免費方案 Linux 主機及固定 IP :0 元打造雲端解決方案

Oracle Cloud 永久免費方案 Linux 主機及固定 IP :0 元打造雲端解決方案
Mark Ku
··440

告別 Postman 收費陷阱!開源 Git 原生 API 測試神器 Bruno 實戰指南

告別 Postman 收費陷阱!開源 Git 原生 API 測試神器 Bruno 實戰指南
Mark Ku
··323

一款免費開源類似於 Notion 類知識庫系統 — Outline Wiki 佈署與備份全攻略

一款免費開源類似於 Notion 類知識庫系統 — Outline Wiki 佈署與備份全攻略
Mark Ku
··239

打造高效 API 管理平台:從 0 開始部署 Kong Gateway - Part 1

打造高效 API 管理平台:從 0 開始部署 Kong Gateway - Part 1
Mark Ku
··222

在 Ubuntu 上設置 Samba 來共享資料夾,讓 Windows 11 用戶可以存取

在 Ubuntu 上設置 Samba 來共享資料夾,讓 Windows 11 用戶可以存取
Mark Ku
··199

訓練自己的 AI 語音:硬體門檻、開源模型比較與 LoRA 微調

訓練自己的 AI 語音:硬體門檻、開源模型比較與 LoRA 微調