价值499元，搭建笔记网页教程
🍊果冻橙橙君
概述
之前也做了一期搭建笔记网页教程，其实还少填了很多知识，不过依旧引起了良好的反馈。
对用户好的事情要重复做，今天再次详细地做一期教程，给大家省下499元，涉及的知识如下：
VitePress
Github Actions
Github Page
https 证书
Nginx 负载均衡
先花几分钟，简单学习下这些知识点。
VitePress
VitePress是类似VuePress的一个静态博客系统，它支持markdown文件生成静态网页，还支持在markdown文件中变现vue代码，支持自定义主题。
VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
Github Actions
Github Actions可以理解为自动化脚本，自动将项目进行编译，可以指定编译结果输出到 Github Page。
GitHub Actions允许用户创建工作流（Workflow），这些工作流会在特定事件发生时自动执行。事件可以是推送到仓库的代码变更、创建或关闭Issue、拉取请求（Pull Request）等。工作流由一个或多个任务（Job）组成，每个任务可以在不同的操作系统（Linux、Windows、macOS）上运行，并且可以并行或串行执行。
Github Pages
Github Pages是Github提供给用户发布网页内容的静态网站托管服务。
GitHub Pages是一个由GitHub提供的免费静态网站托管服务。它允许用户直接从GitHub仓库中托管网站，无需服务器设置或复杂的部署过程。GitHub Pages专门用于托管静态内容，如HTML、CSS、JavaScript文件和图片，适用于个人在线简历、项目展示等场景。
https 证书
狭隘点地说，不知何时开始，网站不支持 https 证书将会被浏览器拦截，也就是开始收保护费了。
各大服务器运营商提供3个月免费的https认证，需要提供身份证申请证书，申请后下载证书文件，配置到服务器即可，3个月到期后就要重新配置一次。
https是对http请求的升级版本，通过证书进行加密传输，增加了网站内容的安全，避免了网站请求被拦截的风险。
Nginx 负载均衡
nginx是超级好用的搭建网页的工具软件，可以理解为网站入口，通过nginx可以将域名转发请求到内网。
也就是说，一个nginx服务器可以根据一个策略，例如通过请求ip的hash进行分别转发到不同的主机，即负载均衡。
当然如果只有一个主机，可以将请求转发到127.0.0.1。
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 ，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，公开版本1.19.6发布于2020年12月15日。
其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022年01月25日，nginx 1.21.6发布。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。
笔记网页搭建步骤
用 VitePress 模板项目记录笔记
配置 Github Actions 自动化部署
开启 Github Pages 静态网页
Nginx 转发域名请求到 Github Pages
Nginx 配置 https 证书
配置域名解析到 Nginx 主机
用 VitePress 模板项目记录笔记
这一步其实非常简单，直接fork样例工程即可。
https://github.com/lyming99/wenz_vitepress_demo
配置 Github Actions 自动化部署
在样例工程中，文件夹./github/workflows中有具体配置，其实也是从Vitepress官网得到的配置。
要注意的是，里面的分支要和项目的分支一致，否则 github 不能成功启动脚本。
开启 Github Pages 静态网页
在 github pages 配置页面，配置 build and deployment 指向 Github Actions。
然后在 Custom domain 里面配置一个域名（自行购买）。
Nginx 转发域名请求到 Github Pages
# 负载均衡
upstream demo_doc {
server 185.199.108.153;
server 185.199.109.153;
server 185.199.110.153;
server 185.199.111.153;
}
server {
listen 80;
server_name demo.wenzdoc.com;
location / {
proxy_pass http://demo_doc;
}
}Nginx 配置 https 证书
此步骤较为麻烦，需要将http请求转发到https，申请证书后，下载证书文件放到服务器对应路径即可。
例如放到服务器的下列2个路径之下：
/etc/nginx/wenzdoc.com.pem;
/etc/nginx/wenzdoc.com.key;# 负载均衡
upstream demo_doc {
server 185.199.108.153;
server 185.199.109.153;
server 185.199.110.153;
server 185.199.111.153;
}
server {
listen 80;
#填写证书绑定的域名
server_name demo.wenzdoc.com;
#将所有HTTP请求通过rewrite指令重定向到HTTPS。
rewrite ^(.*)$ https://$host$1;
location / {
index index.html index.htm;
}
}
server {
listen 443 ssl;
#填写证书绑定的域名
server_name demo.wenzdoc.com;
#填写证书文件绝对路径
ssl_certificate /etc/nginx/wenzdoc.com.pem;
#填写证书私钥文件绝对路径
ssl_certificate_key /etc/nginx/wenzdoc.com.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
#自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
#TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
#表示优先使用服务端加密套件。默认开启
ssl_prefer_server_ciphers on;
location / {
# content location
proxy_pass http://demo_doc;
# exact matches -> reverse clean urls -> folders -> not found
try_files $uri $uri.html $uri/ =404;
# non existent pages
error_page 404 /404.html;
# a folder without index.html raises 403 in this setup
error_page 403 /404.html;
# adjust caching headers
# files in the assets folder have hashes filenames
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
}配置域名解析到 Nginx 主机
这点比较简单，直接将域名解析到 nginx 即可。
总结
每一步步骤都是需要具体操作的，如果遇到不懂的问题，可以先问问人工智能，含泪省下499元😂。