使用 Vuepress 构建静态网站

参考资料：Vuepress官网 (opens new window)

Vuepress 安装

npm init
npm install -D vuepress

Vuepress 配置

VuePress 遵循 “约定优于配置” 的原则，官网说明参考 项目路径 (opens new window)

vuepressBlog
|--docs
|  |--readme.md		
|  └--.vuepress
|     |--public
|     └--config.js
└--package.json

config.js 导出了一个 JavaScript 对象（如下），用于配置网站的整体展示内容，规则参考 配置 (opens new window)

module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around'
}

readme.md 可以作为网站首页，详细规则参考 默认主题配置 (opens new window)

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

Vuepress 调试与编译

在 package.json 文件里添加两个启动命令

{
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    },
}

执行 npm run docs:dev 在本地启动服务器

执行 npm run docs:build 生成静态网站，生成结果在 “docs/.vuepress/.dist”目录中

$env:NODE_OPTIONS="--openssl-legacy-provider"

OpenSSL 报 error:03000086 错误

报错内容如下所示：

{
    ...
    opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
    library: 'digital envelope routines',
    reason: 'unsupported',
    code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

原因是使用了OpenSSL v3 的 Node.js 版本。Node.js v17.x、v18.x 和 v19.x 使用 OpenSSL v3，而 v14.x 和 v16.x 不会受到影响。

解决办法：

1. Node.js降为v14.x或v16.x
2. 修改环境变量

修改环境变量

1. 终端内直接输入以下命令，再执行 npm run 即可。

$env:NODE_OPTIONS="--openssl-legacy-provider"

2. 修改 package.json 文件

{
    "scripts": {
        "docs:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vuepress dev docs",
        "docs:build": "SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build docs"
    },
}

Nginx 配置

以下是腾讯云Nginx 加载 SSL 配置，腾讯云的SSL配置方法参考 Nginx 服务器 SSL 证书安装部署 (opens new window)

server {
    listen 443 ssl;
    server_name blog.mallocx.com;
    ssl_certificate /you/certificat/path/blog.mallocx.com_bundle.crt;
    ssl_certificate_key /you/certificat/path/blog.mallocx.com.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;
    location / {
        root /you/vuepress/file/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

注意：

一级域名证书不能用于二级域名，否则会提示该网站证书存在问题。

待更新：

1. 子目录设置（config.js 和 nginx）
2. 页面主题、默认宽度设置
3. 插件安装：脚注插件