普通视图

发现新文章,点击刷新页面。
昨天以前首页

VuePress网站接入Google AdSense广告位

作者 千古壹号
2021年6月30日 19:00

前言

如果你的网站每月有一定的访问流量,可以考虑通过广告变现来获取一些收入。在自媒体的所有收入来源中,广告是最可观的收入方式。

博客网站想要接入广告位时,可以优先考虑接入Google AdSense,这是全球最成熟的广告系统。

本文会完整记录Google AdSense的账号注册、广告配置、收入提现等全流程的操作,希望能给有需要的读者一些帮助。

一、注册 Google AdSense 账号

1、注册账号

进入Google AdSense 官网 https://www.google.com/adsense/,点击右上角的”登录“按钮,登录Google 账号:

登录Google账号之后,然后在上图中,点击“开始使用”,出现如下界面:

继续:(国家选“中国”)

填写邮寄地址:

注意,这里的地址,一定要填写准确。因为以后你会收到 Google官方邮寄过来的 Pin码。

上图中,点击提交之后,会弹出如下界面:

2、将广告代码插入到vuepress网站中

安装上面的步骤注册完成后,我的 广告代码是:

1
<script data-ad-client="ca-pub-1601618516206303" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

回到 VuePress的项目代码里,配置 docs/.vuepress/config.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
head: [
[
"script",
{
"data-ad-client": "ca-pub-1601618516206303",
async: true,
src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
}
]
]
};

然后把上面的代码部署到服务器。打开网站后,就可以看到广告代码生效了:

我这里配置的是二级域名web.qianguyihao.com。但是稍后Google 官方在审核我的网站的时候,审的是一级域名。所以,我还需要在qianguyihao.com里插入广告代码,这部分的操作过程是类似的,读者可以自行研究下。比如说,假如你的网站是 hexo框架搭建的,那可以研究下 hexo配置是怎么加入广告代码。

3、审核网站

将上面的广告代码插入到博客网站之后,我们再回到 Google Adsense官网的首页:

上图中,勾选“我已将代码粘贴到自己的网站”,然后点击“大功告成”按钮,之后会出现下面的弹窗:

上面的这张图表示:我们的广告账户,已经提交申请了。接下来,我们就可以安安静静地等待审核结果的邮件了。

审核时长一般需要一周左右。运气好的话,三天就能通过;运气不好的话,要等两周左右。

补充说明:只能用一级域名(如 qianguyihao.com)申请广告。申请通过后,广告代码可直接用于到该主域名下的任何子域名下, 而不需要对子域名再次审核。

4、审核通过

审核通过后,我们会收到邮件通知:

访问 Google AdSense 官网,会发现首页已经提示可以投放广告了:

20210626_1530

参考链接

二、 广告配置

配置ads.txt文件

在网站的申请通过之后,需要继续配置ads.txt文件。即:先下载ads.txt文件到本地,之后上传到网站域名的根目录下。

20210626_1531

上图中,点击”设置广告“按钮后,会自动跳到如下页面:

20210626_1558

上图中,点击”立即修正“,会出现如下界面:

20210626_1600

上图中,点击”下载“按钮,然后我们需要把下载下来的ads.txt文件,上传到服务器的指定目录下。

比如说,我的博客网站页面,是托管在阿里云服务器的/home/www/hexo的目录下,那我就把ads.txt文件上传到/home/www/hexo目录下就行了。

上传完成后,输入qianguyihao.com/ads.txt,如果成功加载到内容,说明配置成功。效果如下:

ads.txt 文件生效之后,在 AdSense官网的首页,就可以看到下图所示的界面:

20210627_2219

广告出现的位置

Google 广告分为两种:

  • 自动广告:Google 即会自动在所有最佳位置展示广告。这种广告应用之后,我们的网站会出现铺天盖地的广告,很影响阅读体验。所以本文不打算采用这种广告。
  • 在自定义位置插入广告:可以按照个人需要,在网站的指定位置插入广告。正好是本文想要采用的广告。

自动广告:

20210626_1710

在自定义位置插入广告:

20210626_1711

VuePress 添加 Google AdSense

本段讲述如何为 vuepress 站点配置”按广告单元”申请的 adsense 谷歌广告,从而可以在文章的任意位置插入广告。这里采用的技术方案是 vue-google-adsense 依赖库。具体步骤如下。

1、申请广告代码

进入Google AdSense官网:

20210627_2233

上图中,选择“按广告单元”展示,然后选择其中一个展示方式(这里我选的是左边第一个,红框处所示)。

20210627_2234

上图中,选择自己想要的展示尺寸之后,点击“创建”,出现如下界面:

20210627_2235

上图表示,成功申请到了广告代码:

1
2
3
4
5
6
7
8
9
10
11
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Web项目广告位 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1601618516206303"
data-ad-slot="1053166290"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

记下上方广告代码中的 data-ad-client 和 data-ad-slot,稍后要用到。

2、安装 vue-google-adsense

(1)在项目的根目录下,执行如下命令,安装 vue-google-adsense:

1
npm i --save vue-script2 vue-google-adsense

(2)在docs/.vuepress目录下,新建文件enhanceApp.js,在这文件中添加如下内容,载入vue-google-adsense:

1
2
3
4
5
6
7
import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

3、在文章内插入 AdSense 广告

编辑想要插入广告的 markdown 文档,在合适的位置插入如下代码即可:

1
2
3
4
<InArticleAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXX">
</InArticleAdsense>

上面的代码中,第一行和第四行是固定的。第二行填的是你的ca-pu-id(发布商ID),第三行填的是你的slot_id(客户ID),这两行内容,在我们刚刚申请到的广告代码中可以获取。

配置完成后,稍等大概一个小时,就可以在我们的网站上看到广告投放了:

20210627_2331

上图中,用箭头处围起来的地方,就是我们投放的广告位,可以看到,广告已经成功生效了。我在对应的 markdown 文件中,是这样写的:

20210627_2346

大功告成。

4、自定义广告组件

为了方便文档的书写,以及方便广告的管理,建议将广告代码进一步封装为广告位组件。

我们可以定义多个广告位组件, 每个广告位组件唯一对应 adsense 广告的 1 个 slotId。这样就可以把 data-ad-client 和 data-ad-slot 的取值都封装到组件中。

当站点申请了很多的 slotId 时,通过”自定义广告位组件”的方法实现插入广告, 管理或修改广告数据会非常方便。

具体操作步骤如下。

(1)创建 vue 组件:

创建目录docs/.vuepress/components,在 components 目录下新建文件,比如ArticleTopAd.vue,在里面写入如下内容:

1
2
3
4
5
6
7
<template>
<InArticleAdsense data-ad-client="ca-pub-1601618516206303" data-ad-slot="1053166290"></InArticleAdsense>
</template>

<script>
export default {};
</script>

上面的代码中,需要将 data-ad-client 和 data-ad-slot 的参数值替换为你自己的实际取值。

(2)插入广告:

在md文档的对应广告位处, 注入广告位组件 ArticleTopAd 即可:

1
2
3
4
5
6
7
# js 模板引擎 mustache 用法

<ArticleTopAd></ArticleTopAd>

## 二级标题

### 三级标题

参考链接

设置收款方式

当收益达到100$之后就可以提现了。可以使用招商银行进行电汇收款。也就是说,办一张招行一卡通就可以直接收Google的外汇(美元), 然后一键换汇为人民币。我们来详细看看,具体要怎么操作。

验证身份 & 验证邮寄地址

大概过了一个月之后,我的 Google AdSense收入达到了10美元,所以首页出现了这么个提示,让我验证地址:

20211029_1621

上图中,点击「操作」,出现了如下界面:

20211029_1627

上图中,可以看出:

(1)当您的收入达到进行验证所需的最低限额时,Google官方会将个人识别码(PIN 码)邮寄到您的付款地址。

(2)自 PIN 码生成之日算起,您可以在 4 个月内将该码输入帐号。如果您在 4 个月后还未输入该码,我们会停止在您的页面上展示广告。

(3)如果幸运的话可能会收到pin码,当然也可能收不到。

详情可查看如下链接:

上面这个链接里的内容,我截图存了个档:

20211029_1637_2

付款最低限额

关于付款最低限额相关的信息,详情可以看这个链接:

也就是说,收入达到10美元之后,需要我们验证邮寄地址;收入达到100美元之后,就可以开始提现了。指日可待。

上面这个链接里的内容,我也截图存档:

20211029_1638_2

参考链接

参考链接

VuePress+阿里云搭建在线知识库

作者 千古壹号
2021年6月16日 19:00

前言

开发时间

  • 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接入广告、统计,写得很清楚。

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

❌
❌