个人主页搭建全流程(Nginx部署+SSL配置+DCDN加速)

前言

最近开始准备秋招，打算做一个个人主页，以便在秋招市场上更有竞争力。

目前，现有的一些搭建主页的博文教程存在以下一些问题：

• 使用Github Page进行部署，这在国内访问容易受阻
• 使用宝塔面板等框架，功能较繁杂，自定义化程度低
• 使用Hexo等博客框架进行搭建，主题大多花里胡哨，不够清晰美观
• 仅介绍如何进行操作，未说明这么做的原因，导致知其然而不知其所以然

针对以上问题，本文重新梳理用一周时间完成从主页编写到建站上线的流程，希望能对有同样需求的人有所参考。

1.选择主页模板

之前看论文时，发现不少学术圈人士用了jonbarron开源的这个主页模板，看上去非常简洁清晰，并且同时适配网页端和移动端。

访问地址：https://jonbarron.info/
Github地址：https://github.com/jonbarron/website

该模板时用前端三要素写的，只需要简单得修改html文件，就可以完成自己的个人主页。

由于原模板里面包含了很多动图及视频效果，我只需展现图片，因此对该模板进行了进一步的精简，有需要的也可以查看我修改的版本：
Github地址：https://github.com/zstar1003/zstar

2.选择服务器

因为该主页需要在国内访问，因此最佳方式是直接在云服务器上进行部署。

我使用阿里云服务器，阿里云的优点是服务器最近做活动，比较便宜(不是做广告)；提供免费的ssl证书和DCDN服务(个人轻量使用可白嫖)。一言蔽之，便是性价比高。

不过，阿里云很多功能模块比较错综复杂，文档有时候并不清晰。找一个小功能点往往需要找半天，为此，我在后面的步骤中会尽可能地挂一些链接，以便查找。

我购买的是阿里云的ECS轻量实例，99元可以用一年，对学生来说比较划算。
购买界面：https://www.aliyun.com/daily-act/ecs/99program

系统环境选择Ubuntu 20.04 64位。

等待系统安装完成之后，这里需要配置一下安全组规则。

此步非常重要，安全组相当于外部的防火墙，之前部署时忘记开相关端口，导致部署失败一致在内部排查问题，浪费不少时间。

这里比较核心的就开放三个端口：

• 22端口：用于ssh远程连接控制
• 80端口：用于http访问
• 443端口：用于https访问

3.Nginx部署

主流的服务器有Nginx和Apache，这两个我都试了一下，发现Apache有1代和2代，两者之间的配置文件不能通用，查询相关资料时，容易造成不便；此外，Nginx对于静态内容的处理比Apache更为高效。因此，选在Nginx作为服务器。

在服务器上安装Nginx：

sudo apt update
sudo apt install nginx

3.1 文件上传

Nginx的默认网站根目录为/var/www/html/，因此，先将本地编辑好的主页模板上传到服务器该路径下。

上传完之后，给文件设置权限：

在Nginx中，默认用户(访问者)用户名为www-data，所属用户组也为www-data，这里将该文件夹及子文件夹的所有权赋予用户www-data。

sudo chown -R www-data:www-data /var/www/html

将该目录的权限设置为775：

sudo chmod -R 755 /var/www/html

这里775的具体含义是：

所有者：7（rwx）：

• 读（r）：可以查看文件内容或列出目录内容。
• 写（w）：可以修改文件或在目录中创建/删除文件。
• 执行（x）：可以执行文件或进入目录。

所属组：5（r-x）：

• 读（r）：可以查看文件内容或列出目录内容。
• 执行（x）：可以执行文件或进入目录。

其他用户：5（r-x）：

• 读（r）：可以查看文件内容或列出目录内容。
• 执行（x）：可以执行文件或进入目录。

更多去数字及权限含义入下表所示：

数字	权限	含义
7	rwx	读（r）、写（w）、执行（x）
6	rw-	读（r）、写（w）
5	r-x	读（r）、执行（x）
4	r–	读（r）
3	-wx	写（w）、执行（x）
2	-w-	写（w）
1	–x	执行（x）
0	—	无权限

起初看到这么设置的时候，我产生了一个疑问：既然用户www-data所属的是www-data组，为什么只给用户写的权限，不给整个用户组写的权限。

查询资料，这样做的目的是满足最小权限原则，即只让访问者可以读写执行，以便在浏览器中进行交互，而对于其它用户(即便在同一个用户组)，也不给写的权限，防止其它进程修改网站文件。

3.2 修改配置

Nginx使用server 块来配置虚拟主机，通常可以为每个网站创建一个独立的配置文件。
比如在/etc/nginx/sites-available/目录下创建一个新的配置文件。

考虑到我只有一个网站，因此，我直接修改的nginx的配置文件，配置文件默认路径为/etc/nginx/nginx.conf。

在http项里添加server，这里的公网ip替换成自己服务器的公网ip，在服务器控制台中查看。

http {server {listen 80;server_name 公网ip;root /var/www/html;index index.html;location / {try_files $uri $uri/ =404;}}
}

3.3 部署访问

1.配置完成后，启动nginx：

sudo systemctl start nginx

可进一步设置开机自启动(可选)：

sudo systemctl enable nginx

2.检查一下配置文件是否有格式问题：

nginx -t

输出以下内容，表示配置文件没问题：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

3.查看nginx是否处于正常运行状态：

sudo systemctl status nginx

输出active (running)，表示正常运行。

4.启动防火墙：

sudo ufw enable

5.设置防火墙开放80端口：

sudo ufw allow 80/tcp

6.查看防火墙状态

sudo ufw status

配置完成之后，浏览器访问http://公网ip，即可看到网站界面。

4.域名解析

直接给用户公网ip的访问不太友好，也不好记，因此需要购买域名解析到ip。

我是直接在阿里云注册的域名。
阿里云的域名注册地址：https://wanwang.aliyun.com/domain

不同尾缀的域名价格有所差异，我选择了一个.website结尾的域名，一年价格10块钱。这里注册时不建议使用中文后缀的域名，后面在配置SSL的时候，会遇到不适配的问题。

购买好域名后，在域名控制台中进行域名解析，这里添加了两条A记录，A记录是将该域名解析到自己的公网ip。

一条记录是@，即直接访问域名；
另一条记录是www，即访问www.域名；

之后，重新修改nginx配置文件/etc/nginx/nginx.conf，将公网ip替换成自己的域名。

http {server {listen 80;server_name 自己域名;root /var/www/html;index index.html;location / {try_files $uri $uri/ =404;}}
}

配置完成后，重启nginx：

sudo systemctl restart nginx

等几分钟，就可以通过域名访问到部署的网站。

再过几分钟，就会发现网站被ban，因为地域规则，域名必须要备案之后才能上线。

阿里云的ICP备案地址：https://beian.aliyun.com/

三年前，我曾经用过ICP备案，当时备案流程还比较复杂，阿里云平台审核需要进行视频通话，要人工检验身份证信息。

现在已经比较便利了，身份信息都直接自动校验，阿里云的初审只是有个人工电话，打电话来确认下就行了。

下图是我的备案流程图：从7号开始提交，13号最终通过，用了差不多一周时间。

建站很快，审核很慢。

备案通过之后，域名就可以正常访问了。不过需要按照要求，在网页底部放置ICP备案号，在我精简的模板中，已有该备案号添加。

5.SSL配置

5.1 Https原理

如果仅通过http访问，浏览器会有连接不安全的提示。

不安全的原因是HTTP是明文传输的，这意味着数据在传输过程中是未加密的，容易被第三方窃听或篡改。

因此，HTTPS(HTTP Secure)应运而生。HTTPS在HTTP的基础上增加了 SSL/TLS 加密层以保证数据安全，具体通信流程如下：

1. 客户端发起请求
   客户端（如浏览器）向服务器发起 HTTPS请求。客户端支持的 SSL/TLS 版本和加密套件（Cipher Suites）会发送给服务器。
2. 服务器响应
   服务器选择一个双方都支持的 SSL/TLS 版本和加密套件。
3. 服务器将自己的数字证书发送给客户端。证书中包含服务器的公钥和证书颁发机构（CA）的签名。
4. 客户端验证证书
   客户端验证服务器的数字证书，检查证书是否由受信任的 CA 签发，检查证书是否在有效期内，检查证书中的域名是否与访问的域名匹配。
   如果验证通过，客户端生成一个预主密钥（Pre-Master Secret），并使用服务器的公钥加密后发送给服务器。
5. 密钥交换
   服务器使用自己的私钥解密预主密钥。
   客户端和服务器使用预主密钥生成主密钥（Master Secret），然后进一步生成会话密钥（Session Keys），用于加密通信内容。
6. 加密通信
   客户端和服务器使用会话密钥对通信内容进行加密和解密。

以上是GPT生成的解答内容，看起来有点绕。梳理一下，就是客户端和服务器想用一种相同的加密方法加密通信内容，问题的核心便在于，服务器该如何自证身份。

而证书(CA)就是第三方机构签发的服务器身份证，服务器在首次通信时，直接将身份证信息连同公钥寄过来，这个证书需要通过私钥进行生成，私钥仅存在于服务器中，因此，中间人无法通过伪造证书来进行篡改攻击。
客户端在验明正身后，用寄过来的公钥加密信息(约定后面用什么加密方式通信)，这个信息只有服务器通过私钥才能进行解密。
如此，就保证了数据的双向传输安全。

SSL(Secure Sockets Layer)目前已被TLS(Transport Layer Security)替代，目前，大部分的浏览器都使用TLS1.2和TLS1.3两个版本。

访问网站时，可以在开发者界面中的安全栏，看到具体的TLS版本。

证书正常买的价格有点偏贵，不过阿里云给每个用户20个免费额度，每张证书有效期为3个月。
申领地址：https://yundun.console.aliyun.com/

申请完成之后，需要等待机构签发，签发很快，差不多半小时就下来了。

下面就需要将证书部署到服务器上，证书控制台里面有部署菜单，但一直没找到我的服务器资源。翻阅半天文档，才发现阿里云的一键部署对ECS对系统有严格限制。（这一点竟然在控制界面中无提示，差评)。

5.2 手动部署证书

下面手动进行证书部署。

首先在下载界面将证书下载下来，下载Nginx形式。

下载完之后，会得到两个文件，.key是私钥，.pem是公钥。

将私钥上传到服务器/etc/ssl/private/这个路径。
将公钥上传到服务器/etc/ssl/certs/这个路径。

重新修改nginx配置文件：/etc/nginx/nginx.conf，我的完整配置文件内容如下：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on;
}http {### Basic Settings##sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;# server_tokens off;include /etc/nginx/mime.types;default_type application/octet-stream;### SSL Settings##ssl_protocols TLSv1.2 TLSv1.3;ssl_prefer_server_ciphers on;### Logging Settings##access_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log;### Gzip Settings##gzip on;### Virtual Host Configs##include /etc/nginx/conf.d/*.conf;include /etc/nginx/sites-enabled/*;server {listen 80;server_name zstar.website www.zstar.website;return 301 https://$host$request_uri;}server {listen 443 ssl;server_name zstar.website www.zstar.website;ssl_certificate /etc/ssl/certs/zstar.website.pem;ssl_certificate_key /etc/ssl/private/zstar.website.key;ssl_session_cache    shared:SSL:1m;ssl_session_timeout  5m;ssl_ciphers  HIGH:!aNULL:!MD5;ssl_prefer_server_ciphers  on;root   /var/www/html; index  index.html index.htm;location / {   try_files $uri $uri/ /index.html;}}
}

这里我对80端口的http请求加了一个重定向，使其访问http时，会自动向https的443端口发送请求。

配置完成后，重启nginx：

sudo systemctl restart nginx

同时，设置防火墙开放443端口：

sudo ufw allow 443/tcp

之后，就可以通过https+域名的方式正常访问网站。

6.DCDN加速

由于我的网站中有一些比较大的图片，并且服务器带宽很小，访问时，会有点加载缓慢。用户端表现是，文字先加载出来，图片等两三秒才出现，用户体验不佳。

因此，想通过CDN（Content Delivery Network）将静态内容（如图片、CSS、JS 文件）缓存到全球各地的边缘节点，使用户可以从离自己最近的节点获取内容，从而加速访问速度。

DCDN（Dynamic Content Delivery Network）是CDN的扩展，可加速动态内容（如 API 请求、数据库查询、个性化内容）的分发。
正好阿里云的有一年50GB的免费通用流量包，因此来白嫖一下。
DCDN地址：https://dcdn.console.aliyun.com/

DCDN的操作很简单，添加需要加速的域名，设置源站为公网ip的443端口，几分钟后，它会生成一个CNAME记录，该记录相当于是一个新的加速访问地址。

之后，需要在域名解析中删除前面添加的两条A记录，否则会造成冲突的问题。
添加新的CNAME记录，记录值为新的DCDN提供的数值。

最后，在DCDN里面再配置一下HTTPS证书，直接上传公钥的内容即可。

配置完成后，需要过十几分钟，控制台的CNAME状态才会更新。

在控制台中，也可以通过nslookup -type=CNAME + 访问域名的方式，来查看域名是否正确解析到了加速地址中。

配置完之后，访问很流畅，基本秒加载，完美解决问题。

总结

1. 流程顺利的话，搭建主页实际半天就可以完成。7天时间，6天卡在了审核上，半天卡在了问题排查和文档查看上。阿里云的文档确实有点错综复杂，找起来并不轻松。
2. 此次实践，特别是配置SSL和DCDN之后，对相关的原理会更加深刻，实践出真知。