前言

相关准备

二级域名

  • 首先需要有一个自己的一级域名，然后去域名服务商中添加一个域名解析
  • 以腾讯云服务为例，在云解析 DNS 中添加一个记录，例如我想实现 document.suburbiaxx.fun
    主机记录：document
    记录类型：A
    记录值：<服务器 IP 地址>
    # 其他默认即可
  • 添加完后，等待解析生效

SSL 证书

  • 为了实现 https 访问，需要去申请一个 SSL 证书，因为使用了二级域名，所以要申请一个通配符证书，一看腾讯云这些大厂的证书的价格，只能说家境贫寒，告辞

    这里需要去了解一下单域名、多域名、通配符证书的应用场景

  • 为了省钱，最终选择了免费的Let's Encrypt，但是其有个弊处就是证书有效期只有 90 天，需要定期更新，果然不花钱只能辛苦一下了

    Let's Encrypt 免费 SSL 证书

    https://letsencrypt.osfipin.com/

  • 申请的时候需要勾选泛域名，这样才能支持二级域名，然后就是一步一步照着做
  • 最后的证书文件中，需要的是 certificate.crt 和 private.pem，这里可以直接把 private.pem 改名为 private.key，然后将两个证书上传到服务器中

Nginx 配置

  • 因为我使用 Nginx 作为服务器代理，所以需要在 Nginx 中配置一下代理规则，简单修改一下 /etc/nginx/sites-available/default 文件，改完记得用 nginx -s reload 重载配置
    # 任何 http 重定向到 https
    server {
    	listen 80 default_server;
    	listen [::]:80 default_server;
    	server_name _;
    	return 301 https://$host$request_uri;
    }
    # 配置一级域名
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name <一级域名> <服务器 IP>;

        ssl_certificate <一级域名证书>; 
        ssl_certificate_key <一级域名证书>; 
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        if ($http_host = <服务器 IP>) {
            return 301 https://<一级域名>$request_uri;
        }

        root /var/www/hexo;
        index index.html index.htm;

        location / {
            proxy_set_header Accept-Encoding "";
            try_files $uri $uri/ =404;
        }
    }
    # 配置二级域名
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name <你想要的二级域名，这里是 document.suburbiaxx.fun>;

        ssl_certificate <来此加密中获得的 certificate.crt>;
        ssl_certificate_key <来此加密中获得的 private.key>;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        root <服务器中 VuePress 目录，本人放在 var/www/vuepress >;
        index index.html index.htm;
      	proxy_set_header Accept-Encoding "";

        location / {
            proxy_set_header Accept-Encoding "";
            try_files $uri $uri/ /index.html;
        }
    }

VuePress

安装配置

  • 接下来就是 VuePress 的安装和配置环节

    官方文档

    https://v2.vuepress.vuejs.org/zh/guide/introduction.html

    # 不喜欢官方的主题，选择了 reco 主题
    # 全局安装 reco 主题的脚手架
    npm install @vuepress-reco/theme-cli@1.0.7 -g

    # 初始化项目
    theme-cli init
    # 本人选择如下，在当前位置创建新目录 test，相关信息直接回车
    # ? Whether to create a new directory? Yes
    # ? What's the name of new directory? test
    # ? What's the title of your project? 
    # ? What's the description of your project? 
    # ? What's the author's name? 
    # ? What style do you want your home page to be?(The 2.x version is the alpha version) 2.x

    # 进入 test 目录，执行下面内容便可本地启动并访问
    npm i
    npm run dev

    # 部署，这个 .vuepress/dist/ 目录下就是编译好的静态文件
    npm run build
  • 将 .vuepress/dist 目录下的文件上传到服务器中的 VuePress 目录中，我设置为 var/www/vuepress，然后重启 Nginx 服务即可在浏览器中以 document.suburbiaxx.fun 访问

reco 主题细节

  • 目录细节
    .vuepress/config.ts -> 博客配置文件
    .vuepress/public -> 全局静态资源文件夹，markdown 配置中 /xxx.png，请求的文件在 .vuepress/public 下
    blogs -> 博客目录
    docs -> 文档目录
    README.md -> 博客的入口，站点的首页内容
  • 只有 blogs 下的内容会被渲染到首页下面的博客列表中
  • 可以以 blogs 作为文档的入口，然后在 docs 中添加文档内容
  • 左侧的导航栏是在 .vuepress/config.ts 中配置的，配置非常手动!!!
  • 具体其他细节，可以参考官方文档，或者参考下面的参考链接

参考

使用vuepress-reco构建你安静而优雅的文档库

https://kirigaya.cn/blog/article?seq=62

01.Vuepress2.x 创建自己的技术文档站

https://blog.csdn.net/sinat_31213021/article/details/119377825?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171377205716800197042735%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171377205716800197042735&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-11-119377825-null-null.nonecase&utm_term=vuepress&spm=1018.2226.3001.4450