VuePress + GitHub Pages 生成静态网站

文章目录

一、环境
二、配置
三、部署（使用 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: true
heroImage: /hero.png
actionText: 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 © 2018-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 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:USERNAME/USERNAME.github.io.git master# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pagescd –

设置package.json

{"scripts": {"deploy": "bash deploy.sh"},
}

运行 npm run deploy 即可自动构建部署到github上