关于本网站的搭建

一开始总觉得上线一个网站蛮简单，没想到实际操作也还是花了不少时间。

如何搭建

本网站基于 Docusaurus，参考官网说明，在安装 Nodejs 后，执行如何命令即能在本地运行网站：

// 创建 Docusaurus 站点，网站名为 my-website
$ npx create-docusaurus@latest my-website classic
// 本地运行网站
$ cd my-website
$ npm run start

即在浏览器上打开 http://localhost:3000 页面。

部署

生产环境需构建静态文件，执行如下命令，将静态文件生成到 build 目录：

$ npm run build

静态页面生成后，可参考部署至 GitHub Pages 将静态文件托管在 Github Pages 上。

若是部署在个人服务器上，则运行 npm run serve -- --build --host 0.0.0.0 来简单的部署，然后在浏览器中打开 https://ip:3000 即能访问页面。若需要修改端口，可以通过 --port 指定。

至此本文完。

好吧，笔者的目的是提供一个访问速度相对快、且容易记住的站点，因此又继续花时间和金钱折腾，如下。

使用 nginx 部署

对于线上网站而言，不会使用 npm run serve 的形式来当作后端服务，还是得使用 nginx 来做为 server，这样能满足负载均衡、优化自动部署等诸多需求，还增强了请求处理的能力。笔者部署 nginx 的过程如下：

执行 sudo apt update && sudo apt install nginx 安装 nginx。
执行 sudo ufw status 查看 uft 状态，若是开启状态，则执行 sudo ufw allow 'Nginx Full' 允许 Nginx HTTP/HTTPS 流量，再次执行 sudo ufw status 查看状态。
执行 systemctl status nginx 查看 nginx 状态，此时应该是 running 状态，在浏览器打开 http://ip 能看到 nginx 默认页面。
将域名为 qileq.com 的 SSL 证书上传到 /etc/nginx/cert 目录，证书申请过程见 SSL。
在仓库目录中，执行 npm run build，将生成的 build 目录移动到 /usr/share/nginx/html/ 目录中，为增加辨识度，笔者将 build 目录重命名为网站名 qielq。
修改 nginx 配置，开启 SSL，配置如下：

/etc/nginx/conf.d/qileq.conf
server {
        listen  443 ssl;

        server_name     qileq.com;
        ssl_certificate      /etc/nginx/cert/qileq.com_bundle.crt;
        ssl_certificate_key  /etc/nginx/cert/qileq.com.key;

        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3;
        #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        root /usr/share/nginx/html/qileq;
        index index.html;

        location / {
                proxy_redirect off;
                proxy_set_header Host $host:$server_port;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Ssl on;
        }
}

server {
        listen 80;
        server_name qileq.com;
        return 301 https://$host$request_uri;
}

执行 systemctl reload nginx 重新加载配置。
打开 https://ip 即能看到浏览器中 URL 前的 https 🔒标记。尝试打开 http://ip 也会自动跳转到 https://ip。

配置 Algolia

见开启 Algolia。

SSL

未来站点均为 https 类型已是大势所趋，因此本站使用 https 协议。这里先说下生成 SSL 证书的问题，目前主流云厂商均提供了免费的 SSL 证书，不需要用户敲命令去自己生成。以腾讯云为例，在腾讯云的 SSL 证书/我的证书中，点击申请免费证书，选择默认的 TRUSTAsia 证书类型，填写信息后即可得到免费的证书。这里笔者申请了两个 SSL 证书，域名分别是 qileq.com 和 cdn.qileq.com，这两个 SSL 证书分别会在 nginx 和 CDN 中用到。

对于 nginx：点击腾讯云的控制台/SSL 证书，选择已签发的证书，点击“下载证书”后，下载 nginx 的证书。
对于 CDN：如果需要在 CDN 上使用 https 通信协议，将该证书上传到 CDN 平台，以七牛云为例：点击七牛云的控制台/SSL 证书/上传自有证书，提示证书内容和证书私钥均需为 PEM 格式，但发现将上一步 Nginx 的 x_bundle.crt 内容拷贝到证书内容，将 x.key 的内容拷贝到证书私钥，点击上传也能成功。若失败的话，则需要通过 openssl 命令进行格式转换了。

域名

如果部署在 github.com 上，域名形式为 xx.github.io，笔者想使用自己的域名，于是在腾讯云上购买了域名。

这里说一下，购买域名后可以进行实名认证域名，因为实名认证满 72 小时后才能进行备案，否则在备案时会提示：

域名 qileq.com 实名认证时间为 2022-03-06 22:05:27 ，距离现在未满 72 小时，无法备案，请您在 2022-03-09 22:05:27 之后再进行备案。

域名备案

若域名指向的服务器位于内地，或域名做邮箱使用（即形如 mail.域名 形式），则需要进行备案。如果域名指向的服务器位于非内地地区，如香港、新加坡等，则不需要备案。备案过程参考腾讯云或阿里云上的指示即可。

这里提醒一下，腾讯云提交备案后，一般几分钟内即能收到备案短信，若短时间未收到的话，最好在第二天中午 12 点再查看下短信，以免错过备案校验，导致重新备案。

公安备案

管局备案成功后，需在 30 天内登录全国公安机关互联网站安全管理服务平台进行公安备案，这部分的操作可参考公有云教程，本文不再叙述。

当公安备案完成后，需复制网站公安机关备案号，下载备案编号图标，然后复制备案编号 HTML 代码，添加到网站 Footer 中。

图床服务

见图床服务。

开启评论

见评论系统。

开启网站统计服务

见网站统计服务。

自动发布到云服务器

见自动发布。

设置字体

本站使用霞鹜文楷，设置过程如下：

在 releases 下载 ttf 字体，放在 Docusaurus 项目的 static/font 目录下。

修改 src/css/custom.scss 添加字体，在最前面添加如下内容：

custom.scss
@font-face {
  font-family: 'LXGWWenKai Regular';
  src: url('/font/LXGWWenKai-Regular.ttf');
}

@font-face {
  font-family: 'LXGWWenKai Mono Regular';
  src: url('/font/LXGWWenKaiMono-Regular.ttf');
}

设置 ifm-font-family-base 和 --ifm-font-family-monospace:

custom.scss
:root {
  ...
  --ifm-font-family-base: "LXGWWenKai Regular";
  --ifm-font-family-monospace: "LXGWWenKai Mono Regular";
}

打开浏览器查看是否生效。

CDN

如果要使用 CDN 的话，参考 lxgw-wenkai-webfont 的使用文档，并将 CDN 地址添加到 docusaurus.config.js 的 stylesheets 属性，然后像上面一样修改 src/css/custom.scss 的 :root 属性。

如何搭建​

部署​

使用 nginx 部署​

配置 Algolia​

SSL​

域名​

域名备案​

公安备案​

图床服务​

开启评论​

开启网站统计服务​

自动发布到云服务器​

设置字体​

CDN​