VuePress入门
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
介绍
快速上手
VuePress 1.0: https://v1.vuepress.vuejs.org/zh/guide/getting-started.html
VuePress 2.0: https://vuepress.github.io/zh/guide/getting-started.html#快速上手
初始化工程
1、新建文件夹
新建一个名为 blog-heye 的文件夹，进入到该文件夹目录下
## VuePress 2.0
## 新建文件夹 blog-study
mkdir blog-study && cd blog-study
## 初始化 npm
# npm init -y
yarn init
## 添加依赖 VuePress
# npm install -D vuepress
yarn add -D vuepress@next
## 新建文件夹 docs
mkdir docs
## 创建 markdown 文件
echo '# Hello VuePress!' > docs/README.md
## git忽略提交
echo node_modules >> .gitignore
echo .temp >> .gitignore
echo .cache >> .gitignore
##
# ├─ docs
# │ ├─ .vuepress
# │ │ └─ config.js
# │ └─ README.md
# ├─ .gitignore
# └─ package.json
2、配置 scripts
在 package.json 里的 scripts 中添加如下代码，不需要修改其它代码
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
3、启动测试
输入命令启动项目，在浏览器中访问 http://localhost:8080/即可预览效果
# npm run docs:dev
yarn docs:dev
7、配置首页
打开 README.md，修改为：
---
home: true
heroImage: /hero.png
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
---
heroImage 后面的图片是放在.vuepress/public下面的,自动读取
8、配置路由
// 新建 .vuepress 文件夹
mkdir docs\.vuepress
//在 .vuepress 文件夹下新建 config.js 文件
//config.js 便是一个 Vuepress 网站必要的配置文件，在其中添加如下代码：
module.exports = {
base: '/blog-demo/', //站点的基础路径
title: 'blog-demo', //网站的标题
description: 'Vuepress blog demo' //描述
}
9、配置导航
在.vupress/config.js 文件添加一些导航栏链接：
module.exports = {
themeConfig: {
// 你的GitHub仓库，请正确填写
repo: 'https://github.com/xxxxxxx/blog',
// 自定义仓库链接文字。
repoLabel: 'My GitHub',
nav: [
{ text: 'Home', link: '/' },
{ text: 'FirstBlog', link: '/blog/firstBlog.md' }
]
}
}
在 docs 目录下新建 blog文件夹。
在 blog 目录下创建 /blog/firstBlog.md 作为我们第一篇博客的内容：
# 博客
这里随便写内容了。。。
比如我的就是该页内容
10、加侧边栏
//.vupress/config.js
module.exports = {
themeConfig: {
sidebar: [
["/", "首页"],
["/blog/FirstBlog.md", "我的第一篇博客"],
],
},
};
11 、部署
- 在 github 上新建项目
- 把本地项目 push 到远程仓库
- 修改
.vupress/config.js的仓库目录 base设置为与远程仓库/<REPO>/同名，比如我的远程是blog，本地是blog-heye，就改成 blog。- 根目录下创建一个
deploy.sh文件
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
双击deploy.sh 运行脚本，会自动在我们的 GitHub 仓库中，创建一个名为 gh-pages的分支，而我们要部署到GitHub Pages的正是这个分支。
如果docs/.vuepress/dist已经生成，在 github 上没有找到gh-pages分支，说明提交出错.
修改 deploy.sh 提交地址为 http 格式如下：
git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
- 在
GitHub项目点击Setting按钮，找到GitHub Pages - Source，选择gh-pages分支，点击Save按钮后，静静地等待它部署完成即可。
但是我设置的时候发现已经默认是gh-pages分支了。
主题
Markdown语法: https://v2.vuepress.vuejs.org/zh/guide/markdown.html
VuePress Theme Hope: https://theme-hope.vuejs.press/zh/
vuepress-theme-reco: https://vuepress-theme-reco.recoluan.com/
vuepress-theme-vdoing: https://doc.xugaoyi.com/ https://github.com/xugaoyi/vuepress-theme-vdoing
Vuepress Theme Note: https://jackray-c.github.io/vuepress-theme-note/
yarn global bin
## 查看yarn的目录
yarn global dir
yarn create vuepress-theme-hope my-docs
- VuePress架构: https://v2.vuepress.vuejs.org/zh/advanced/architecture.html
- VuePress插件: https://v2.vuepress.vuejs.org/zh/advanced/plugin.html
- VuePress主题: https://v2.vuepress.vuejs.org/zh/advanced/theme.html
一、创建环境
想要一键部署vuepress，需要以下账号和服务：
Github账号 (https://github.com/)，
阿里云账号，并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/) ，为保证最好的使用体验，请使用Chrome浏览器。开通OSS服务。
未开通阿里云OSS的用户，点击链接 (https://workbench.aliyun.com/product/open?code=oss) 开通OSS服务。OSS开通免费，有一定的免费额度，超过额度之后按量付费。
————————————————
版权声明：本文为CSDN博主「萌褚」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60028455/article/details/125083183