【教程】使用vuepress构建静态文档网站，并部署到github上-Toy模板网

这篇具有很好参考价值的文章主要介绍了【教程】使用vuepress构建静态文档网站，并部署到github上。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

官网

快速上手 | VuePress (vuejs.org)

构建项目

我们跟着官网的教程先构建一个demo

这里我把 vuepress-starter 这个项目名称换成了 howtolive

mkdir howtolive && cd howtolive

使用你喜欢的包管理器进行初始化

yarn init

【教程】使用vuepress构建静态文档网站，并部署到github上,vue3,github,arcgis
这里的问题可以一路回车

将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

yarn add -D vuepress

注意:如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。
注意：不要在后面添加：# npm install -D vuepress

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

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

如下图所示
【教程】使用vuepress构建静态文档网站，并部署到github上,vue3,github,arcgis

在本地启动服务器

yarn docs:dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

项目启动之后就是这样
【教程】使用vuepress构建静态文档网站，并部署到github上,vue3,github,arcgis

目录结构

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── public (存放网站图标等信息)
│   │   ├── styles 
│   │   │   └── palette.styl （网站自定义样式）
│   │   └── config.js (路由，图标等的配置文件)
│   │ 
│   ├── README.md
│   ├── guide 
│   │   └── README.md (具体文章博客)
│ 
└── package.json

如下图所示
【教程】使用vuepress构建静态文档网站，并部署到github上,vue3,github,arcgis

配置网站标题和图标

配置文件

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

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

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {

    title: 'How to live',
    description: '让我们一起学习如何生活',
    head: [['link', { rel: 'icon', href: `favicon.ico` }]],

}

把ico放在public下面
【教程】使用vuepress构建静态文档网站，并部署到github上,vue3,github,arcgis