前言
开发时间
- 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是不错的选择。
·
阿里的蚂蚁金服团队出品，几乎没有学习成本。如果想搭建一个公开的知识库，但又不想折腾技术，语雀是首选。
知识库（技术平台）
在技术领域，现在流行的知识库平台主要是这四个：（颜值都不错）
GitBook分为两种：一种是开源的 GitBook，另一种是 GitBook.com。开源的GitBook 自从2018年之后，官方就不再维护了。所以最佳选择是 GitBook.com。
优点：GitBook.com几乎没有操作成本，直接导入 md 文件，或者导入 GitHub项目，就能生成知识库，而且可以绑定自定义域名。在所有技术类知识库平台中，GitBook.com的的颜值是最为美观的（至少我认为如此），目录结构的样式深得我心。
缺点：无法自定义配置（只能按官方的模板来）、国内的访问速度很慢（因为页面只能托管在 GitBook.com，不能托管在私有服务器）、无法接入广告位。
操作成本很低，配置也简单，支持接入广告位。但对 SEO 不友好。总的来说，适合做轻量级的知识库。
属于 hugo博客的一种主题，样式美观。但 hugo-book 才刚推出没多久，生态不成熟，要踩的坑也不少。
尤雨溪大大推出的平台。
优点：支持自定义的配置非常多，甚至支持插入自定义的 JS 代码。渲染性能好、SEO友好、支持接入广告位。
缺点：官方文档写的很烂。上手门槛较高，需要自己花很多时间折腾。
总结：
没有最好的知识库平台，只有最合适的。
最终，我选定了 VuePress 作为我的前端教程的知识库平台。因为 VuePress 具有非常好的加载性能和搜索引擎优化（SEO），也支持接入广告位，满足我的需求。
VuePress官网对几个主流的平台也做了对比：
一、本地安装 VuePress 环境
1、安装 git 环境
2、安装Node.js环境
3、安装 VuePress
安装 VuePress：
4、初始化项目
（1）新建文件夹blog：
（2）初始化项目：
初始化完成后，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"
}
|
上方内容的意思是：
（3）新增.gitignore文件，将默认的临时目录和缓存目录添加到这个文件中：
1
2
3
| node_modules
.temp
.cache
|
5、创建第一篇文档
（1）新建docs文件夹，这里面可以存放我们写的.md类型的文章以及.vuepress相关的配置：
（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文件夹：
这个文件存放的是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接入广告、统计，写得很清楚。
如果只搭建一个页面，可以参考这个。
登录
