使用VitePress搭建个人站

1 选型

网站框架

服务器

个人站主要就四种方案：

本地跑个服务，花生壳穿透
用ECS或其他服务搭云服务器
直接用Web Hosting网站托管服务其实最早我是用花生壳的，但是免费版一直报高危访问，会员版的年费又太贵，加上为了绑定我自己的域名，还是用云服务器吧，本地机器也安全一点。

因为有自己搭过服务器，也熟悉Docker，所以选择的关键点就在于云服务哪个便宜。

对比了阿里云和腾讯云的价格，基本包年都要400-500，最后选了阿里云的轻量应用服务器，活动特价新用户首年79元，运行1Pannel镜像。

但是阿里云的Web Hosting网站托管服务（腾讯云没有）是最省心的，如果资金充裕可以首选，明年如果没有优惠活动了我应该也会迁移过来，传个文件的事情，静态站就是这么灵活。

本来想用docker部署，但是要自己处理ftp、防火墙和ssl的问题搞得我很难受，几天以后放弃了，切到了1Pannel，非常好用，就是如果遇到OpenResty启动失败的话要配置一下docker镜像加速。

2 主要功能

3 其他组件

vitepress-plugin-mermaid

官方文档安装

bash

npm i vitepress-plugin-mermaid mermaid -D

配置

// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid(defineConfig({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
      // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
    },
    // optionally set additional config for plugin itself with MermaidPluginConfig
    mermaidPlugin: {
      class: "mermaid my-class", // set additional css classes for parent container 
    },
}));

部署SSL证书

在轻量应用服务器上使用Docker运行Nginx镜像并安装SSL证书，可以按照以下步骤操作：

步骤一：部署Docker

登录轻量应用服务器管理控制台。
创建服务器：在左侧导航栏，单击服务器，然后单击创建服务器。
选择Docker应用镜像：在创建服务器页面，选择Docker应用镜像，然后按照提示完成服务器的创建。

步骤二：使用Docker

登录轻量应用服务器：在服务器列表中，找到通过Docker镜像创建的轻量应用服务器，单击实例ID，进入实例详情页面。
远程登录服务器：在应用详情页签，单击远程登录服务器。

步骤三：拉取并运行Nginx容器

拉取Nginx镜像：
bash
```
sudo docker pull nginx
```
1

运行Nginx容器：

bash

sudo docker run --name nginx-test01 -p 80:80 -d nginx

步骤四：下载SSL证书

登录数字证书管理服务控制台。
选择证书管理：在左侧导航栏，选择证书管理 > SSL证书管理。
下载证书：在SSL证书管理页面，定位到目标证书，在操作列，单击更多，然后选择下载页签。选择服务器类型为Nginx，单击下载。
解压证书文件：解压下载的证书文件，通常包含两个文件：
- 证书文件（PEM格式）：默认以证书绑定域名.pem命名。
- 私钥文件（KEY格式）：默认以证书绑定域名.key命名。

步骤五：上传证书文件到Nginx容器

创建证书目录：
bash
```
sudo mkdir -p /etc/nginx/ssl
```
1

上传证书文件：将解压后的证书文件和私钥文件上传到/etc/nginx/ssl目录。可以使用SCP命令从本地上传：

bash

scp -r /path/to/your/certificate.pem root@<轻量应用服务器的公网IP>:/etc/nginx/ssl/
scp -r /path/to/your/private.key root@<轻量应用服务器的公网IP>:/etc/nginx/ssl/

步骤六：配置Nginx以支持SSL

进入Nginx容器：

bash

sudo docker exec -it nginx-test01 /bin/bash

编辑Nginx配置文件：
bash
```
vi /etc/nginx/conf.d/default.conf
```
1

修改配置文件：在配置文件中添加或修改以下内容：

nginx

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/nginx/ssl/your-certificate.pem;
    ssl_certificate_key /etc/nginx/ssl/your-private.key;

    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;

    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 / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

server {
    listen 80;
    server_name yourdomain.com;

    return 301 https://$host$request_uri;
}

保存并退出：按Esc键，输入:wq，然后按Enter键保存并退出。

步骤七：重启Nginx容器

退出容器：输入exit退出容器。
重启Nginx容器：
bash
```
sudo docker restart nginx-test01
```
1

步骤八：验证SSL证书

访问网站：在浏览器中输入https://yourdomain.com，检查是否显示小锁标志，表示SSL证书已成功安装。

通过以上步骤，您可以在轻量应用服务器上使用Docker运行Nginx镜像并成功安装SSL证书。

使用VitePress搭建个人站 ​

1 选型 ​

网站框架 ​

服务器 ​

2 主要功能 ​

3 其他组件 ​

vitepress-plugin-mermaid ​

部署SSL证书 ​

步骤一：部署Docker ​

步骤二：使用Docker ​

步骤三：拉取并运行Nginx容器 ​

步骤四：下载SSL证书 ​

步骤五：上传证书文件到Nginx容器 ​

步骤六：配置Nginx以支持SSL ​

步骤七：重启Nginx容器 ​

步骤八：验证SSL证书 ​

使用VitePress搭建个人站

1 选型

网站框架

服务器

2 主要功能

3 其他组件

vitepress-plugin-mermaid

部署SSL证书

步骤一：部署Docker

步骤二：使用Docker

步骤三：拉取并运行Nginx容器

步骤四：下载SSL证书

步骤五：上传证书文件到Nginx容器

步骤六：配置Nginx以支持SSL

步骤七：重启Nginx容器

步骤八：验证SSL证书