千古壹号的博客 HomeArchivesCategoriesTagsAbout
VuePress+阿里云搭建在线知识库
|软件工具
Word count: 6.7k|Reading time: 24 min

前言

开发时间

  • 2021-06-16：折腾一下午，终于完成初步目标。输入域名，可以打开我的 vuepress项目了。
  • 2021-06-16：晚上，接入了 Google Adsense 广告位。
  • 2021-09-17：折腾一晚上，完成了CDN加速。

开发环境

  • Node版本：v12.18.4
  • 服务器：阿里云
  • CDN加速：七牛云
  • 图床：七牛云
  • 项目的效果展示：web.qianguyihao.com

实现效果

  • 自定义域名
  • 知识库支持：左侧目录的导航+右侧标题的导航。
  • 所有文件和静态资源托管在个人的私有服务器
  • 自动化部署
  • 首屏渲染完成时间控制在2秒以内。
  • 支持CDN缓存，支持PWA本地缓存。
  • 接入 Google AdSense广告。

前端：该选哪一个知识库平台

知识库（非技术平台）

  • notion

颜值高，功能强大。但国内网络不太好，且有一定的学习成本。如果你能高效上网，notion是不错的选择。
·

  • 语雀

阿里的蚂蚁金服团队出品，几乎没有学习成本。如果想搭建一个公开的知识库，但又不想折腾技术，语雀是首选。

知识库（技术平台）

在技术领域，现在流行的知识库平台主要是这四个：（颜值都不错）

  • GitBook

GitBook分为两种：一种是开源的 GitBook，另一种是 GitBook.com。开源的GitBook 自从2018年之后，官方就不再维护了。所以最佳选择是 GitBook.com。

优点：GitBook.com几乎没有操作成本，直接导入 md 文件，或者导入 GitHub项目，就能生成知识库，而且可以绑定自定义域名。在所有技术类知识库平台中，GitBook.com的的颜值是最为美观的（至少我认为如此），目录结构的样式深得我心。

缺点：无法自定义配置（只能按官方的模板来）、国内的访问速度很慢（因为页面只能托管在 GitBook.com，不能托管在私有服务器）、无法接入广告位。

操作成本很低，配置也简单，支持接入广告位。但对 SEO 不友好。总的来说，适合做轻量级的知识库。

  • hugo-book

属于 hugo博客的一种主题，样式美观。但 hugo-book 才刚推出没多久，生态不成熟，要踩的坑也不少。

  • VuePress

尤雨溪大大推出的平台。

优点：支持自定义的配置非常多，甚至支持插入自定义的 JS 代码。渲染性能好、SEO友好、支持接入广告位。

缺点：官方文档写的很烂。上手门槛较高，需要自己花很多时间折腾。

总结：

没有最好的知识库平台，只有最合适的。

最终，我选定了 VuePress 作为我的前端教程的知识库平台。因为 VuePress 具有非常好的加载性能和搜索引擎优化（SEO），也支持接入广告位，满足我的需求。

VuePress官网对几个主流的平台也做了对比：

一、本地安装 VuePress 环境

1、安装 git 环境

2、安装Node.js环境

3、安装 VuePress

安装 VuePress：

1
npm install -g vuepress

4、初始化项目

（1）新建文件夹blog：

1
2
mkdir blog
cd blog

（2）初始化项目：

1
npm init -y

初始化完成后，blog文件夹内会自动生成一个package.json文件，默认的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在package.json中，新增如下内容，配置启动命令：

1
2
3
4
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
}

上方内容的意思是：

  • 启动项目： npm run docs:dev，这条命令就等于vuepress dev docs。

  • 打包项目： npm run build 这条命令就等于 vuepress build docs。

（3）新增.gitignore文件，将默认的临时目录和缓存目录添加到这个文件中：

1
2
3
node_modules
.temp
.cache

5、创建第一篇文档

（1）新建docs文件夹，这里面可以存放我们写的.md类型的文章以及.vuepress相关的配置：

1
mkdir docs

（2）创建第一篇.md格式的文档：

1
2
3
4
cd docs

# 这行命令的意思是，新建文件 readme.md，并写入内容 ## Hello VuePress
echo '## Hello VuePress' > README.md

6、在本地预览项目

输入如下命令，在浏览器预览项目：

1
2
3
4
$ npm run docs:dev

success [20:34:58] Build 5dfce5 finished in 4843 ms!
VuePress dev server listening at http://localhost:8080/

在浏览器输入 http://localhost:8080 ，就能看到 VuePress 的默认主题下的主页了：

7、打包项目

运行npm run docs:build将项目打包，打包文件会在docs/.vuepress/dist目录下自动生成。稍后，我们把这个目录下的文件，部署到服务器端，然后配置 nginx代理，就可以在网上上正常访问了。

二、页面配置

基本配置

（1）在docs文件夹中创建.vuepress文件夹：

1
mkdir .vuepress

这个文件存放的是vuepress相关的配置。

在 .vuepress 目录下，新建一个总的配置文件config.js， 这个文件的名字是固定的：

1
2
cd .vuepress
touch config.js

config.js中最基础的配置文件内容如下：

1
2
3
4
module.exports = {
    title: '千古前端图文教程',
    description: '从零开始学前端，超详细的前端入门到进阶学习笔记。',
}

设置封面页

我们可以在 之前新建的 readme.md文件中，设置封面页。 官方也给我们提供了封面页的模板，比较实用的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
home: true
heroImage: https://vuepress.vuejs.org/hero.png
heroText: VuePress
tagline: Vue 驱动的静态网站生成器
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
---

效果图如下：

支持PWA

vuepress还有一个我比较看重的优势, 就是支持PWA, 当用户没有网的情况下，一样能继续的访问我们的网站。

在0.x 版本中我们只要配置serviceWorker: true 即可, 但是我们现在使用的是1.2.0版本, 这个版本中已经将这个功能抽离出来作为插件的方式使用, 下面就看一下具体如何使用的:

首先需要安装插件:

1
2
yarn add -D @vuepress/plugin-pwa
# 或者 npm install -D @vuepress/plugin-pwa

在config.js中配置:

1
2
3
4
5
6
module.exports = {
  plugins: ['@vuepress/pwa', {
    serviceWorker: true,
    updatePopup: true
  }]
}

注意，为了让你的网站完全地兼容 PWA，你需要:

  • 在 .vuepress/public 提供 Manifest 和 icons
  • 在 .vuepress/config.js 添加正确的 head links
1
2
3
4
5
6
7
8
// 配置
module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }],
    //增加manifest.json
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
}

manifest.json 文件

1
2
3
4
5
6
7
{
  "name": "qianguyihao_blog",
  "short_name": "blog",
  "version": "1.0.0",
  "description": "qianguyihao的博客",
  "manifest_version": 2
}

三、服务器端配置

配置nginx代理

首先，要确保你满足下面几个条件：

  • 你有一台服务器
  • 已经安装好nginx
  • 有一个已备案的域名

通过ssh工具远程连接服务器端，然后开始配置 nginx代理。

（1）为 vuepress 创建一个部署目录 /home/www/vuepress ：

1
mkdir -p /home/www/vuepress

（2）进入 /usr/local/nginx/conf 目录，并对 nginx.conf 配置文件进行相关配置：

1
2
3
cd /usr/local/nginx/conf
ls
vim nginx.conf

打开nginx.conf文件后，按 i 键由命令模式切换到编辑模式，修改三个地方：

  • 首先将最顶端的用户改为 root。
  • 其次，将 server_name 改为自己的域名。如果没有备案，可以先填写自己的公网 IP（在阿里云控制台的 ECS 实例中查看），访问时暂时用公网 IP 进行访问。
  • 最后，将location中的 root 项中的值改为 /home/www/vuepress;。如果 server 中的端口号不是 80，则改为 80。

修改结束之后，先按 Esc 由编辑模式切换到命令模式，再输入 :wq 命令保存并退出编辑器。

我们需要在 nginx.conf 中 添加下面的配置：

1
2
3
4
5
6
7
8
9
server {
    listen  			80;
    server_name 	web.qianguyihao.com;
    location / {
        root    /home/www/vuepress;
        index   index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

（3）上传静态资源文件：

将静态资源文件放置到服务器上，路径为配置的 /home/www/vuepress， 可以借助xftp工具上传也可以通过git克隆, 选择适合自己的方式就可以。

稍后，我们将介绍如何进行自动化部署（即自动化上传文件），这种方式最科学，最高效。

（4）修改nginx后，重启nginx：

1
2
3
cd /usr/local/nginx/sbin
ls
./nginx -s reload

参考链接：

新建远程git仓库，为自动化部署做准备

为了使我们能够在本地向服务器实现自动部署，需要在服务器端新建一个 Git 用户。然后使用公钥连接成功之后，就可以方便地随时进行自动部署了。

具体操作，可以看我写的另外一篇blog：hexo+阿里云搭建博客网站

现在，我们开始在服务器端配置 Git 仓库。

（1）在服务器端使用 Git 用户 创建 git 仓库：

1
2
3
su git
cd ~
sudo git init --bare vuepress.git

（2）接着上一步，准备配置hooks(钩子)。hooks的作用是：当代码在本地执行 git push后，服务端会自动执行一些操作。

命令如下：

1
2
3
4
5
6
7
8
9
cd /home/git/vuepress.git/hooks
# 通过copy 新建post-update 文件
sudo cp post-update.sample post-update

# 修改文件权限
sudo chmod +x ~/vuepress.git/hooks/post-update

# 编辑 post-update 文件
sudo vim post-update

更改 post-update 文件为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
#exec git update-server-info
echo "Im update"
# 代码仓库目录
GIT_REPO=/home/git/vuepress.git
# 临时目录
TMP_GIT_CLONE=/home/tmp/vuepress
# nginx的root目录（存放编译打包后的资源文件）
PUBLIC_WWW=/home/www/vuepress

rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
mv -t ${PUBLIC_WWW} ${TMP_GIT_CLONE}/*

上方配置中，GIT_REPO就是我们服务器端git仓库的地址，TMP_GIT_CLONE就是临时存放上传的资源的路径，PUBLIC_WWW是项目最后存放的地方,对于这个博客来说，这个PUBLIC_WWW就是之前Nginx配置的root。

这个脚本的含义就是，当我们在本地进行提交的时候，服务器接受后，会将其复制到临时存放目录，然后转移到项目路径下，从而使得我们：只需要在本地把生成的项目push到远程服务器，服务器就可以自动帮我们部署到对应的文件夹啦。

（3）创建临时目录：（这里其实是以root身份创建的）

1
2
sudo mkdir /home/tmp
sudo mkdir /home/tmp/vuepress

让git用户拥有这个目录的操作权限：

1
2
3
sudo chown git:git -R /home/tmp

sudo chown git:git -R /home/www/vuepress

（4）重启 ECS 实例。

文件的权限问题，遇到的坑

后来在本地上传文件到服务器的时候，每次都提示权限不足。原因是：我们用到的诸如/home/git/vuepress.git之类的文件，都是以root身份创建的，其所有者为root用户，所以git用户没有权限进行读写操作，因此我们可以使用如下命令，让git用户拥有这个目录/文件的权限：

1
sudo chown git:git -R xxx //xxx为对应的文件或目录

发布到服务器端：

回到本地的vuepress项目，在根目录下，执行如下命令将项目的静态文件发布到服务器端：

1
2
3
4
5
6
7
8
9
10
11
12
# 编译生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 以git用户的身份，发布到阿里云服务器。这里的xxx是服务器ip
git push -f git@xxx.xxx.xxx.xxx:/home/git/vuepress.git master

补充：当你执行上方的最后一行 git push命令时，如果提示下面这个错误，那可以确定，就是权限的问题：

1
2
3
4
5
6
7
8
# case1
remote: fatal: 不能为 '/home/tmp/vuepress' 创建先导目录: 权限不够
remote: cp: 无法获取'/home/tmp/vuepress' 的文件状态(stat): 没有那个文件或目录
To xxx.xxx.xxx.xxx:/home/git/vuepress.git

# case2
remote: rm: 无法删除'/home/www/vuepress': 权限不够
remote: cp: 无法创建目录 '/home/www/vuepress/vuepress': 权限不够

如果每次发布时，都要执行上面的命令，那就太麻烦了。所以，我们可以把这些命令，放到 deploy.sh下，实现自动化部署。具体做法如下。

自动化发布到服务器

在本地项目的根目录，创建deploy.sh文件来运行自动部署命令，文件里的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io  USERNAME=你的用户名
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:qianguyihao/web.git master

# 以git用户的身份，发布到阿里云服务器
git push -f git@47.112.XXX.XXX:/home/git/vuepress.git master

cd -

上面的内容配置完成后，以后，我们只要输入输入npm run deploy，并输入服务器的密码，即可一键将本地的vuepress文件部署到服务器端。

到此，我们就完成了服务端的配置。

参考链接

把上面的三个链接，结合起来看，最终实现了我的自动化部署的目标。

二级域名的 DNS 解析

在此之前，需要先将域名进行备案。域名备案成功之后，我们就有能力使用域名登陆自己的博客了。

我的项目是二级域名 web.qianguyihao.com，所以dns解析的配置是这样的：

上面的红框部分，就是我这次要加的dns配置。其他的配置，是我以前在搭建 qianguyihao.com 博客的时候做的配置。

访问页面

上面的内容配置完成后，我们就可以通过http://web.qianguyihao.com访问前端应用了：

注意，修改完nginx，然后重启nginx之后，如果网站打不开，可能是浏览器缓存的问题，建议重新开一个无痕模式的浏览器窗口；也可能是 https 的问题，因为暂时还没有开启 https，所以只能通过 http 来访问，访问https是打不开的。我就是在这个地方，卡了很久。

给二级域名安装 https证书

在阿里云的搜索框里搜“ssl证书”，然后进入管理控制台，申请免费证书：

上图中，点击“证书申请”之后，弹出如下内容：

上图中，填写自己的二级域名，然后点击下一步：

上图中，点击验证，然后提交审核。

审核通过后，就可以下载证书，并配置 nginx了，这部分的操作流程，可以参照我之前写的博客：hexo+阿里云搭建博客网站

二级域名开启 https 的nginx配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
    listen       443 ssl;
    server_name  web.qianguyihao.com;

    ssl_certificate       /usr/local/nginx/cert/5808232_web.qianguyihao.com.pem;
    ssl_certificate_key   /usr/local/nginx/cert/5808232_web.qianguyihao.com.key;

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

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    location / {
        root   /home/www/vuepress;
        index  index.html index.htm;
    }
}

证书安装完成后，重启 nginx，然后就可以通过 https://web.qianguyihao.com 来访问了：

三、自定义主题：vuepress-theme-reco

我用的是 vuepress-theme-reco 主题。

主题安装和使用

安装：

1
npm install vuepress-theme-reco --save-dev

引用：

1
2
3
4
5
// .vuepress/config.js

module.exports = {
  theme: 'reco'
}

自动生成 sidebar

在vuepress配置sidebar时，每篇文章都要配置对应的位置。正常情况下咱们会这样配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'vue',   // 必要的
        collapsable: false, // 是否展开分组 可选的, 默认值是 true,
        sidebarDepth: 2,    // 可选的, 默认值是 1
        children: [
          'document/vue/','document/vue/vue1.md','document/vue/vue2.md'
        ]
      },
      {
        title: 'js',
        children: [ /* ... */ ]
      }
    ]
  }
}

但是显而易见，当我们日后文章数量增加，又或者我们需要更改名称，这时候就又得找到位置更改名称。相当的麻烦。

我们可以写一段代码，对 sidebar 进行自动配置。做法如下。

首先，我们先整合下目录，根据不同文章分类进行分组，如下：

1
2
3
4
5
6
7
8
9
10
.
├─document/
│ ├─ vue/
│ │  ├─ README.md
│ │  ├─ vue1.md
│ │  └─ vue2.md
│ └─ js/
│   ├─ README.md
│   ├─ js1.md
│   └─ js2.md

接着我们在.vuepress创建两个文件 一个是sidebarConf.js，用来生成对应的侧边栏列表 另一个是getDocPath.js文件，用来获取所有的文章名。

1
2
3
4
5
6
.
├─ docs
│  └─.vuepress
│     ├─config.js
│     ├─sidebarConf.js
│     └─getDocPath.js

（1）获取文件名：

getDocPath.js 获取一个目录下的所有文件名。注意需要排除.DS_Store文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
   * 获取目录下的所有文件的相对路径
   * 解决路由名称枚举问题
   */
  const fs = require('fs')
  const path = require('path')
  function getDocPath(title,collapsable,relateivePath) {
    const absolutePath = path.join(__dirname, '../' + relateivePath)
    const files = fs.readdirSync(absolutePath)
    const components = []
    // 排除检查的文件
    var excludes = ['.DS_Store']
    let arr = files.sort(function(a, b) {
      // 截取'.'之前的数字进行排序 例如 1.vue 2.vue 3.vue
      return a.split('.')[0] - b.split('.')[0];
    });
    arr.forEach(function (item) {
      if (excludes.indexOf(item) < 0) {
        let stat = fs.lstatSync(absolutePath + '/' + item)
        if (item == 'README.md') {
          components.unshift(relateivePath + '/')
        } else if (!stat.isDirectory()) {
          components.push(relateivePath + '/' + item)
        } else {
          console.log(relateivePath + '/' + item)
          getDocPath(relateivePath + '/' + item)
        }
      }
    })
    let frame = {
      title:title,
      collapsable:collapsable,
      children:components
    }
    return frame
  }
  module.exports = getDocPath

(2)配置侧边栏：

在sidebarConf.js 调用getDocPath()方法，组成侧边栏的数据列表，对应文章开头的原始配置格式。

1
2
3
4
5
const getDocPath = require('./getDocPath')
module.exports = [
    getDocPath('vue',true,'document/vue'),
    getDocPath('js',true,'document/js')
];

(3)挂载进config：

1
2
3
themeConfig: {
    sidebar: require('./sidebarConf'),
}

至此完整的功能已全部写完， 如果此配置还满足不了你的需求，想配置成多个侧边栏，在每个不同的分类生成对应的自己想要的侧边栏。

生成的效果如下：

本段的参考链接：

我也尝试了按照下面两个链接里的方法，自动生成sidebar，但是并没有生效：

设置侧边栏的标题

不需要在文件中写一级标题，我们可以在Front Matter中设置tittle。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# XXXX.md
---
title: Kaldi声纹识别代码详解|egs/aishell
categories:
 - 声纹识别
tags:
 - Kaldi
publish: true
---

::: tip
尝试添加摘要
:::

<!-- more -->

## 正文的一级标题
（正文）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

参考链接：

参考链接

bug修复

1、标题无法选中的问题：

临时的解决办法：打开node_modules/vuepress-theme-reco/styles/theme.styl文件，然后将h2的样式加上z-index -1，将h3的样式加上z-index -2。

参考案例

vovo-docs

网上的很多案例，讲的都是搭建博客，却没有讲搭建知识库、文档、wiki。我想要的效果是：左边显示多个文档的结构和目录导航，右侧显示单篇文章的目录导航。下面这几个案例，就很不错。

我搜遍了整个 google 和github才找到的。我发现，如果要找源码的话，搜 github 比搜google高效多了。

全网就这一个案例，提供了完整的demo和源码。我fork了一下。

很美观，很规范。

冴羽的TS教程

上面这篇文章，作者@冴羽也是用的vuepress-theme-reco主题，操作步骤写的比较详细。缺点是，没有讲如何自动生成侧边栏（左侧）目录。

项目效果如下：https://ts.yayujs.com/

Apifox的官方文档

做的很漂亮，也是用的vuepress-theme-reco主题，可惜没有开源。

好看的主题推荐

网站性能优化：开启gzip压缩

要知道，网站的打开速度取决于浏览器打开下载的网页文件大小。如果传输的页面内容文件减少，那你网站的打开速度一定会加快。特别是手机端的用户，打开网站速度受限于移动端网络，所以压缩网站页面内容显得至关重要。

在 nginx配置中开启 gzip压缩之后，可以将网页文件至少压缩50%，极大的提高网页的打开速度和网站性能。具体做法如下。

进入服务器的 /usr/local/nginx/conf 目录，并对 nginx.conf 文件进行相关配置。找到#gzip on;这行配置（这行配置是在http层的），并在其下方加入如下内容：

1
2
3
4
5
6
7
8
9
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;

然后重启nginx。

压缩前：

压缩后：

除此之外，我们可以使用站长工具，打开「网页GZIP压缩检测」，查看检测结果：

上图中可以看到， gzip的缩率高达78%，压缩效果显著。

参考链接：

网站性能优化：CDN加速

CDN 加速就是把原服务器上数据复制到其他的诸多服务器上，用户访问时，哪台服务器近就访问那台服务器上的数据。CDN 加速优点是成本低，速度快。适合访问量比较大的网站。而且，如果你的博客所在的主机是限制流量、限制带宽的，那么，一个很好的办法就是把图片、js文件等静态文件部署到其他服务器（即cdn所在的服务器），这样就可以极大地减少主机流量消耗，并提升网站的访问性能。

科普概念的参考链接：

下面来讲一下我的 web.qianguyihao.com 网站是怎么进行CDN加速的。我是把 网站的 js 静态文件部署到了七牛云上。cdn文件的域名采用的是 web.smyhvae.com

七牛云 cdn 优化步骤

在这之前，请先确保你的七牛云账号里，已经新建好了一个自己的「对象存储空间」。

（1）打开七牛云，新建域名：

新建完成后，等待几分钟，就审核通过了：

（2）配置DNS域名解析：

（3）给七牛云上的 web.smyhvae.com 申请 https证书。配置方法详见我的另外一篇文章：

（4）把 vuepress项目编译后的文件（即docs/.vuepress/dist/assets目录下的所有文件） ，挨个上传到七牛云。

文件列表如下：

上传截图如下：

如上图所示，上传的时候，注意路径的前缀。比如， assets/css目录下的文件，前缀需要设置为assets/css/。

优化成果

（1）开启 gzip压缩之后：页面首次渲染完成时间，从55秒变成了10秒。

（2）开启CDN加速之后，页面首次渲染完成时间，从10秒变成了2秒以内。

（3）再加上 VuePress 框架本身支持 pwa本地缓存，二次访问速度贼快。

修改静态资源的访问路径

做了cdn加速之后，所有的静态资源文件，url链接会从 https://web.qianguyihao.com/assets/js/app.53a9121a.js 这样的格式变为https://web.smyhvae.com/assets/js/app.53a9121a.js这样的格式。这里，我们把前者称之为链接1，把后者称之为链接2。

当我们输入 网址 web.qianguyihao.com时，要怎么确保网站加载的是 链接2的资源而非链接1的资源呢？这就要我们继续修改 vuepress 项目的配置。继续往下看。

一开始，我想的是修改 vuepress项目配置文件的base 参数：

如上图所示，当我尝试把 base参数的值改为https://web.smyhvae.com/之后，网站首页的效果符合预期，但点击其他tab之后，效果竟然是这样的：

如上图所示，页面的url里，竟然多了个 https。把这个页面刷新之后，就提示“打不开了”：

那要怎么办呢？可以这样做：

（1）首先，base参数不用改，继续保持 \即可：

（2）其次，打开 vuepress项目编译后的目录web-vuepress/docs/.vuepress/dist，然后手动里面的所有的引用链接，改动内容如下：

改动前：

1
2
3
4
5
href="/assets/

src="/assets/

"url": "assets/

改动后：

1
2
3
4
5
href="https://web.smyhvae.com/assets/

src="https://web.smyhvae.com/assets/

"url": "https://web.smyhvae.com/assets/

差不多有5000个地方要改。改完之后的效果如下：

（3）将改完之后的内容进行发布：

  • 将web-vuepress/docs/.vuepress/dist/assets目录发布到七牛云的cdn加速空间。
  • 将web-vuepress/docs/.vuepress/dist目录发布到阿里云服务器。

发布完成后，就达到了我们的预期效果：

参考链接

使用的是vuepress框架。

vuepress接入广告、统计，写得很清楚。

如果只搭建一个页面，可以参考这个。

Author: 千古壹号
Link: https://www.qianguyihao.com/post/2021-06-16-vuepress/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
toolsvuepress