VuePress+Gitee|搭建静态博客

2020-12-19 本文已影响0人黑白格_0ca6

不使用Hexo的原因

主要还是自己水平太菜了，想快速发布博客并方便自己使用，但是第三方模板不配有侧边栏和本地搜索，自由度太高，难以驾驭。

基础搭建

本文基于Windows系统，使用vuepress-theme-reco主题进行配置，代码块第一行表示写入的文件

准备材料

npm
Gitee仓库，且已配置SSH公钥

本地搭建

项目初始化。

新建文件夹用于存放博客：D:\Blog\Test，在当前目录下打开cmd终端：

# cmd
npm init # 回车表示确认
npm install -D vuepress
mkdir docs && echo '# TEST' > docs/README.md # 创建首页展示页，存放于`\docs`目录下
vuepress dev docs # 查看初始效果

初始效果

右侧的搜索框是可用的，默认主体已集成了本地搜索功能
docs目录下的README.md表示主页展示

务必记住文件路径对应的路由，以后出现链接进入404页面的问题，通常是由于文件夹下没有README.md文件

Vuepress默认路由

我们将vuepress dev docs集成在package.json脚本中，build用于生成page部署的静态文件，也一并写好

# package.json
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

以后本地查看为npm run dev，静态文件生成npm run build

修改配置

安装vuepress-theme-reco主题：

# cmd
npm install vuepress-theme-reco --save-dev

在config.js中修改主题：

# cmd
cd docs && mkdir .vuepress
cd .vuepress && cd.> config.js

打开config.js并写入：

# config.js
module.exports = {
  theme: 'reco'
}

查看本地效果npm run dev：

reco主题

多了暗黑模式调节等细节

配置首页，修改Front Matter

在docs\.vuepress目录下新建public目录，放入sunset.jpg图片（自定义），其他需要图片路径的地方也这样操作。在docs\README.md的顶部添加：

---
home: true # 展示首页
heroImage: /sunset.jpg # 正中间的头像
heroImageStyle: { # 图片调整
  maxHeight: '200px',
  display: block,
  margin: '6rem auto 1.5rem',
  borderRadius: '50%',
  boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
heroText: Lambda Go # 标题
# tagline: 路漫漫其修远兮，吾将上下而求索
# bgImage: '/bg.png'
bgImageStyle: { # 首页背景图片高度
  height: '350px'
}
---

首页配置

设置导航栏

注意是在config.js的module.exports中进行修改！

# config.js
module.exports = {
    themeConfig: {
        logo: '/home.png', // 顶端导航图标
        nav: [
            { text: 'Home', link: '/', icon: 'reco-home' },
            { text: 'TimeLine', link: '/timeline/', icon: 'reco-date' },
            { text: 'Contact',  icon: 'reco-message',
                items: [
                { text: 'Gitee', link: 'https://gitee.com/zhouwenjun2020'},
                { text: '简书', link: 'https://www.jianshu.com/u/5b81987c1870'},
                ]
            }
          ],

        // 博客配置
        blogConfig: {
            category: {
                location: 2,     // 在导航栏菜单中所占的位置，默认2
                text: 'Category' // 默认文案
              },
            tag: {
                location: 3,     // 在导航栏菜单中所占的位置，默认3
                text: 'Tag'      // 默认文案
              },
        },
    },
  }

nav和blogConfig都可以设置导航栏，nav是Vuepress的接口，blogConfig是本主题的接口，以后考虑合并设置，现在不懂前端知识...
由于目前还没有写文章，因此没有显示Category栏
Tag栏有默认标签All，因此即便没有Tag，他还是存在的
icon只能填写本主题已集成的图标，在官方说明文档可以查看相关介绍：
添加导航栏

设置侧边栏

首先创建博客文件，在docs目录下新建Speaker目录，并创建好XXXX.md文件，注意：不需要在文件中写一级标题，我们会在Front Matter中设置tittle，如：

# XXXX.md
---
title: Kaldi声纹识别代码详解|egs/aishell
categories:
 - 声纹识别
tags:
 - Kaldi
publish: true
---

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

<!-- more -->

## stage0 数据准备
（正文）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

该主题中，categories和tags必须用这样的方式去写
:::是md支持的语法，更多请参考如下文档
注意下面需要用more进行分隔

下面为该文档创建侧边栏，依旧在config.js中修改

# config.js
module.exports = {
    themeConfig: {
        // 侧边栏
        sidebar: 'auto',
        sidebarDepth: 2,
        subSidebar: 'auto', //在所有页面中启用自动生成子侧边栏，原sidebar仍然兼容
    },
  }

没有做过多的修改，设置为自动，以后再调整
此时导航栏的Category栏已经显示出来，且有“声纹识别”分支，同样的，Tag也多了“Kaldi”标签
从分类栏进入

侧边栏get

现在我们点击浏览器的后退，只会出现404页面，待完善，应该是缺少README.md文件，且最好直接设置永久链接

Page服务部署

我使用的是项目页面模式，并不是直接使用io结尾的链接，确保我们已经创建仓库，如：git@gitee.com:zhouwenjun2020/my-vue.git

本地配置修改

# config.js
module.exports = {
    // 部署
    base: '/my-vue/',
  }

base对应仓库名就行，注意两侧均有/

上传到仓库

为了方便，我们写一个bat脚本，像是Vuepress官方提供的deploy.sh脚本一样，在Test目录下新建deploy.bat：

# deploy.bat
call npm run build # 生成静态文件
call cd docs/.vuepress/dist
call git init
call git add -A
call git commit -m 'deploy'
call git push -f git@gitee.com:zhouwenjun2020/my-vue.git master:gh-pages

因为调用的不是cmd内部命令，所以在前面都加上call关键词
在cmd中直接运行deploy.bat

去Gitee仓库手动更新

没错，Github可以自动更新，但Gitee不来塞！
点击上方的服务——Gitee Pages——选择分支：gh-pages——更新——点击网页后刷新一下（Gitee有时候抽风不更新）

目前只是最基本的设置，以后再慢慢改进

优化进阶

本节开始，我们将主题转移到vuepress-theme-vdoing，这里的结构更加完整，便于学习Vuepress。

基本框架

.
├── docs
│   ├── .vuepress (可选的)存放全局的配置、组件、静态资源等
│   │   ├── components (可选的)该目录中的 Vue 组件将会被自动注册为全局组件
│   │   ├── theme (可选的)用于存放本地主题
│   │   │   └── Layout.vue
│   │   ├── public (可选的)静态资源目录
│   │   ├── styles (可选的)用于存放样式相关的文件
│   │   │   ├── index.styl 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
│   │   │   └── palette.styl 用于重写默认颜色常量，或者设置新的 stylus 颜色常量
│   │   ├── config (可选的)当config.js里面内容太多时，可以把每一项配置都分割成单独的文件存放到config文件夹
│   │   ├── config.js 全局配置文件
│   │ 
│   ├── guide 一般用户都在这个目录下创建网站指南，当然你可以不用
│   │   └── README.md 指南里面的具体内容，内容使用markdown书写
│   ├── life（自定义举例用）
│   │   └── life01.md
│   │   └── life02.md
│   │   └── life03.md
│   │   └── README.md
│   ├── study（自定义举例用）
│   │   └── english
│   │   │   └── english01.md
│   │   │   └── english02.md
│   │   │   └── english3.md
│   │   └── math
│   │   │   └── math01.md
│   │   │   └── math02.md
│   │   │   └── math3.md
│   ├── README.md
│ 
└── package.json