文章目录
一、环境二、配置三、部署 （使用 Github Pages）VuePress官网
VuePress指南
VuePress：Vue 驱动的静态网站生成器
一、环境
Node.js 版本 >= 8
全局安装 VuePress
npm install -g vuepress
创建项目文件夹，进入项目文件夹，初始化项目
使用 npm init 或 npm init -y（默认yes）
新建docs文件夹
docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹
在 docs 中创建 .vuepress 文件夹
在.vuepress中创建 public 文件夹和 config.js 文件
二、配置
package.json
vuepress dev docs命令运行本地服务，通过访问http://localhost:8080即可预览网站，vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。
config.js中配置网站标题、描述、主题等信息
config.js更多配置
module.exports = {title: '',description: '',head: [ // 注入到当前页面的 HTML <head> 中的标签['link', {rel: 'icon',href: '/favicon.ico'}], ],base: '/',// 这是部署到github相关的配置markdown: {lineNumbers: false // 代码块显示行号},themeConfig: {logo: '/logo.png',// displayAllHeaders: true // 默认值：false,显示所有页面的标题链接nav: [ // 导航栏配置{text: '主页',link: '/'},// {text: 'language',// items: [// { text: 'Chinese', link: '/language/chinese' },// { text: 'Japanese', link: '/language/japanese' }// ]// },{text: '文章',link: '/xxx/xx'},{text: '博客',link: ''},{text: 'GitHub',link: ''}],sidebar: 'auto',// 侧边栏配置sidebarDepth: 2,// 侧边栏显示2级lastUpdated: 'Last Updated',// sidebar: [// '/',// '/page-a',// ['/page-b', 'bbbbbbbbbb'],// ['/page-c', 'cccccccccc'],// {//title: 'Group 1',//// collapsable: false,//children: [// '/page-a',// '/page-b',// '/page-c'//]// },//{//title: 'Group 2',//// collapsable: false,//children: [// '/page-b',// '/page-c'//]// },// ],}};
首页
默认的主题提供了一个首页（Homepage）的布局(用于这个网站的主页)。想要使用它，需要在你的根级 README.md的home: true，然后添加数据。
---home: trueheroImage: /hero.pngactionText: Get Started →actionLink: /guide/features:- title: Simplicity Firstdetails: Minimal setup with markdown-centered project structure helps you focus on writing.- title: Vue-Powereddetails: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.- title: Performantdetails: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.footer: MIT Licensed | Copyright © -present Evan You---
PWA配置
……
完成了基础搭建后，就可以在docs目录下新建 .md 文件写文章了
自定义容器
支持Emoji
Emoji
Badge
内置的组件，你可以在标题中，使用这个组件来为某些 API 添加一些状态：
### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/>
更多配置详情请见VuePress指南
三、部署 （使用 Github Pages）
新建仓库：USERNAME.github.io （USERNAME必须是你 Github 的账号名称）
在项目根目录下创建 deploy.sh 文件，内容如下：
# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run build# 进入生成的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名# echo '' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果你想要部署到 https://USERNAME.github.iogit push -f git@:USERNAME/USERNAME.github.io.git master# 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目# git push -f git@:USERNAME/<REPO>.git master:gh-pagescd –
设置package.json
{"scripts": {"deploy": "bash deploy.sh"},}
运行npm run deploy即可自动构建部署到github上
