我用來架設網站的工具
每隔一段時間，就會收到剛入門網頁開發的人寄來的信，問題大多是這樣的：「你是用什麼來做 benhoyt.com 這個網站的？你有用內容管理系統嗎？你用的是哪一套佈景主題？」
我通常會簡單回覆，說我喜歡保持簡單：我用文字編輯器寫 Markdown 檔案，用 Jekyll 這個靜態網站產生器在本機測試，然後用 Git 工具推送到 GitHub Pages 上線。我沒有使用什麼華麗的「佈景主題」，只是用幾十行 HTML 和 CSS 自己做了一個簡單的版面。
如果你有興趣，下面有更詳細的說明。下次再有人問，我就直接請他來看這篇文章！
免費主機（GitHub Pages）
我使用 GitHub Pages，也就是 GitHub 提供的免費網站代管服務。只要建立一個 GitHub 儲存庫，啟用 GitHub Pages，幾分鐘後就會有一個完整可運作的網站。看看我的網站原始碼儲存庫。
它可以搭配自訂網域名稱使用（我的是 benhoyt.com），而且還提供免費的 TLS 加密（所以 https 網址也能正常運作）。
GitHub Pages 會使用 Jekyll 這個靜態網站產生器，將你的原始檔（通常是用 Markdown 撰寫）轉換成 HTML 網頁——下面會再多做說明。它內建了幾種現成的版面或「佈景主題」，但你也可以使用網路上數百種免費的 Jekyll 佈景主題，或是自己做一套。
GitHub Pages 可以用來代管開源專案的網站，也可以用來代管與你 GitHub 帳號綁定的個人網站。網站的原始碼儲存庫必須設為公開，不過我不覺得這是什麼問題，因為產出的網站本來就是公開的。
我非常推薦 GitHub Pages：免費又穩定好用。即使你不是程式設計師，只要算是「懂電腦」的人，應該也能輕鬆上手——你可以使用內建的佈景主題，也可以用 GitHub 的線上文字編輯器，這樣就不需要去學 Git。
GitHub 提供了免費代管，我就用幫他們宣傳產品來表達感謝！:-)
靜態網站產生（Jekyll）
我是 「小而美的網路」 的支持者：網頁載入快速、檔案小巧，背後使用的技術也相對簡單。靜態網站產生就非常符合這個理念：每當你更新網站時，工具（也就是「靜態網站產生器」）就會把你的原始檔轉換成可直接提供瀏覽的 HTML 網頁。
產出的網頁可以由任何靜態檔案伺服器來提供。即使是很小的雲端虛擬機器，每秒也能提供數百個靜態檔案——就算遇到「爆紅式當機」（hug of death），例如文章上了 Hacker News 首頁，也足以讓網站保持正常運作。
如前面所說，GitHub Pages 搭配的靜態網站產生器叫做 Jekyll。Jekyll 的內容檔案通常是用 Markdown 撰寫，開頭會有一小段 YAML 標頭，用來提供版面、標題、網址等中繼資料。舉例來說，以下是本文原始碼最前面的幾行：
---
layout: default
title: "The tools I use to build my website"
permalink: /writings/tools-i-use-to-build-my-website/
description: "The tools I use to build my website: GitHub Pages ..."
---
<h1>{{ page.title }}</h1>
<p class="subtitle">August 2022</p>
Every so often I get an email from someone starting out in web
development who asks something along these lines: "What do you use to
create your website, `benhoyt.com`? Do you use a Content Management
System? What theme do you use?"
...你當然也可以完全手寫 HTML 來做一個簡單的網站，並放在 GitHub Pages 上代管。不過，使用 Jekyll（或其他靜態網站產生器）可以讓你在所有頁面套用相同的 HTML 版面，還能用程式化的方式處理其他事情，例如自動產生一個列出所有部落格文章的索引頁。
簡單的自訂版面（HTML 與 CSS）
我喜歡保持極簡，也喜歡搞懂東西是怎麼運作的，所以我用基本的 HTML 和 CSS 自己做了一個簡單的自訂版面。
在上面的程式碼片段中，可以看到第一行是 layout: default。Jekyll 允許你擁有多種版面，但許多簡單的網站——包括我的——就只有一種，在這個例子中就叫做「default」。
我的 HTML 範本和它的 CSS 樣式放在 _layouts/default.html 這個檔案裡，為了方便呈現，這裡稍微簡化過，看起來像這樣：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
{% if page.description %}
<meta name="description" content="{{ page.description | escape }}">
{% else %}
<meta name="description" content="Ben Hoyt is an experienced software engineer at Canonical. He and his wife and three daughters live in Christchurch, New Zealand.">
<meta name="keywords" content="Ben Hoyt, Benjamin Hoyt, Ben, Hoyt, software, engineer, Canonical, Compass, Jetsetter, Oyster.com, TripAdvisor, Brush Technology, Ben Hoyt's CV, Ben Hoyt's resume">
{% endif %}
<meta name="author" content="Ben Hoyt">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<style type="text/css">
body { background: white; color: #301800; font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; font-size: 17px; line-height: 1.6; word-spacing: 0.1em; margin: 0 auto; max-width: 1000px; }
#menu { margin: 0 auto; width: 92.5%; height: 5.5em; border-bottom: 1px solid #d0c8c0; }
#content { margin: 2em auto; width: 92.5%; max-width: 700px; }
@media (max-width: 750px) {
body { font-size: 15px; }
#menu ul.links { font-size: 75%; }
}
@media (max-width: 615px) {
body { font-size: 13px; }
#menu { height: 7.5em; }
#menu .site-title { float: none; }
#menu ul.links { float: none; margin: -0.5em 0 0 -0.8em; }
h1 { margin-top: 0.5em 0; }
}
/* ... other CSS rules ... */
</style>
</head>
<body>
<div id="container">
<div id="menu">
<div class="site-title"><a href="/">Ben Hoyt</a></div>
<ul class="links no-print">
<li>{% if page.url == '/' %}<b>Home</b>{% else %}<a href="/" title="Go to the home page">Home</a>{% endif %}</li>
<li>{% if page.url == '/cv/' %}<b>Resume/CV</b>{% else %}<a href="/cv/" title="Go to my Resume/CV">Resume/CV</a>{% endif %}</li>
<li>{% if page.url == '/projects/' %}<b>Projects</b>{% else %}<a href="/projects/" title="Projects I've authored">Projects</a>{% endif %}</li>
<li>{% if page.url == '/writings/' %}<b>Tech Writing</b>{% else %}<a href="/writings/" title="Stuff I've written">Tech Writing</a>{% endif %}</li>
<li>{% if page.url == '/writings/non-tech/' %}<b>Non-Tech</b>{% else %}<a href="/writings/non-tech/" title="Stuff I've written">Non-Tech</a>{% endif %}</li>
<li><a href="mailto:[email protected]" title="Email me">Email</a></li>
</ul>
<ul class="links print-only">
<li><a href="https://benhoyt.com/">benhoyt.com</a>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div id="content">
{{ content }}
</div>
</div>
<script data-goatcounter="https://benhoyt.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
</body>
</html>這不是 HTML 或 CSS 教學，所以我不會詳細說明它的運作原理。這是一個相當簡單的響應式版面，在手機和大螢幕上看起來都不錯（可參考上面的 @media 查詢）。在大螢幕上，文字區塊的最大寬度是 700px，這樣每一行的長度才不會太長、影響閱讀。
我的範本是把 CSS 直接以 inline 的方式放在每個頁面的 <style> 區塊裡。因為我的 CSS 檔案很小，而且多數訪客一次只會看一兩個頁面，把它直接內嵌在每個頁面裡、省去第二次 HTTP 請求，反而更快。
我大約在 2018 年更新為目前的版面。在那之前，網站有側邊欄，看起來比較老派，就像這張舊版首頁的截圖：
基本數據分析（GoatCounter）
我使用 GoatCounter 來做數據分析：基本上它會告訴我哪些頁面最受歡迎，當我的某篇文章上了 Hacker News 或 Reddit 時，看看數據還滿有趣的。
這是它今天的樣子（我的「count words」效能比較幾天前被貼到 Hacker News 上，所以在預設檢視中數據有點被拉高了）：
GoatCounter 設定起來非常簡單：只要建立一個帳號，然後加入上面顯示的一行 <script> 標籤就行了。代管版對於「合理範圍內」的個人使用是免費的，如果你需要，也可以付費使用或自行架設。
我以前用的是 Google Analytics，後來在 2019 年換成了 GoAccess 這個日誌分析工具，但在 2021 年又改用 GoatCounter——它更好用、也更容易管理。
新增與編輯內容（Sublime Text）
要在網站上新增文章或更新既有內容，我只要打開 Sublime Text——我的文字編輯器——開始寫就行了。
新增文章時，我通常會複製一個現有的文章檔案、把內文刪掉，這樣就能確保 YAML 標頭的格式正確。我也會使用 Sublime 的無干擾模式，這樣眼前就只會有一個乾淨的深色畫面和文字：沒有介面、沒有圖示，只有我正在編輯的 Markdown 文字。
撰寫時，我會在終端機裡執行 jekyll serve，這樣就能在瀏覽器中開啟 http://localhost:4000，在發布前先預覽文章實際呈現的樣子。
我很喜歡 Sublime Text，不過它不是免費的，其實用 Notepad++、VS Code 或 Vim 等眾多免費文字編輯器也一樣方便。Markdown 本來就沒什麼花俏的東西：你甚至可以用記事本，或直接在 GitHub.com 上線上編輯檔案。
檢視變更並推送至 GitHub（Sublime Merge）
準備好要發布文章時，我會切換到我的圖形化 Git 工具 Sublime Merge，來提交並推送（也就是儲存並發布）變更。GitHub Pages 會在一兩分鐘內讓它在網路上正式上線。
以下是用 Sublime Merge 提交本文草稿時的截圖：
要修改內容時，我只要回到文字編輯器進行編輯，然後在 Sublime Merge 中檢視差異，確認後再提交並推送變更。
同樣地，雖然我喜歡 Sublime Merge——它速度快，差異比對介面也很棒——但你也可以輕鬆改用命令列的 git 工具或其他免費的圖形化 Git 客戶端來完成同樣的工作。或者，如果你是在 GitHub.com 上線上編輯檔案，它也會幫你處理好所有 Git 相關的操作。
總結
現在要建立並代管一個網站並不難，而且——除了每年約 10 美元的網域費用外——幾乎不需要任何花費。
對於開發者，我非常推薦我現在使用的這套組合：GitHub Pages 加上 Jekyll，再搭配一個務實、不會讓讀者下載一堆 JavaScript 的版面。讓我們一起保持網頁小巧而快速吧！
留言
登入後參與討論