搭建网站流程

搭建网站前前后后用了20多天（主要大头在备案等待），一路还挺顺畅的。现在来复盘一下搭建网站的所有流程和各个流程的作用。不涉及具体操作细节，操作细节可以参考其他博客哈。

总览

服务器

最先购买服务器，我是在腾讯云购买的轻量级服务器。先购买服务器，会分配给一个公网IP（备案时需要）。其他事情暂且不需要做。

服务器是资源的载体。可以通过ip:port/资源路径（URI）访问服务器上的资源。

域名

购买域名

最重要的当然是购买一个自己喜欢的域名罗！我也是直接在腾讯云购买的。可惜了，ayang.com被注册了，不过现在的ayang.ink也很喜欢。

域名起到容易辨识的作用，通过 DNS 解析后得到 IP 地址，这样就不用记住全是数字的 IP 地址了。

HTTPS

申请域名后立马就可以申请 SSL 证书了（备案时也需要用到）。

SSL 证书起到 HTTPS 验证和加解密的作用。

DNS解析

最后就可以在域名购买商（我的当然就是腾讯云）那里开启域名DNS 解析罗。添加域名解析记录，记录值里填写的是服务器的公网 IP。

然后打开控制台输入ping ayang.ink，如果有收到回复，那么就成功啦。

1
2
3
4
5
6
7

ping ayang.ink

正在 Ping ayang.ink [114.100.160.100] 具有 32 字节的数据:
来自 114.100.160.100 的回复: 字节=32 时间=27ms TTL=48
来自 114.100.160.100 的回复: 字节=32 时间=25ms TTL=48
来自 114.100.160.100 的回复: 字节=32 时间=24ms TTL=48
来自 114.100.160.100 的回复: 字节=32 时间=26ms TTL=48

DNS 能将域名如ayang.ink与公网 IP 绑定。当访问域名时，浏览器会访问 DNS 服务器获取域名对应的 IP 地址，这就是 DNS 解析。

备案

ICP备案

同样在域名购买商那里备案即可。填写相关信息，此时要用到前面服务器提供的公网 IP 和 SSL 证书。然后你就是可以拥有10多天休息时间罗（bushi，此时的你一定是沉浸在琢磨本地网站配置之中）。

网安备案

ICP 备案后就可以进行网安备案，网安备案备案速度很快，2天即可。（其实经过 ICP 备案后域名就能正常访问了。）

本地网站搭建

Hugo 本地环境搭建

具体 Hugo 环境搭建可以参考 Hugo 中文文档。

Hugo 是一个静态站点生成器，其本质是一个程序（windows 下是 hugo.exe 二进制文件）。只要根据 Hugo 的配置约定和 Hugo 提供的接口，我们即可以编写出 theme 和 content（文章内容以 Markdown 文件格式）。运行 Hugo，程序将会把 Markdown 文件解析生成对应的 HTML 文件。注意：访问静态网站 URL 仅仅是返回一个 HTML 文件，浏览器进行渲染显示。

（来源百度百科）静态网站是指全部由HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中。

既然静态，那怎么实现评论这种动态功能呢？其实这样的网页并不是完全静态的。做法是通过嵌入 js 向其他服务器调用服务（如通过 Github API 发送 get 请求获取仓库的 issue 作为评论，在网页评论时也是发送一个 post 请求给 Github 服务器提交 issue）。

挑选 theme

在 Hugo 官网或者 Github 挑选喜欢的主题，然后就是查看配置文档，一步一步调整成自己喜欢的模样。eg：我网站的主题

部署到远程服务器

Hugo 创建静态站点文件

只需在控制台（需在网站文件目录下）执行 hugo（需要配置Hugo的环境变量）。Hugo程序会执行，生成静态站点的文件，文件放在public目录下。然后通过 Xftp 将public整个文件夹上传到 Linux 远程服务器上。我自己放置的位置是/home/ayang/site/Ayang-Blog/public（记住该位置，后面会用到）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

G:\site> hugo
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc+extended windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

                   | ZH-CN
-------------------+--------
  Pages            |    23
  Paginator pages  |     0
  Non-page files   |     0
  Static files     |   108
  Processed images |     0
  Aliases          |     4
  Sitemaps         |     1
  Cleaned          |     0

Total in 331 ms

nginx Web 服务器

需要在服务器下载并安装 nginx。然后修改配置文件即可。让 nginx 监听 443 端口号（因为https默认是访问443端口）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

[ayang@VM-8-16-centos ~]$ cd /usr/local/nginx/conf
[ayang@VM-8-16-centos conf]$ vim nginx.conf
server {
        listen       443 ssl;  # 监听443端口
        server_name  ayang.ink www.ayang.ink; # 改成自己的域名
        # SSL证书和密钥，通过域名服务商获得，然后上传到nginx/conf中
        ssl_certificate      ayang.ink_bundle.pem; 
        ssl_certificate_key  ayang.ink.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            # 改成网站静态文件存储的绝对位置，nginx会通过这个路径访问
            root   /home/ayang/site/Ayang-Blog/public;
           index  index.html index.htm;
        }

此外，nginx 还有反向代理、负载均衡等功能，读者可以通过其他博客学习。

CDN 加速

我的云服务是在广州，如果西藏或者北京的朋友来访问需要通过几千公里的网线传输，速度会很慢。解决方法是 CDN 加速。

CDN 本质是缓存。把原服务的资源 copy 然后缓存在全国各地的CDN服务器中，客户端访问时选择最近的CDN服务器请求资源即可，不用请求远处的源服务器。

为我们的网站设置CDN
很简单，只需要在 CDN 服务厂商购买CDN服务，然后填写网站的相关信息即可。最后记得把域名 DNS 解析改成 CDN 服务厂商的域名，且暂停域名解析到 服务器 IP。

同样可以通过ping ayang.ink来查看是否成功。如成功，访问的是CDN服务器，而不是源服务器。

1
2
3
4
5
6
7

ping ayang.ink

正在 Ping fwp74c6f.slt.sched.tdnsv8.com [113.105.165.82] 具有 32 字节的数据:
来自 113.105.165.82 的回复: 字节=32 时间=24ms TTL=52
来自 113.105.165.82 的回复: 字节=32 时间=23ms TTL=52
来自 113.105.165.82 的回复: 字节=32 时间=21ms TTL=52
来自 113.105.165.82 的回复: 字节=32 时间=22ms TTL=52

Github hook 自动化部署

每次发表文章都需要 hugo 后通过 Xftp 上传到云服务上，是不是很繁琐？
解决方案：Github hook 自动化部署。
可以看我下一篇文章哈，同样在建站目录下。

End