超好用的写博客工具VuePress

无涯子 / 2023-05-03 / 原文

VuePress简介

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

快速搭建一个环境

mkdir study && cd study

初始化

npm init

安装本地依赖VuePress

npm install -D vuepress

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

设置package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

启动

npm run docs:dev

VuePress 会在 http://localhost:8080启动一个热重载的开发服务器

基础配置

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Study',
  description: '学习使用VuePress'
}

此时界面类似于：

导航栏设置

修改 config.js:

添加侧边栏

现在我们添加一些 md 文档，目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ blogs
|  	  └─ Dubbo学习总结.md
|	  └─ Zookeeper深入学习.md
└─ package.json

config.js 配置如下:

安装主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec：

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

在 config.js 里引用该主题：

文章信息

---
title: Dubbo学习总结
author: 无涯子
date: '2023-04-27'
---

设置语言

、

开启目录结构

自定义修改样式

.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

部署Github

部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：Study。

在根目录下建立一个脚本文件：deploy.sh

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy Github'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:wyz210052253/Study.git master:pages

cd -

执行脚本：