我用来搭建网站的工具
时不时就会有刚入行做网页开发的人给我发邮件，大致会这样问：“你是怎么搭建 benhoyt.com 这个网站的？你用内容管理系统吗？用的是什么主题？”
我通常会简要回复，说自己喜欢保持简单：用文本编辑器写 Markdown 文件，在本地用 Jekyll 静态网站生成器测试，然后用 Git 工具推送到 GitHub Pages 上线。我没有用什么花哨的“主题”，只是一个自己用几十行 HTML 和 CSS 搭的简单布局。
如果你感兴趣，下面是更详细的介绍。以后再有人问，我就直接把这篇文章发给他！
免费托管（GitHub Pages）
我使用 GitHub Pages，这是 GitHub 提供的免费网站托管服务。你只需创建一个 GitHub 仓库，启用 GitHub Pages，几分钟后就能拥有一个可正常访问的网站。查看我网站的代码仓库。
它支持绑定自定义域名（我的就是 benhoyt.com），而且还免费提供 TLS 加密（所以 https 链接可以直接使用）。
GitHub Pages 使用 Jekyll 静态网站生成器，从源文件生成 HTML 网页，源文件通常用 Markdown 编写——后面会详细介绍。它自带了几个预置的布局或“主题”，你也可以使用网上数百个免费的 Jekyll 主题之一，或者自己做一个。
GitHub Pages 既可以用来托管开源项目的网站，也可以用来托管与你 GitHub 用户名绑定的个人网站。网站的源代码仓库必须设为公开，但我觉得这不是问题，因为最终生成的网站本来就是公开访问的。
我非常推荐 GitHub Pages：免费，而且开箱即用。即使你不是程序员，只要“比较懂电脑”，我觉得用起来也不会有困难——你可以直接用预置主题，还可以用 GitHub 的在线文本编辑器，这样就不用去学 Git 了。
GitHub 提供了免费托管，我就用这种方式宣传一下他们的产品来表示感谢！:-)
静态网站生成（Jekyll）
我是 “小网络”理念的拥护者：网页加载快、文件体积小，运行在相对简单的技术之上。静态网站生成正好符合这一理念：每当你更新网站时，一个工具（即“静态网站生成器”）就会把源文件转换成可直接提供访问的 HTML 网页。
生成的页面可以由任何静态文件服务器来提供。即使是一台很小的云虚拟机，每秒也能提供数百个静态文件——足以让你的网站在遭遇“拥抱至死”的流量高峰时依然保持在线，比如登上 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 内联在每个页面的 <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（Sublime Merge）
准备发布文章时，我会切换到图形化的 Git 工具 Sublime Merge 来提交并推送（即保存并发布）修改。GitHub Pages 会在一两分钟内让它在网上生效。
这是用 Sublime Merge 提交本文草稿时的截图：
要做修改时，我只需回到文本编辑器中改好，然后在 Sublime Merge 中查看差异，确认无误后再提交并推送。
同样，虽然我喜欢 Sublime Merge——它速度快，差异对比界面也很棒——但你也完全可以用命令行 git 工具或其他免费的图形化 Git 客户端来完成同样的工作。或者，如果你直接在 GitHub.com 上在线编辑文件，Git 的相关操作都会由它自动处理。
总结
如今创建和托管一个网站并不难——除了域名每年大约 10 美元的费用外，几乎不需要任何成本。
对于开发者，我非常推荐我现在用的这套方案：GitHub Pages 加 Jekyll，再配上一个简洁朴实的布局，不会让读者去下载一大堆 JavaScript。让网页保持小巧、快速吧！
评论
登录后参与讨论