超级详细的手动构建一个VuePress站点 以及打开PWA和自动部署的方法

五一之前，我想写一篇关于Vuepress的文章。结果，我的朋友结婚了，走了。

记得看最后的注意事项！

Vuepress简介

官方网站：https://vuepress.vuejs.org/

和hexo类似，极简静态网站生成器不能用来写技术文档。当然，建立博客不是问题。

Vuepress功能

响应式，你还可以定制类似hexo内置降价的主题(添加了一些扩展)，你可以使用Vue组件Google Analytics集成PWA自动生成Service Worker快速入门

装置

初始化项目

纱线初始化-y#或npm初始化-y安装vuepress

纱线添加-D vu press #或npm安装-D vu press在全球范围内安装vu press

纱全局添加vuepress #或NPM install-g vu press创建一个新的docs文件夹

mkdir文档设置下的Package.json

{ ' scripts ' : { ' docs : dev ' : ' vue press dev docs '，' docs : build ' : ' vue press build docs ' } }

纱线docs:dev #或：npm run docs:dev是运行的开发环境，可以直接在docs文件下写文章，打开http://localhost 33608080/进行预览。

结构

生成一个静态HTML文件，该文件将在。默认情况下，vu press/dist文件夹

纱线文档：构建#或：npm运行文档：构建基本配置

在下创建一个新的config.js。vuepress目录，并导出一个对象

有些配置可以参考官方文档，这里我配置了常用的和必须配置的

网站信息

module.exports={title: '游魂的文档'，description : '文档库'，head: [['link '，{rel3360' icon '，href : `/faviicon . ico ` }]，]，}导航栏配置

模块。导出={ theme config : { nav :[{text: '主页'，link: '/' }，{text: '前端规范'，link3360'/frontend/'}，{text: '开发环境'，Link:'/development/'}，{ text : '学习文档'，link: '/notes/' }，{ text 3: '游魂博客'，link

侧边栏配置

那个。md扩展名可以省略，以/结尾的路径将被视为*/readme.md。

模块。导出={ themeconfig : { sidbar : { '/frontend/' : gensidarconfig('前端开发规范')，}}上面封装的gensidarconfig函数

函数genSidebarConfig(title){ return[{ title，collapsable: false，children: [' '，' html-standard '，' css-standard '，' js-standard '，Git-standard'] }]支持侧边栏分组(可用于对博客文章进行分类)。collapsable是当前分组是否被展开。

module . exports={ theme config : { sidbar : } '/note ' :[{ title : '前端'，collapsable: true，Children :['/Notes/frontEnd/vuejs组件编码规范'，'/notes/frontEnd/vue-cli脚手架快速安装项目'，'/Notes/frontEnd/vue-CLI对插槽和插槽范围的深入了解'，/Notes/frontEnd/web pack Introduction '，'

默认主题修改

主题颜色修改

中创建一个override.styl文件。vuepress目录

$ accept color=# 3ea f7c//主题颜色$textColor=#2c3e50 //文本颜色$ border color=# EAE ef//边框颜色$codeBgColor=#282c34 //代码背景颜色自定义页面类

有时候需要对不同的页面应用不同的css，可以先在页面中声明

-page class :自定义-page-class-然后用override.styl编写。特定页面的主题-容器.自定义-页面-类{/* CSS */} pwa设置

将serviceWorker设置为true，然后提供清单和图标。请参考我之前的《PWA介绍及快速上手搭建一个PWA应用》

module . exports={ head :[' link '，{rel:' icon '，href : `/favicon.ico `}]，//add manifest.json ['link '，{rel:' manifest '，Href :'/manifest.json'}]，]，serviceworker : true，}联机部署

设置基本路径

在config.js中设置base例如，如果要在https://foo.github.io中部署，将base设置为/，而base默认设置为/所以如果要在https://foo.github.io/bar/,部署就不需要设置，那么base应该设置为'/bar/'

模块。exports={base:'/documents/'，} base将自动作为前缀插入以/开头的其他选项的所有链接中，因此您只需指定一次。

构建和自动化部署

您可以使用gitHub的页面或编码的页面，也可以在自己的服务器上构建它。只需将dist文件夹的内容提交给git或上传到服务器

纱线docs:build #或：npm run docs:build还可以获取脚本，设置持续集成，并在每次推送代码时自动运行脚本。

部署. sh

#!/usr/bin/env sh#确保脚本抛出遇到的错误set -e#生成静态文件npm运行docs:build#输入生成的文件夹cd docs/。vupress/dist #如果发布到自定义域名# Echo ' www . example.com ' cname git init git add-agit commit-m ' deploy ' #如果发布到https://username . github . io # git push-f[email protected]: username/username . github . io . git master #如果发布到https://USERNAME.github.io/REPOgit, push-f[email protected]3: username/repo . git master 3360 GH-pages CD-preventures(pit)

将所有要引用的资源放在。vuepress目录。将独立域名绑定到git仓库后，记得修改基本路径，设置侧边栏默认自动生成上一个/下一个链接。设置侧边栏以自动生成侧边栏来覆盖侧边栏分组。设置PWA。记得打开SSL。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。