轩辕李的博客
轩辕李
2021-10-26
目录

基于Vuepress搭建博客

本博客网站系统采用的是Vuepress (opens new window)搭建的，使用了vdoing (opens new window)主题。

拷贝 https://github.com/xugaoyi/vuepress-theme-vdoing.git (opens new window) 下项目之后，主要做了如下的工作。

# 自定义样式

在doc/.vuepress/styles/index.styl文件中新增：

// 去掉了首页的banner
.home-wrapper .banner{
  min-height 0!important
  height 0!important
}
// 增加文章中br的上下间距
p br{
  display: block;
  margin: 10px 0;
  content: " ";
}
// 增加文章中li的上下间距
ul li{
  margin: 3px 0;
}
// 修改demo-block插件的限高
.vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__display{
  max-height:100%!important
}

最后一段css是为了解决vuepress-plugin-demo-block插件的问题：高度最大为400px。主要来自于内置样式：

.vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__display {
    max-height: 400px;
    overflow: auto;
}

这里做一个替换。

# 修改全局配置

在doc/.vuepress/config.ts中修改了相关信息，涉及到locales、themeConfig、author、blogger、social、footer、extendFrontmatter、head等，都需要改为自己的信息。

# 1、插件之vuepress-plugin-comment

vuepress-plugin-comment是评论插件，有了它，博客就可以有评论功能了。
首先申请一个GitHub Application (opens new window)，需要获得clientID和clientSecret，回填到插件配置中。

GitHub Application配置 (opens new window)中要注意Authorization callback URL的填写，我的设置是https://xuanyuanli.cn/ 。如果使用GitHub Page，则需要填写为https://xuanyuanli.github.io/blog/

# 2、配置百度统计

配置百度统计插件vuepress-plugin-baidu-tongji：

[
  'vuepress-plugin-baidu-tongji', // 百度统计
  {
    hm: '31b818a73b8dd8d2f51d66b25da84ead',
  },
],

需要一个百度统计账号，然后在 https://tongji.baidu.com/main/setting/self/home/site/getjs (opens new window) 获得hm代码。

# 3、配置图片放大插件

点击放大图片之后，发现关闭不了。

查看了一下官方文档，发现是往下滑动就会自动关闭图片了。不过默认的滑动距离（scrollOffset）是40，这里改为了0。这样图片关闭就丝滑一些。

[
    'vuepress-plugin-zooming', // 放大图片
    {
        selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
        delay: 300,
        options: {
            margin: 24,
            background: '#25272A',
            scrollOffset: 0,
        },
    },
],

# 4. 开启Babel紧凑模式

文章篇幅太大，会导致如下错误：

[BABEL] Note: The code generator has deoptimised the styling of xx.md as it exceeds the max of 500KB.

开启Babel紧凑模式即可解决此问题。

在项目根目录新建.babelrc文件，并写入内容：

{
  "compact": true
}

Babel的"紧凑模式"（Compact mode）是指生成的转译代码会更小、更精简的一种设置。当启用紧凑模式时，Babel会尽量将转译后的代码压缩为更短、更紧凑的形式，以减小文件大小和优化加载性能。

紧凑模式通过执行以下转换来实现代码的缩减：

  1. 移除不必要的空格和换行符：Babel会删除源代码中的额外空格和换行符，使生成的代码更加紧凑。

  2. 简化标识符：Babel会尽可能地缩短变量和函数的名称，以减小代码的长度。这通常使用一些简化标识符的算法来实现，如短变量名、数字编码等。

  3. 删除冗余的代码：Babel会检测和删除不需要的代码，例如未使用的变量、未被调用的函数等，以减小代码量。

启用紧凑模式可以在一定程度上减小转译后的代码文件的大小，从而提高加载性能和网络传输速度。这对于优化前端应用的性能和用户体验是有帮助的。

# 5. SEO优化

# SiteMap与AutoMeta

添加vuepress-plugin-sitemap (opens new window)和vuepress-plugin-autometa (opens new window)插件。

插件配置：

plugins: <UserPlugins>[
    [
        "sitemap",
        {
            // 配置选项
            "hostname": "https://www.xuanyuanli.cn"
        },
    ],
    [
        'autometa',
        {
            canonical_base: 'https://www.xuanyuanli.cn',
        }
    ],
]

# 不被追踪链接的指令

因为配置了网站的sitemap，所以任何不需要进行外链追踪。

在markdown配置处增加externalLinks的配置：

    markdown: {
        lineNumbers: false,
        extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'], // 提取标题到侧边栏的级别，默认['h2', 'h3']
        // @ts-ignore
        externalLinks: {target: '_blank', rel: 'noopener noreferrer nofollow'}
    },

其中rel:'noopener noreferrer'是默认值，需要添加一个nofollow。

rel 是一种用于HTML链接中的属性设置，用于控制链接在打开新窗口时的行为。

  • noopener 用于防止新打开的窗口可以通过 window.opener 访问到原始页面的引用。这样可以防止恶意网站通过访问 window.opener 来执行一些攻击行为。
  • noreferrer 同样用于防止新窗口可以访问到原始页面的引用，但它还会阻止浏览器发送 Referer 头部信息到新打开的页面。这可以防止新页面获取到原始页面的地址信息。
  • nofollow 是一种指示搜索引擎不要追踪链接的指令。当一个链接使用 nofollow 属性时，搜索引擎会将其忽略，不会将该链接的权重计入到搜索引擎的排名算法中。

# robot.txt

robots.txt（也称为 Robots Exclusion Protocol 或 Robots.txt File）是一个文本文件，用于向搜索引擎和其他网络爬虫指示网站上的哪些页面应该被访问或禁止访问。

当网络爬虫访问一个网站时，它会首先查找并读取该网站的 robots.txt 文件。该文件通常位于网站的根目录下。

在docs/.vuepress/public目录下添加robot.txt文件。内容如下：

User-agent: *

Allow: /

Sitemap: https://www.xuanyuanli.cn/sitemap.xml

# JSON-LD

JSON-LD（JavaScript Object Notation for Linked Data）是一种基于JSON格式的结构化数据表示方法，用于在Web上表示结构化数据和语义信息。它是一种将数据嵌入到Web页面中的方式，使得数据可以被搜索引擎和其他应用程序理解和使用。

需要自定义vuepress-plugin-jsonld (opens new window)插件，加入JSON for Linking Data (opens new window)的支持。

配置：

plugins: <UserPlugins>[
    require('./vuepress-plugin-jsonld')
]

# 站长平台录入

提交网站到站长平台，可以让搜索引擎更快地发现网站，从而提高网站的收录率。

  • 百度站长: https://ziyuan.baidu.com
  • Bing站长: https://www.bing.com/webmasters
  • Google: https://search.google.com/search-console

# 后端服务搭建

# 1.0 GitHub Page

前期我采用了GitHub Page，在.github/workflows下建立或修改ci.yml 1.0 (opens new window)

利用GitHub Action，每次提交main分支的时候会自动构建项目并发布到gh-page分支。注意需要在项目的Secrets--Action中增加ACCESS_TOKEN，ACCESS_TOKEN在https://github.com/settings/tokens 中获得。

# 2.0 使用虚拟主机自建

GitHub Page不利于百度搜索的录入，所以改为了使用自己的域名。
域名申请使用了阿里云，购买域名花费了99。网站搭建选择了虚拟主机，首先是非常便宜，优惠下来一年294元。其次是配置简单，只要把dist文件夹上传到虚拟主机的根目录下，然后配置Nginx，配置HTTPS域名即可。另外，还有一年5G的流量，一般情况下够用了。
虚拟主机的配置主要包括：

  • 域名管理-域名绑定处绑定域名
  • 高级环境设置-Nginx设置，进行如下配置：
    location / {
    try_files $uri $uri/ /index.html;
}

接下来是利用GitHub Action自动推送文章的更新到虚拟主机上。因为虚拟主机只支持ftp的方式登录，所以需要写一个ftp推送脚本 (opens new window)。
ftp脚本中会使用到账户和密码，同样是在Secrets--Action中进行配置。

这次的Action脚本为 ci.yml 2.0 (opens new window)

# 百度推送（可选）

ci.yml的最后一行，还执行了yarn baiduPush任务，任务的具体指令是：

node utils/baiduPush.mjs https://www.xuanyuanli.cn && bash baiduPush.sh

做的主要工作是生成项目所有文章的url到urls.txt文件，然后主动推送到百度搜索中。
感兴趣的同学参考：baiduPush.mjs (opens new window)和baiduPush.sh (opens new window)

# 3.0 使用ECS自建

虚拟主机的优点是便宜、简单，缺点是灵活性较差，不能自建服务，不能完全控制Nginx配置。所以最终还是选择了在ECS上自建服务。

首先购买一个最便宜的ECS（内存不要小于2G，否则Vuepress会构建失败），操作系统选择了CentOS 7.9。

安装Nginx：

yum update -y
yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel geoip-devel 
cd /opt/
wget http://tengine.taobao.org/download/tengine-2.4.1.tar.gz
tar -zxvf tengine-2.4.1.tar.gz
cd tengine-2.4.1
./configure --with-http_v2_module --add-module=./modules/ngx_http_upstream_check_module
make && make install

安装Docker：

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
systemctl enable docker.service
systemctl start docker.service

安装Git，并下载编译blog项目：

yum install -y git
mkdir /workspace
cd /workspace
git clone https://github.com/xuanyuanli/blog.git
cd blog/
sh build.sh
# 如果拉取镜像失败，请使用国内的镜像加速器

配置Nginx，配置文件默认在/usr/local/nginx/conf/nginx.conf，内容为 nginx.conf (opens new window)：

Nginx中配置了SSL证书，阿里云提供了免费的证书，可以在控制台 (opens new window)申请。

启动Nginx：

/usr/local/nginx/sbin/nginx

# 重启的话，使用下面的命令
/usr/local/nginx/sbin/nginx -s reload

这次的Action脚本为 ci.yml 3.0 (opens new window)

# 微信分享

首先需要一个 后端服务 (opens new window)，然后需要一个 前端插件 (opens new window)。

前端插件暂时没有发布到npm，所以需要在config.ts中手动配置：

[
    require('./plugins/vuepress-plugin-wxshare'),
    {
        serverUrl: 'https://www.xuanyuanli.cn/wechat/jsSdkConfig', // 后端服务地址
        host: 'https://www.xuanyuanli.cn', // 域名
        debug: false // 是否开启调试模式
    }
]

注意事项：

  • 一定要微信认证。如果是个人号，参考 https://segmentfault.com/a/1190000043312331 (opens new window)
  • 在接口权限中查看是否有分享权限（设置与开发--接口权限--分享接口--获取“分享到朋友圈”按钮点击状态及自定义分享内容接口）
  • 配置后端服务的IP白名单（设置与开发--基本配置）与JS接口安全域名（设置与开发--公众号设置--功能设置）

# 定制GitHub主页

我的GitHub主页：https://github.com/xuanyuanli (opens new window)

我这个还比较简单，只有自我介绍。要想获得一个漂亮的GitHub主页，参考个性化定制你的 GitHub 首页 (opens new window)

# 图床之PicX

博客中的图片会保存到Github的公共仓库中。

不过先保存再复制链接会有点麻烦，我使用的是PicX (opens new window)在线图床。

只需配置好图床，之后复制图片，复制markdown链接即可。

还支持图片压缩、图片自动重命名、图片水印、图片自动CDN等功能。

# 注意事项

在编写文章的时候，偶尔会出现渲染之后的博客页面空白的现象，这可能是以下情况导致的：

  • 在文章中使用了<或>符号，但他们没有被 ` 包围。失败原因是因为html本身使用了<或>符号，所以会渲染失败。
  • 在文章中使用了{​{ ... }}符号，即便被 ` 包围了，也依然会渲染失败。失败原因是因为vue本身使用了{​{ }}符号来解析变量，所以会渲染失败。解决方法是在{​{之间添加一个空格，这个空格可以是零宽度空格U+200B、零宽度非连接符U+200C等。
    下面演示了这个空格，不过你肉眼看不见它（你可以点击右上角​复制它）：
    ​
编辑 (opens new window)
上次更新: 2025/02/03
关于

←

最近更新
01
Spring Boot版本新特性
09-15
02
Spring框架版本新特性
09-01
03
Spring Boot开发初体验
08-15
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License