VuePress 静态网站生成方法步骤

## 安装yarn global add vuepress # 或者：npm install -g vuepress

## 没有项目可以初始化yarn init## 将 VuePress 作为一个本地依赖安装yarn add -D vuepress # 或者：npm install -D vuepress## 新建一个 docs 文件夹mkdir docs## 新建一个 markdown 文件echo # Hello VuePress! > docs/README.md## 开始写作npx vuepress dev docs

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

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

module.exports = { title: 'Hello VuePress', description: 'Just playing around'}

.├─ docs│ └─ .vuepress│   └─ public│     └─ image│        └─ favicon.ico

module.exports = {  head:[    ['link', {rel:'icon', href:'/image/favicon.ico'}]  ]};

module.exports = {  themeConfig: {    nav: [      { text: '主页', link: '/' },      { text: '指南', link: '/guide/' },      {        text: '语言',        items: [          { text: '中文', link: '/language/chinese/' },          { text: 'English', link: '/language/english/' }        ]      },      { text: 'GitHub', link: 'https://github.com' }    ]  }};

---home: trueheroImage: /image/favicon.icoheroText: Hero 标题tagline: Hero 副标题actionText: 快速上手 →actionLink: /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---

module.exports = {  themeConfig: {    sidebar: [      '/',      ['/hello', 'hello page']    ]  }};

module.exports = {  base: '/vuepress-demo/',  };

#!/usr/bin/env bash# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run docs:build# 进入生成的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名# echo 'www.example.com' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pagescd -