基于reco搭建博客记录

2022/10/16 blog

# 介绍

在之前我是使用Vdoing主题进行博客的搭建,现在切换为reco,以下内容为我的搭建记录。
想参考Vdoing搭建的见: 基于Vdoing博客搭建记录

# 安装

  1. 安装必备软件
    • nodejs
    • git
  2. 创建一个文件夹
  3. 使用包管理初始化
    yarn init # npm init
    
  4. 安装VuePress
    yarn add -D vuepress # npm install -D vuepress
    
  5. package.json 中添加一些 scripts
    {
        "scripts": {
            "dev": "vuepress dev docs",
            "build": "vuepress build docs"
        }
    }
    
  6. 安装主题
    yarn add vuepress-theme-reco    # npm install vuepress-theme-reco --save-dev
    
  7. 引用主题
    // .vuepress/config.js
    module.exports = {
        theme: 'reco'
    }  
    

目录结构参考官方文档目录结构 (opens new window)
我的博客所有个性化设置基本全部参考reco的使用文档。你可以根据你自己的喜好参考文档进行修改。文档地址 (opens new window)

# 个性化

这里是我个人的一些修改和自动化脚本。

  • 自动生成侧边栏 在Vdoing主体中内置了自动生成侧边栏功能,但是reco没有,因此我自己写了一个python脚本在每次推送博客的时候自动根据文章的目录生成侧边栏。具体实现参考:自动添加侧边栏

  • 自动添加文章永久链接 reco为文章自动生成的链接是文章的名字,这回出现一些中文的链接,不利于SEO。因此,我写了一个python脚本用于自动生成6位十六进制格式的永久链接,同时会自动根据文章所在目录设置分类和标签。具体实现参考:自动生成文章永久链接

  • github自动部署以及定时百度链接推送 为了简化每一次的博客更新流程,我使用了GitHub Actions。这样我每次更新完博客,只需要将其推送到GitHub,剩下的编译、部署就交给GitHub去完成。具体实现可参考Vdoing主题作者的文章:GitHub Actions 实现自动部署静态博客 (opens new window)GitHub Actions 定时运行代码:每天定时百度链接推送 (opens new window)