前言

最近開始準備秋招，打算做一個個人主頁，以便在秋招市場上更有競爭力。

目前，現有的一些搭建主頁的博文教程存在以下一些問題：

• 使用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之后，對相關的原理會更加深刻，實踐出真知。