【VuePress】快速使用VuePress创建StaticWeb，并部署到GithubPages
快速使用VuePress创建StaticWeb，并部署到GithubPages
- 1. 全局安装（试玩专用）
- 2. 在项目上添加（干大事从这开始）
- 2.1 在现有项目上添加
- 2.1 新建项目并添加
- 2.1.1 新建项目之后
- 2.1.2 修改配置文件
- 2.1.3 部署到 Github Pages
VuePress是一个非常简单易用的静态网站生成器，官方贴心地提供了两种快速入手的方法：
- 全局安装：试玩专用；
- 在项目上添加：干大事必备（想认真搭web的直接跳到这）
两种方法不巧我都试了，下面为大家简单地介绍一下。
1. 全局安装（试玩专用）
参考vuepress-快速入手，在控制台下进行全局安装。
这里注意官方提示：
如果你只是想尝试一下 VuePress，你可以全局安装它：
这句话的意思是：
只使用这种办法的话，你什么都干不了；
如果你想要认真建web，请使用第二种办法。
但是它给了办法，咱就先试一下：
# 安装
yarn global add vuepress # 或者：npm install -g vuepress
# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
# 开始写作
vuepress dev .
# 构建静态文件
vuepress build .
运行成功后提示：
success [00:56:14] Build de40f6 finished in 6825 ms!
> VuePress dev server listening at http://localhost:8080/
点击打开：http://localhost:8080/
vuepress全局安装效果如上，没有然后。
2. 在项目上添加（干大事从这开始）
参考vuepress-快速入手，在现有项目上进行添加的步骤：
# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 开始写作
npx vuepress dev docs
2.1 在现有项目上添加
天真无邪的我直接在自己的项目上添加了它，然后付出了惨痛的代价。
其实完全没必要在一个复杂项目上添加VuePress，因为我们的目的是把它部署到GitHub Pages 上去，跟别的东西都没有关系。
总之，新手不推荐在复杂项目上添加VuePress。
参考阅读：GitHub Pages-官方英文文档
2.1 新建项目并添加
-
打开IDEA，建一个vue项目；
-
阅读：一个成功大佬的自述
照着大佬的步骤来做，基本上花一些时间就能在本地建出成果来。
这个步骤可以说是网上最详尽的一版，不出错的话，成功率还蛮高的。
但是最后我还是为我的粗心交了学费。
2.1.1 新建项目之后
//安装vuepress
npm install -D vuepress // 或者 yarn add -D vuepress
// 在项目根目录下添加.\docs
mkdir docs
// 新建一个md文件
echo "# Hello VuePress!" > docs/README.md
在 package.json 中添加脚本，并运行。
// package.json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
运行以下命令查看效果：
// 本地运行
npm run docs:dev
// 打包生成静态的HTML文件
npm run docs:build
2.1.2 修改配置文件
首先照着官网核对一下项目目录：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
VuePress 网站必要的配置文件是 .vuepress/config.js。
网上提供很多写法，这里分享一下我自己的。
// docs/.vuepress/config.js
module.exports = {
title: 'title',
description: 'description',
base: '/vuepress-master/', // 设置站点根npm run docs:dev路径
head: [
['link', {
rel: 'icon',
href: `/favicon.ico`
}]
],
themeConfig : {
logo: '/logo.png', //顶部导航栏左上角ico显示
nav : [
{ text: '菜单1', link: '/menu1' },
{ text: '菜单2', link: '/menu2' }
],
sidebar: { //这里抄的网上，写法与官网不同
'/' : [
{
title: '主页', // 必要的
path: '/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 2, // 可选的, 默认值是 1
},
{
title: '菜单1', // 必要的
path: 'menu1', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 2, // 可选的, 默认值是 1
},
{
title: '菜单2', // 必要的
path: 'menu2', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 2, // 可选的, 默认值是 1
}
]
}
},
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
smoothScroll: true
}
建立对应的md文档进行填写。
2.1.3 部署到 Github Pages
-
下载 gh-pages 包
npm install -D gh-pages -
在 package.json 文件中添加脚本命令
"scripts": { "deploy": "gh-pages -d docs/.vuepress/dist", //注意路径，要写自己配置的dist路径 "deploy:build": "npm run docs:build && gh-pages -d docs/.vuepress/dist" } -
打包并推送到 gh-pages 分支
//先执行一下“ vuepress build .”这条命令打包更顺利 npm run deploy:build成功后提示：
success Generated static files in docs\.vuepress\dist. Published -
正确输入发布出去的网址
我的格式：https://yourname.github.io/repo/
大佬的格式：https://yourname/github.io/repo/
于是最后我经历了一个多小时找不到网址的悲伤o(TヘTo)这里注意：/repo/是config.js里/base/的值，可以是’/’
我的成果物：vuepress生成的系统帮助文档