用 VPS、Nginx 和手写网页文件做静态网站

  1. 前言
  2. 我的步骤
  3. 买 VPS
  4. 买域名
  5. 更新域名 DNS A 记录
  6. 配置与登陆 VPS
  7. 安装与配置 Nginx
  8. 数字证书（或 SSL 证书）
  9. 用 OpenSSL 生成私钥和 CSR
  10. 配置 Nginx 使用 HTTPS
  11. 写网页文件
  12. 用 Rsync 上传网页文件到 VPS
  13. 结语

我想做一个自己的网站拖拖拉拉很多年了，一直理不清头绪。最近在网上看了很多相关的内容之后终于做出来了这个网站。我很少见到把从无到有的过程写清楚的文章，所以我把我的过程记在这里。如果你愿意告诉我出错的或者能优化的地方，我会不胜感激，请多指教。

有些名词或者概念有不一样的称呼，我会在第一次提到它的时候把最常见称呼的字加粗强调。如果你跟我开始时一样想做一个自己的网站却没有头绪的话，这篇文章肯定不能解答你所有的疑惑，你可能要在谷歌上搜索中文英文的相关内容。请相信所有的问题都能解决，你需要学习相关的概念和方法，搞清楚之后再做决定，有时候你需要提出一个更精准的问题。你可能会花几天几星期学习新知识新方法，你会觉得摸不着头脑不知道该怎么选，但大概很多事都是这样不容易吧。我学的过程主要是靠谷歌、Linkedin Learning 网课、Digital Ocean Community、YouTube、Stack Overflow 和维基百科。你也可以发邮件告诉我你遇到的问题。不过我可能要花一段时间回复，因为我可能也要疯狂使用搜索引擎。

如果你的网站是用来提供重要服务的，比如销售，请你还是选择可靠的建立网站的服务，因为自己建立网站不能保证稳定安全。

这篇文章里是我的步骤，我看过的内容和一些我想告诉你的东西。抱歉我会很少解释概念或者名词，因为我肯定不能解释所有你不知道的概念，我不知道你不知道什么，而且我自己的了解也可能会有错。我相信你自己去搜索去了解是更好的学习方法。

这个网站是怎么运作的？

在你的电脑或者移动设备上打开浏览器，在地址栏里输入并提交 shon.li 你就来到了我的网站。或者技术上说，你就看到了我布置好的网页。没错，就像你以往在你的手机上打开一个照片看一样，你用浏览器下载并打开了我的网页文件看，这篇文章这些字都只是文件。我把我的网页文件放到能分享文件的地方，然后设置相关的软件硬件让你的浏览器到那个地方打开那些文件显示给你看。

总的来说我做的事情是弄一些网页文件，放到可以分享文件给别人的电脑里。我给那台电脑设置了用来访问的地址名，配置那台电脑让它在你打开的时候接收和传输我的网页文件给你的浏览器。几乎任何人都能做一个网站，这是我想像里互联网美好的地方。当然也会遇到诈骗之类的坏事，所以浏览网页的时候请注意自己在提供什么信息给对方，并核查对方的身份。

我的步骤

  1. 购买 VPS（Virtual Private Server，虚拟专用服务器）；
  2. 购买域名（网域名称，Domain Name）；
  3. 【可跳过】购买数字证书（Digital Certificate，或者叫 SSL 证书，SSL Certificate，也叫做 Public Key Certificate）；
  4. 更改域名设置，增加 DNS A 记录到 VPS 的公共 IP 地址；
  5. 配置 VPS 的操作系统，安装 Nginx 软件（它是一个网页服务器，Nginx 的读音同 “Engine X”）；
  6. 【可跳过】在自己的电脑上用 OpenSSL 生成一个私钥（Private Key），再用私钥生成 CSR（Certificate Signing Request，证书签发请求）。提交 CSR 给证书提供商，认证身份之后下载证书文件。把收到的证书合并成一个证书文件，然后把它和私钥一起上传到 VPS；
  7. 配置 Nginx 服务器使用 HTTPS 协议，把原有的 HTTP 连接转向到 HTTPS；
  8. 在自己电脑上写 HTML 文件并调试更改 CSS。更新本地网页文章文件，上传到 VPS。

我花的钱

共 99.42 美元
49.99 美元Bandwagon 搬瓦工 VPS 一年
6.54 美元internet.bs .li 域名一年
8.4 美元internet.bs Sectigo 标准 SSL 证书一年
34.49 美元LinkedIn Learning Premium 网课一个月订阅

这是 2020 年 3 月末的价格，我选的都是尽量省钱的办法，你找到的价格可能跟我的不一样。因为美元结算实际购买的时候需要按照银行汇率转换，汇率会变动，所以请你自己找汇率转换。搬瓦工和 internet.bs 都能用支付宝，但支付宝上的购买记录能被当局查到。

我买证书的时候不确定能用免费的证书，买了证书之后我也想学习自己在 VPS 上配置证书所以没有用免费证书。但是后来发现用 Let's Encrypt 提供的免费的证书已经足够，这样还能省下买证书的钱。

买 VPS

做网站需要的是服务器空间，VPS 只是一种选择。我选择 VPS 是因为我用 VPS 做代理服务器对它熟悉一些，它的价格对我来说也可以接受。免费的 Github Page 就是一个制作静态网站的好选择。注册 Github 创建你的 Github Page 专用 Repository，然后用静态网站生成器生成你的网站文件，之后你能用 GIT 上传到你的 Repository。你也能修改设置绑定自己的域名，你能做出跟我一样效果的网站。

你也可以选择制作网站的托管服务提供商比如 Wix、Squarespace、Bluehost、WordPress.com、Ghost.org、等等。与 VPS 不同，托管服务提供商帮你做了很多事，你可以像使用社交网站一样编辑发布内容。因为我想了解更深层的技术知识，所以我没有选他们。如果你不想了解配置 VPS、网页服务器、内容管理系统（CMS，Content Management System）这些东西，那些服务会更适合你。

请不要选择中国大陆的阿里云腾讯云之类的平台，因为在中国大陆开设网站会被审查，所有的网站都要有备案和备案编号。我从秋水逸冰的博客里了解到申请这些备案是个复杂折磨的过程。

摘录自秋水逸冰的文章“为什么要选择美国 VPS”

我为什么要使用跨越整个太平洋的美国的 VPS？谁都知道隔了那么远，网速肯定会受到影响。最最主要的原因还是因为，国内的需要备案才能用域名访问网站。这项备案制度起源于政府对互联网言论的管制需要，进而演变成一项专门的生意。国内任何一家 IDC 都不敢提供没备案就让你上线的服务，就连臭名昭著的电信通也不例外。如果不备案的话，只能通过 IP 访问，有的甚至就直接不给开 80 端口。

要知道，现在个人博客类的网站备案非常困难了，很多都要企业才能备案，甚至还会无厘头要求网站去掉“博客”两个字才允许备案。全国各个省份的通信管理局的要求五花八门，有些不让个人备案，必须要企业才能备案，有些要你必须关站才能备案，而且一审核就是个把月，期间都不能开站，还不一定能审核过，但是如果你肯花钱的话，最多一个星期就会搞定。

当然以上这些还不足以让人愤慨。最让人难堪的是，备案会要求本人亲自到场，站在指定的幕布下拍照，有的还会要求你举着身份证对着镜头拍照，像个傻逼一样被人摆弄来摆弄去。如果你看过电影或电视，一定会熟悉，只有在公安局里给犯人留底时会那么干。我不就开个个人博客，至于吗？

我知道的 VPS 服务提供商或者用做服务器的平台有：

搬瓦工 Bandwagon
我看到过中国大陆用户推荐搬瓦工，他们提供 50 美元一年的方案，我也喜欢他们提供的针对中国大陆的政策。 这是我看过的搬瓦工不同机房对比的文章：搬瓦工 CN2 GIA、CN2、KVM、香港方案区别对比和怎么选择。看完了之后我从文章的链接里买了 CN2 机房的服务器。
Vultr
大部分人都把它读作 “Vulture”。 Vultr 有 5 美元左右一个月的方案，是短期使用比较方便的选择。Vultr 是我第一个用的 VPS，我用了 Vultr 日本的服务器。
Digital Ocean
Digital Ocean 在 2020 年 3 月的价格和 Vultr 相似，他们的宣传里很多次提到开发者。文章快写完我才发现 Digital Ocean Community 里有非常多优质的教程文章。
谷歌云 Google Cloud Platform
谷歌云的价格高一些，他们更专业，在全球有很多服务器，还有 300 美元免费试用一年的活动。我用谷歌云做代理服务器用了两年，更换银行卡作弊了一年，可耻，惭愧。

想要选出最适合你的 VPS 或者服务器，你还是要多了解你的需求。或者你可以先买一个能用的 VPS 折腾折腾熟悉一下。

买域名

和 VPS 一样，请不要选中国大陆的域名提供商。下面是我在谢益辉的博客里看到的关于中国大陆域名提供商的文字。另外这篇文章也是一个解释很多概念的建立网站的教程，我从里面学到了很多。

摘录自谢益辉的博客“新手教程：建立网站的全套流程与详细解释”

注册域名交完银子之后，域名就是你的了，如果你在国内注册的，你花钱买的域名不一定真的是你的。一定要看你是否有以下权利：

  • 修改注册联系人、管理联系人、技术联系人和付费联系人信息，如果你在后台找不到修改的地方，那么恭喜你，这域名好像不是你的，而是某奸商的，用 WHOIS 查一下域名信息吧；
  • 拿到授权码（Auth Code），国内也有叫域名转移密码的，这个码很重要，如果你不知道或奸商不告诉你，那再次恭喜你，这个域名仍然不是你的，想搬家到别家注册商都搬不了，万一不行遇到这种情况，那么就去 ICANN 投诉奸商，每天投诉三遍，如果某注册商总是遭到投诉，ICANN 会修理它的，总之你一定要知道自己作为消费者有什么权利

域名就像电话号码，大家都想要好记有趣的。像电话号码一样，你也可以携带“号码”更换“运营商”，叫做 Transfer（抱歉没找到对应的汉语翻译）。买到的域名都有使用期限，到期前要续费，叫 Renew。我是在 www.domcomp.com 这个网站上对比各个域名的价格的。对比的时候你可以看到 Renew 和 Transfer 的价格，请注意不同的提供商收费不同，Renew 和 Transfer 可能会更贵。

在购买的时候你需要给域名提供商提供你的个人信息，姓名、邮箱、电话、公司之类的。这些信息会被提交到 WHOIS 数据库里并且能被任何人查到。一些域名服务提供商提供免费的隐私保护方案，这样能避免个人信息泄露。

更新域名 DNS A 记录

在 VPS 提供商的网站登录账户找到 VPS 管理页面，里面会显示 VPS 的公共 IP 地址。再去域名提供商网站登录账户找到修改域名设置的页面。下面的图片是我添加 A 记录时的界面。

这是增加 DNS A 记录界面的图片

我的 TTL 默认值是 3600，我一开始没有在意它的意义，写这行字的时候搜索了一下才知道大概是 DNS 服务器缓存条目的时间，数字的单位是秒，3600 是一个小时。在看完这篇英文博客文章之后，我听从建议把我的 TTL 修改成了 24 小时，因为我几乎不用修改我的 A 记录。

提交完之后不会立刻生效，因为域名提供商要把这条记录分发到所选地区的 DNS 服务器，应该是 24 小时左右之后生效。

你还可以使用内容传递网络（CDN，Content Delivery Network）服务比如 Cloudflare，来增加安全性并且提升网站访问速度和稳定性。

配置与登陆 VPS

在 VPS 提供商的控制页面里你可以选择 VPS 的操作系统，服务器使用的系统通常是只有命令行用户界面的 Linux 操作系统。你的选择取决于 VPS 提供商给你的选项，常见的操作系统是 Ubuntu、CentOS、Debian。这三个系统和 Nginx 软件都是开放源代码并且免费使用的，几乎这篇文章里提到的所有软件都是开源免费的，感谢这些开发者们做出的选择。

为了安装软件和修改配置，你需要找到控制你 VPS 的命令行界面，或者在自己的电脑上使用 SSH 连接到你的 VPS。在提供商的网站里你可能能找到相关的帮助文章，下面是搬瓦工中文网讲解如何登录搬瓦工 SSH 的文章，和讲解如何找到 SSH 端口密码的文章网页链接。
搬瓦工 VPS/Bandwagonhost 基础教程 – 新手拿到 VPS 后如何登录 SSH
搬瓦工 VPS 购买后查看 IP 地址、获取 SSH 端口和密码的方法

提醒你一下第一次使用 SSH 命令 ssh 用户名@服务器IP地址 登陆 VPS 的时候你会在命令行里看到类似下面的字。内容大概是没见过这个 IP 地址，确定要继续吗？输入 yes 之后按下 Enter 键就好了。

The authenticity of host '203.0.113.1 (203.0.113.1)' can't be established.
ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
Are you sure you want to continue connecting (yes/no)? yes

在命令行里大多数输入密码的时候你看不到你输入的字符，但你的输入都是正常有效的，这样的设置是为了安全。很多 VPS 是用 root 用户登录，默认的密码复杂难记，你可能会想要改密码。登录系统之后在命令行里输入 passwd 按下 Enter 键按照提示输入当前密码输入两次新密码确认就好了。

创建新用户与配置防火墙

root 用户几乎是 Linux 系统里拥有最广泛权限的用户，日常使用难免出错造成不想要的后果。因此你最好新建一个可以获得管理员权限的普通用户。为了避免破坏者作祟，最好在 VPS 上安装一个防火墙软件只允许特定的软件与外部通讯。下面的链接是我看过的 Ubuntu 18.04 初始服务器设置的英文教程文章，页面里也提供了其他系统的教程。链接下面是我摘出的笔记。
Initial Server Setup with Ubuntu 18.04 – Justin Ellingwood

创建新用户

先用 root 用户登录：

ssh -p 端口号 root@VPS_IP地址

上面命令里的 -p 端口号 如果你不知道一般就是用了默认 22 端口，你可以省略这几个字。请把 VPS_IP地址 换成你的 VPS IP 地址。

添加新用户：

adduser 新用户的用户名

用户名请用英文字母。你需要跟着提示输入与重复输入确认你的用户密码，其他的条目不想填写可以按 Enter 键留空。最后一个问题是确认信息是否正确，按下 Enter 键即可确认，其实是选取了默认值 [Y/n] 里的大写 Y。

用下面的命令把你的用户添加到 sudo 用户群组里，这样你的用户可以在命令前添加 sudo 执行需要管理员权限的命令。执行完之后在命令行里看不到任何提示，那是正常的。

usermod -aG sudo 刚设定的新用户用户名

配置防火墙

Ubuntu 18.04 系统里预装了 UFW 防火墙，用下面的命令配置和启用它就好。请在以后安装了需要连接到外部网络的应用之后把相应的应用在防火墙里设置成“允许”，比如你 SSH 登陆用的 OpenSSH 以及登陆用的端口号，和等等我们要安装的 Nginx 网页服务器。
下面是一篇 UFW 基础英文教程，你甚至可以用它屏蔽某个 IP 连接你的 VPS。
UFW Essentials: Common Firewall Rules and Commands – Mitchell Anicas

大部分应用在安装完后都会把资料提交给防火墙，所以你配置的时候能直接看到包含应用名字的条目。用下面的命令能查看 UFW 防火墙可以配置的应用列表。

sudo ufw app list

允许某个列表里的应用通过防火墙只需要执行下面的命令：

sudo ufw allow 应用的名字

为了你能用 SSH 登陆，请先给 OpenSSH 设置允许。并且给你登录 VPS 使用的端口设置允许，如果你不知道端口号的话，默认是 22。

sudo ufw allow 22

现在我们配置好了允许通过防火墙的规则，还没有启用防火墙，下面是启用的命令。看到提示后输入 y 按 Enter 键继续。请注意，如果你没有允许 OpenSSH 和你登录用的端口号的话，启用防火墙之后你会不能用 SSH 登陆 VPS。

sudo ufw enable

用下面这条命令可以查看 UFW 防火墙当前的运行状态，你可以看到当前允许了什么应用。

sudo ufw status

想要删除某条允许条目，或者停用 UFW，对应的命令是这些：

sudo ufw delete allow 应用的名字 #删除允许某个应用
sudo ufw disable #停用 UFW

设置 SSH 密钥登陆

因为密码容易被暴力破解，为了安全，你可以配置使用 SSH 密钥（SSH Keys）登录到你的 VPS。你需要在你电脑上生成私钥和公钥，然后把公钥传到服务器，之后你可以设置登录 VPS 时不使用密码登陆，只使用密钥验证登录。这样就只有有密钥的人才能登陆上你的 VPS，暴力破解密钥的难度比密码大多了。下面是一篇英文教程文章和一篇中文教程的引用。中文教程里没有说明需要设置密钥密码，但是密钥密码也是很有必要的，如果你的密钥被盗取或者有人盗用你的电脑，没有密码的密钥就不安全。
How to Set Up SSH Keys on Ubuntu 18.04 – Hanif Jetha，Digital Ocean Community

以下内容引用自 P3TERX ZONE“给 VPS 配置 SSH 密钥免密登录”，有少量修改。

生成 SSH 密钥对

生成密钥可以在远端 VPS 上，也可以在本地命令行上进行操作，方法都是类似的。
输入命令 ssh-keygen，然后按 4 次 En­ter 键就行了。你可以在按完两次 Enter 键后按照提示输入授权使用密钥的密码。

在命令行里输入 ssh-keygen 命令，按 Enter 键，你会看到类似下面的文字。

Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa):   #保存位置，默认就行，按 Enter 键
Enter passphrase (empty for no passphrase):   #输入密钥密码，按 Enter 键。填写后每次都会要求输入密码，留空则实现无密码登录
Enter same passphrase again:   #再次输入密钥密码，按 Enter 键
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:GYT9YqBV4gDIgzTYEWFs3oGZjp8FWXArBObfhPlPzIk root@p3ter
The key's randomart image is:
+---[RSA 2048]----+
|*OO%+ .+o        |
|*=@.+++o.        |
| *o=.=....       |
|. +.B + +o.      |
| . + E *S.       |
|  o   o          |
|       .         |
|                 |
|                 |
+----[SHA256]-----+

现在，当前用户的根目录中有了一个名为 .ssh 的隐藏目录，内含两个密钥文件。id_rsa 为私钥，id_rsa.pub 为公钥。

安装公钥

如果生成密钥的操作是在当前要添加的 VPS 上进行的，注意保存私钥 id_rsa 文件到本地，然后输入以下命令安装公钥：

cd .ssh/ #切换当前工作目录到生成了密钥的 .ssh/ 文件夹
cat id_rsa.pub >> authorized_keys #将公钥写入到 authorized_keys 文件

如果生成密钥的操作是在本地电脑上进行的，那么输入以下命令将公钥上传到 VPS：

ssh-copy-id user@remote -p port

user 替换成你的用户名，remote 替换成 VPS 的 IP 地址，port 换成端口号。

把公钥上传到 VPS 或者配置好后你就可以使用对应的私钥登陆了。用私钥的目的是为了取代密码登陆，这样才安全。接下来你需要禁用密码登陆，在开始操作之前，不要关掉当前与 VPS 的连接命令行，开启一个新命令行窗口或标签页再去连接你的 VPS 测试一下，如果你可以不输入密码直接登录，那就证明你的密钥配置成功了，如果不成功，你就再看一遍是不是自己漏掉或者弄错了什么，或者再去搜索一篇相关的文章。我只提及了用 ssh-copy-id 传输公钥到 VPS，两篇教程里都有更多的方法，包括手动安装。

在禁用掉密码登陆前请确认你登陆 VPS 的用户是 root 用户或者你的用户能使用 sudo 获取管理权限。因为如果你以后不能更改这个设置的话，更换密钥或者其他操作都不能进行，你可能会不得不重装 VPS 系统一切重来。

请再次注意在这操作之后只有有对应私钥的电脑和用户才能访问 VPS，如果你的私钥丢失，你会不能登陆 VPS。你要做的事很简单，修改后保存 SSH 的登陆配置文件，在 VPS 上重启 SSH 服务就完成了。下面是逐条命令：

用 nano 文本编辑器（或者其他你喜欢的编辑器）编辑 SSH 配置文件：

sudo nano /etc/ssh/sshd_config

如果你是第一次使用 nano 文本编辑器，你可以在命令行界面底部看到你可以使用的快捷键提示，如果你不知道是哪个键或者怎样按，请去搜索。
我常用的快捷键是 Ctrl + O 保存（写入到）文件； Ctrl + X 退出 nano 编辑器。

找到文件里下面的这一行字， PasswordAuthentication。（你可以搜索一下怎样用你的文本编辑器查找文字）把这行字前面的注释符号井号 # 删掉，然后在后面写上 no。大概会像下面这样：

# To disable tunneled clear text passwords, change to no here!
PasswordAuthentication no

之后保存并退出文本编辑器。用下面的命令重启 SSH。

sudo systemctl restart ssh

现在你就不能用 SSH 密码登陆了。在关掉这个命令行界面之前，请再去开一个新的命令行窗口或标签去登陆测试，如果你发现即使你输对了你设置的私钥密码也不能登陆，请回到刚才的窗口把刚改了 no 的那一行字前面加上井号 # 保存回去，再重启 SSH 服务。然后再慢慢去了解你究竟做错了什么。如果你顺利登陆进去了，那么恭喜你，你以后都可以更安全地登陆你的 VPS 了。请注意保存好你的私钥，它是存放在你系统用户文件夹里面，.ssh 隐藏文件夹里的 id_rsa 文件。以后如果用别的电脑登陆，必须配置好了它才能用 SSH 登陆你的 VPS。抱歉我不知道 Windows 系统用户的文件夹位置，不过在 Windows 10 里已经可以直接用 SSH，请你搜索吧。

选择 Nginx 的原因

我听说过的除 Nginx 之外的网页服务器软件有 Apache 和 Caddy。简单了解之后我知道了 Nginx 驱动的静态网站速度更快，而且它逐渐变得受欢迎，所以我选了它。

我试用过 WordPress 和 Ghost，它们是制作博客网站的好工具，WordPress 现在变得万能了。在服务器上安装好它们之后登入后台管理页面就可以发布文章了，很方便。如果你想用 WordPress、Ghost 之类的内容管理系统，你去找你的服务器系统对应的安装教程就好了。但是我在安装完它们之后看到我的博客时，我发现我不知道想写什么。我倒是想很坦诚地写下这篇记录过程的文章，因为我学的过程里在网上搜来搜去有时觉得很灰心，我想让你在学的过程里感觉不那么孤单。虽然我不能让你只看我这篇文章就做好一个网站，但我想让你觉得没那么难。

另外 WordPress 和 Ghost 因为有后台登录页面，你的网站有被破坏者破解后台登录的风险。WordPress 和 Ghost 也都依赖数据库软件和 PHP， 而我用不到这些因为我不懂也还不想做动态网站。在自己的电脑上手写网页文件，随时更新调试满意了之后再上传到服务器可以在本地保留备份，以后网站搬家时网页文件就在你的电脑上。

安装与配置 Nginx

Nginx 配备在了 Ubuntu 系统的包管理器 Repository 里，安装只需要用自带包管理器的安装命令。我用 APT 包管理器安装方法举例，其他包管理器或系统请去搜索。下面的链接是一篇很详细的英文教程。
How To Install Nginx on Ubuntu 18.04 – Justin Ellingwood and Kathleen Juel

安装应用前先更新 Repository 是个好习惯，这样可以获取比较新的软件。
下面的命令里井号 # 后面是我写的注释。

sudo apt-get update #更新 Repository
sudo apt-get install nginx -y #开始安装 Nginx

上面的命令里 sudo 是获得管理权限的工具，如果你使用的是 root 用户请省略。apt-get 大概在 Ubuntu 17.4 及以后的版本里可以简写成 apt，-y 能跳过询问是否确认安装的过程。如果你在命令行里觉得失控了，一般你都可以压下 Ctrl 键后按字母 C 键退出当前进程。

Nginx 配置文件目录

在 Ubuntu 系统里 Nginx 相关的目录主要是下面这些。其他系统可能不一样请去搜索。

符号链接的作用是把另一个位置的文件引用过来。你会在 sites-available 和 sites-enabled 都看到一个名为 default 的文件，这是一个 Nginx 开发维护人员为你创建的默认网站配置，打开之后你会看到里面有很多以井号 # 开头的英文注释，注释的内容也很有帮助，再往下看你能找到表示网页服务器配置的字段。

新建服务器配置文件（Server Block）

复制默认配置文件来创建新的你的配置文件，用 nano 或者其他你喜欢的文本编辑器编辑配置文件。

cd /etc/nginx/sites-available/
sudo cp default 你的配置文件名 #请替换“你的配置文件名”，下面都要替换
sudo nano 你的配置文件名

默认的配置文件里有很多注释，你可以试着阅读了解一下。
下面是一个最简单的处理 HTTP（80 端口）访问的服务器配置。

server {
    listen 80;
    listen [::]:80; #监听所有 80 端口访问

    root /var/www/html; #指定网页文件存放的根目录
    index index.html index.htm index.nginx-debian.html; #index（首页）文件的文件名，一般静态网站只写 index.html 就足够了

    server_name example.com www.example.com; #你使用的域名，把 example.com www.example.com 替换成你自己的域名

    location / { #访问域名根目录‘/’时的行为
      try_files $uri $uri/ =404; #查找网址‘/’后半段指定的文件，找不到的话显示 404 错误页面
    }
}

为了让服务器配置生效我们需要在 sites-enabled 目录里删除默认配置文件并创建符号链接，在下面的命令里请用绝对路径以免造成链接混乱。

sudo rm /etc/nginx/sites-enabled/default #删除默认配置文件的符号链接
sudo ln -s /etc/nginx/sites-available/你的配置文件名 /etc/nginx/sites-enabled/你的配置文件名

每次更改过配置文件之后你都需要重新启动 Nginx 才能让新的配置生效。如果你改动了 /etc/nginx/nginx.conf 主配置文件，你可以用 sudo nginx -t 命令来测试你的主配置文件是否有语句错误。

下面的命令能启动 start，重新启动 restart 和重新加载 reload Nginx。重新加载比重新启动更优雅，它会逐渐关闭组件处理完当前连接请求之后重新启动。在修改完设置之后重新加载或重新启动 Nginx，新设置就会生效了。除了使用 systemctl 控制 Nginx 外也有其他的命令可以达到同样的效果，比如 service reload nginx。

sudo systemctl start nginx #启动 Nginx
sudo systemctl restart nginx #重新启动 #Nginx
sudo systemctl reload nginx #重新加载 Nginx
sudo systemctl enable nginx #启用 Nginx
sudo systemctl disable nginx #禁用 Nginx

你还能用 systemctl status nginx 查看 Nginx 运行状态，你会看到类似下面的文字，之后你必须输入字母 q 或者按下 Ctrl + C 退出。如果你看到 active (running) 的字样说明 Nginx 正在运行中。

● nginx.service - A high performance web server and a reverse proxy server
  Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
  Active: active (running) since Fri 2018-04-20 16:08:19 UTC; 3 days ago
    Docs: man:nginx(8)
Main PID: 2369 (nginx)
  Tasks: 2 (limit: 1153)
  CGroup: /system.slice/nginx.service
          ├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;

设置防火墙允许 Nginx

如果你看了上面配置 VPS 防火墙的内容，你现在使用的防火墙应该就是 UFW。抱歉我只会用 UFW 举例，如果你没有安装启用防火墙，你可以跳过这部分的内容。

sudo ufw app list #查看所有可以设置的应用名称

你会看到 Nginx 有下面这三个条目。

Nginx Full #指 HTTP 不加密连接（80 端口）和 HTTPS 加密连接（443 端口）
Nginx HTTP #指 HTTP 不加密连接（80 端口）
Nginx HTTPS #指 HTTPS 加密连接（443 端口）

因为我不想让访问 http://shon.li 的人看不到我的网站，所以我两个端口都允许了，后面我会把 HTTP 连接转向到 HTTPS。我配置防火墙用的是下面的命令，注意一定要写单引号 'Nginx Full'。否则会因为空格而被认为输入了两个名字，提示参数错误。

sudo ufw allow 'Nginx Full'

数字证书（或 SSL 证书）

SSL 证书是一种不准确但已经广为流传的称呼，叫做数字证书更妥当。
SSL 是 Secure Sockets Layer 的缩写，是一种加密通信协议，它现在已经过时，几乎被 TLS（Transport Layer Security）取代。在 VPS 上配置好证书等相关配置可以让你的网站使用 HTTPS 协议连接，它能让访问网站时传输的信息加密，这样能阻止被不怀好意的人偷看或采集信息。在个人隐私和通信安全越发被重视的现代，几乎所有的网站都已经用上了 HTTPS。没有使用 HTTPS 的网站会被浏览器标记“不安全”，所以请你也务必使用 HTTPS。

我在 internet.bs 上买域名的时候一起买了证书，但个人网站用免费的证书也没什么问题。这句话的结尾是 Let's Encrypt 官网的“快速入门”文章链接：letsencrypt.org/zh-cn/getting-started。快速入门里推荐使用 EFF 提供的 Certbot 软件。

以下内容摘录并翻译自 EFF 官方网站 Certbot 的帮助页面：certbot.eff.org。在页面里选择你使用的网页服务器软件和 VPS 系统就能看到对应的操作指导。下面是给 Ubuntu 18.04、Nginx 的安装和使用指导。

添加 Certbot PPA。

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update

安装 Certbot。

sudo apt-get install certbot python-certbot-nginx

获取并安装证书到 Nginx。

sudo certbot --nginx

或者，只获取证书，自己配置 Nginx 安装证书。

sudo certbot certonly --nginx

测试证书自动续期功能。Let's Encrypt 提供的证书一般有效期是三个月，所以 Certbot 会在服务器系统里设置一个自动运行的任务，在证书到期一个月前申请并更换新的证书。

sudo certbot renew --dry-run

完成之后你可以打开自己的网站看看地址栏是不是已经有 https 的字样或者一个小锁的图标了。你也可以去这个网站（www.ssllabs.com/ssltest）测试看看你的网站安全评级和相关建议。

如果你想知道怎么配置购买的数字证书或者手动给 Nginx 安装证书的方法，我的过程在下面。

用 OpenSSL 生成私钥和 CSR

你能找到一些网站提供的在线生成 CSR 工具，但是因为私钥是 TLS 协议对称加密部分的关键，如果泄露就有被破解的风险。所以还是自己生成并且保存好最妥当。

在开始操作之前，你的电脑上要安装好 OpenSSL。苹果 macOS 和大部分 Linux 系统是预装好了的，你也可以用 VPS 的 Linux 系统完成这些操作。请注意把生成出的私钥和 CSR 保存到你电脑里以后能找到的地方，以备不时之需。

我的步骤是先生成私钥，再用私钥生成 CSR。我看到有用一行命令直接生成 CSR 和私钥的文章，但我之前不知道保存私钥，出错了一次之后用那种方法重新申请证书遇到了搞不清楚的问题。再加上我看到的网课里老师教的是先生成私钥的方法，我就先生成私钥了。可以生成的私钥有用 RSA 算法和用 ECDSA 算法两种选择。我见到的教程里都是生成 RSA 私钥，我没去思考该不该选 ECDSA，直接跟从了教程，你有兴趣可以去了解一下。

下面以在 VPS 系统中操作为例，请注意如果不指明导出文件目录的话，这些命令会导出文件到当前工作目录（CWD，Current Working Directory）。如果你不知道自己当前在哪个目录的话可以在命令行输入 pwd 按下 Enter 键查看。使用命令前请先创建好目录，否则会报错找不到目录。下面只是示范，目录名和文件名你可以自己定。

生成到 /cert-file/ 目录里，文件名为 www_server_com.key 的，长度为 2048 的私钥。

sudo openssl genrsa -out /cert-file/www_server_com.key 2048

根据 /cert-file/ 目录里的 www_server_com.key 私钥生成 www_server_com.csr CSR 文件到 /cert-file/ 目录里。

sudo openssl req -new -key /cert-file/www_server_com.key -out /cert-file/www_server_com.csr

在提交完上面生成 CSR 的命令之后，命令行会要求你填写下面这些信息：

摘录自搬瓦工中文网“搬瓦工 VPS 上给网站部署 SSL 证书实现通过 HTTPS 访问的教程”，摘录部分有修改。

You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:CN  // 国家代码，两位英文字母
State or Province Name (full name) []:Shanghai  // 省
Locality Name (eg, city) [Default City]:Shanghai  // 城市
Organization Name (eg, company) [Default Company Ltd]: Bandwagonhost // 组织或公司名，可以输入‘.’替换原有的默认值留空
Organizational Unit Name (eg, section) []:  // 不填
Common Name (eg, your name or your server's hostname) []:Bandwagonhost.net // 你申请证书的域名
Email Address []:[email protected]  // 联系你用的邮箱地址

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:  // 不填
An optional company name []:  // 不填

完成之后私钥 www_server_com.key 和 CSR www_server_com.csr 就生成在 /cert-file/ 目录里了。你可以使用 cat /cert-file/www_server_com.key 命令把文件内容输出到命令行里查看。我在这之后用鼠标选择了这些字复制，然后在我的电脑上新建了一个文件粘贴进去保存了。

输出的文字内容会看起来是乱码，私钥像这样：

-----BEGIN RSA PRIVATE KEY-----
lYfUpWEun6H389UExQbIq5jaurHpxsUWpoY77GtVNUhbn+iYlxqXLL3UzhS5iYsa
J/qTv6PDb9NVWjod*比这一串更大的像乱码一样的内容*8TZwQAQTDcduyOHAqn/Ya
zD6sALLGgUIK0nueH6Cc4J6URrQ4ld79yQIDAQABoD4wGgYJKoZIhvcNAQkHMQ0T
lxtJ2dAeFT3ArIveYwsPLxM2VI4tcREzP16VHpcDOa8MQQ==
-----END RSA PRIVATE KEY-----

CSR 像这样：

-----BEGIN CERTIFICATE REQUEST-----
lYfUpWEun6H389UExQbIq5jaurHpxsUWpoY77GtVNUhbn+iYlxqXLL3UzhS5iYsa
J/qTv6PDb9NVWjod*比这一串更大的像乱码一样的内容*8TZwQAQTDcduyOHAqn/Ya
8ShKIPbmzQ36R15wwlQmwMOqOy+UnIXbUKWyEco4Pq6tI0gI2xC+6NTk3Zc2Iq2k
lxtJ2dAeFT3ArIveYwsPLxM2VI4tcREzP16VHpcDOa8MQQ==
-----END CERTIFICATE REQUEST-----

接下来，你需要去证书提供商申请证书的界面，提交 CSR，然后按照提示验证身份。我买的 internet.bs Sectigo 标准证书验证身份的方式是在域名 DNS 解析里添加带有验证字段的 CNAME 条目。添加的过程是自动的，所以我直接点击验证就通过了。其他的方式常见的有发邮件验证和打电话验证。

验证之后一般下载到的证书会有两个，一个是给你的域名颁发的证书，我拿到的文件名是 shon_li.crt，另一个是证书颁发机构的证书，我的文件名是 CAChain.crt。我用文本编辑器把 CAChain.crt 的内容粘贴到 shon_li.crt 内容的下面之后就得到了可以在 VPS 上使用的证书。

写到这里我真的想感叹一下用 Certbot 真方便，不仅证书免费，还能自动安装自动续租。我只能安慰自己学了这些手动操作的过程有更多的了解。

配置 Nginx 使用 HTTPS

你需要修改的是 /etc/nginx/sites-enabled/ 目录里你的网站配置文件。下面的命令假设你的网站配置文件名是 mysite，你存放私钥和证书文件的目录是 /cert-file/，私钥和证书的文件名分别是 www_server_com.key 和 www_server_com.crt，当然这些名字你都能自己定。

先用 nano 文本编辑器编辑 mysite 网站配置文件。

sudo nano /etc/nginx/sites-enabled/mysite

把配置文件改成像下面这样，之后重新加载或者重启 Nginx。我的配置里没有使用 if 语句来判断而分开设立了两个 server 是因为Nginx 默认配置文件的注释里提到的链接网页里有说明，使用 if 是低效且容易出错的。大概是因为它会让 Nginx 的运算量不必要地增加，所以请你也尽量避免在配置文件里使用 if 语句。

另外为了让网址更简洁好看不包含 .html 和斜杠 /，我搜索到了下面这个教程并且更新了我的配置文件。cobwwweb.com/remove-html-extension-and-trailing-slash-in-nginx-config

#把 80 端口 http 连接全都转向到域名 https 连接
server {
    listen 80;
    listen [::]:80;
    server_name your-vps-ip-address shon.li;
    #请把 your-vps-ip-address 换成你的 VPS IP 地址，把 shon.li 换成你的域名，下面也全都要换
    return 301 https://shon.li$request_uri;
}

#添加证书、私钥、协议等等的字段
server {
    listen 443 ssl;
    listen [::]:443 ssl;
    ssl_certificate		/cert-file/www_server_com.crt;
    ssl_certificate_key	/cert-file/www_server_com.key;
    ssl_session_timeout	1d;
    ssl_session_cache	shared:MozSSL:10m;
    ssl_session_tickets	off;
    ssl_protocols		TLSv1.2 TLSv1.3; #推荐只用更安全的新协议
    ssl_ciphers		ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;" always;
    #增加避免中间人攻击的 HSTS

    server_name your-vps-ip-address shon.li www.shon.li; #把 your-vps-ip-address 换成你的 VPS IP 地址，把 shon.li 换成你的域名

    rewrite ^(/.*)\.html(\?.*)?$ $1$2 permanent; #把网址重定向到没有“.html”后缀的地址
    rewrite ^/(.*)/$ /$1 permanent; #把网址重定向到没有“/”的地址

    root /var/www/mysite/public/; #网页存放文件夹的绝对路径
    index index.html; #index 文件的文件名，静态网站一般是 index.html

    try_files $uri/index.html $uri.html $uri/ $uri =404; #让 Nginx 从不包含“.html 和 /”的网址里查到对应的网页文件
}

写网页文件

我必须坦白地告诉你，按照我原本的计划我是打算用 Hugo 静态网站生成器的。（我这篇文章的稿子里都写好了用 Hugo 的原因。哈哈哈哈，那么后面是没用 Hugo 的原因。）我在看了一些教程花了两个星期之后还是没有掌握使用它的办法。那段时间里我也试了去学 Jekyll，Jekyll 官网的逐步说明教程很好，我做到一半甚至都觉得我要成功了，然而我在生成网站的时候遇到了点错误。在学 Jekyll 的过程里我觉得它跟 Hugo 很相似，这又让我有了我应该用 Hugo 的幻想。所以我就换用了 Hugo 然后终于能理解点官网的说明文档了，之后我又卡住了。我觉得很沮丧，没有耐心了。我只希望我的这篇文章能让跟我一样不知道从哪儿下手的人有一点头绪，我希望它像一个路线图，让你知道要做什么。

我在使用 Hugo 时遇到的问题的主要原因是我想控制页面上的所有东西，我想自己做主题模板，不用别人做好的。因为我是先有对我的网站的设想然后开始学习制作它的，我要做出我想象的页面、内容等等。如果你不介意用别人做好的主题，那么即使你跟我一样没基础，学习用静态网站生成器也没有那么难。

在一个晚上我想到了其实我可以用最原始的办法手写 HTML、CSS。可能这是更适合我的办法，毕竟我的确有很多基础知识不知道，还要慢慢学。另外我也真的很喜欢一点点更改 CSS 的感觉。我想起了我用设计软件做东西的时光，看着我把自己设想的东西一点点做出来很有成就感。

这句话下面是一篇帮了我很多的关于 HTML <head> 部分的文章：<head>标签里有什么? Metadata-HTML 中的元数据；关于写 CSS 的话我一开始是直接在谷歌上搜索想要实现的效果然后复制粘贴的，后来去 w3schools.com 和 MDN 上看了相关的文章学习。我也看了一些视频等等，都是搜索来的。我在写 HTML、CSS 的时候使用的文本编辑器是 Atom，它开源免费，有代码字体变色和高亮，有几乎所有网页文件的快捷输入帮助，还有很多第三方免费拓展包。我是在我静态网站生成器生成的网页文件基础上写的，省了些功夫。最开始我是先用 Markdown 文本编辑器 Typora 写的文字，Typora 写文档的时候可以直接用软件的选项来设定文字格式，甚至不需要写 Markdown 语句。能导出的文件格式非常多，我以后应该也会用它导出无格式 HTML。Typora 软件作者现在还提供免费测试版，以后可能会收费。

ARIA 与无障碍

在 LinkedIn Learning HTML 的课程里我了解到了 ARIA，Accessible Rich Internet Applications，不确定对应的汉语翻译。这句话结尾是 MDN 上对应的介绍文章：ARIA。让网页内容能被那些不能亲眼看到的人阅读到对我来说很重要，因为我有时候也会用屏幕阅读器。我发现，听自己写的字被读出来能让我注意到很多我看不到的错误。我也希望我们的世界里能少一点障碍，让每个人获取信息的障碍都少一点，这是每个人都应该有的权利。这并不是困难的工程，在 HTML 5 标准里，大部分的语义标签都自带了可以让屏幕阅读器提取的信息。所以在写 HTML 时使用对应的语义标签是非常重要的，此外也可以用 ARIA 标签编辑无障碍内容。很惭愧我还不熟悉为无障碍优化，现在网站上做的设置应该不够，我会慢慢改进。

同样的道理，在选定网页界面的色彩时也要考虑颜色在不同的人眼里的感受不同，有些颜色的对比是不容易被辨别的。参考下面这篇 MDN 文章（暂时只有英文版），了解对比度评级，去选用合适的颜色吧。Color contrast

用 Rsync 上传网页文件到 VPS

我在 Hugo 的官方文档里看到可以用 Rsync 命令来同步本地网页文件到 VPS。嗯……但我觉得它有点麻烦，我决定用比较简单的 SCP（Secure Copy Protocol，安全复制协议），我是从朋友那里听说的这个命令。写这行字的时候一查维基百科里面写着 2019 年 4 月的时候 OpenSSH 的开发者已经发文说 SCP 过时了，他们推荐用更现代的协议，比如 Rsync 和 SFTP 。都快 2020 年中期了，紧追潮流前沿的我怎能用过时的东西，搞技术要注意安全的嘛。试用了一下之后发现 SFTP 不能只用一行命令完成同步。所以还是用 Rsync 好点，它甚至还能压缩传输的数据提升速度节省流量。下面是一篇来自 Digital Ocean Community 的使用 Rsync 的英文教程文章：
How To Use Rsync to Sync Local and Remote Directories on a VPS – Justin Ellingwood

Rsync 除了是一个工具之外还是一种协议，因为它被广泛使用，它已经预装在了大部分的 Linux 系统里。所以只要你能用 SSH，这些命令应该也都能用。如果不能用的话麻烦你自己去搜索你的系统的用法。本地电脑如果使用 Windows 10 操作系统的话可以安装 Linux 子系统使用 Rsync，或者使用一款叫做 cwRsync 的软件。似乎是比较麻烦的，软件还要收费，抱歉了 Windows 用户。

我用的是下面这行命令。

rsync -avz -e 'ssh -p 端口号' --delete /home/shon/site/public 用户名@VPS_IP:/var/www/html

上面的命令里，-avz 会上传本地文件夹里的文件，在命令行里显示所执行的操作，并压缩上传的文件。
-e 'ssh -p 端口号' 用来指定非默认端口号，你用默认端口的话可以省略。
请注意 --delete 的意思是如果你删除了原文件夹里的文件，那么也删除目的文件夹里对应的文件，不想这样可以删掉这段字。
/home/shon/site/public 是你本地的网页文件夹目录；用户名@VPS_IP: 冒号后面是 VPS 上的网页文件夹目录。
按下 Enter 键之后输入登陆 VPS 的密码就开始传输了。如果你把本地目录和网页目录左右颠倒过来，你就能把 VPS 里的文件传到本地电脑上。请一定注意把文件同步到本地时去掉 --delete。

Rsync 非常适合用来同步，它会只传输更改过的文件。另外我又发现了一个很实用的可以解释命令的网站（英文）：explainshell.com

结语

从三月末下定决心买域名到五月初，我花了一个多月的时间去学去做这个网站，去写这篇文章。因为新型冠状病毒在全球被感染，我才有这么长的连续的时间，我感受到了有充足的时间去思考的重要性。我绝对认为瘟疫蔓延是灾难，我希望人类能理清前因后果，搞清楚为了防止灾难再发生而要做的事。
我想让你也相信的想法是：困难的事是要花时间的事，我们需要找到好的方法。在我生活里我有超级多摸不着头绪的事，我相信你也有。有些事让我痛苦与绝望，让我觉得我到死也不能做到。但是除了痛苦和绝望与你相伴之外，希望总在隐隐发光，别放弃它。相比是否能做到，我们更要花时间从最根本的地方去想的是：都要去做什么，为了什么要去。

我不知道怎么去回答“做这网站有什么用？”的问题，就像我不知道我做为一个人有什么用一样。我不能确信地列出这个网站或者我的价值，但我肯定她们都有价值，每个人感受到的价值都不一样。我想更好的问题是：做一个网站有什么样的作用你才会去做呢？是否能达到你的目的，要不要做，是只与你相关的事。我决定做这个网站的原因有很多，我不想详细地列出来，我想我希望我能让一些事方便一点点；我希望我能对在看这些字的你产生一点影响。

去发现，去改变吧。