超详细!动手搭建一个Vuepress站点及开启PWA与自动部署

记得最后一定要看注意事项!

▌Vuepress介绍

官网:https://vuepress.vuejs.org/

类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

Vuepress特点

响应式,也可以自定义主题与hexo类似

内置markdown(还增加了一些扩展),并且可以在其使用Vue组件

Google Analytics 集成

PWA 自动生成Service Worker

▌快速上手

安装

初始化项目

yarn init-y# 或者 npm init-y

安装vuepress

yarn add-D vuepress# 或者 npm install-D vuepress

全局安装vuepress

yarn global add vuepress# 或者 npm install-g vuepress

新建一个docs文件夹

mkdir docs

设置下package.json

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

▌写作

yarn docs:dev # 或者:npm run docs:dev

也就是运行开发环境,直接去docs文件下书写文章就可以,打开http://localhost:8080/可以预览

▌构建

build生成静态的HTML文件,默认会在文件夹下

yarn docs:build # 或者:npm run docs:build▌基本配置

在目录下新建一个,他导出一个对象

一些配置可以参考官方文档,这里我配置常用及必须配置的

▌网站信息

module.exports={title:'游魂的文档',description:'Document library',head:[['link',{rel:'icon',href:`/favicon.ico`}],],}

▌导航栏配置

module.exports={themeConfig:{nav:[{text:'主页',link:'/'},{text:'前端规范',link:'/frontEnd/'},{text:'开发环境',link:'/development/'},{text:'学习文档',link:'/notes/'},{text:'游魂博客',link:'https://www.iyouhun.com'},// 下拉列表的配置{text:'Languages',items:[{text:'Chinese',link:'/language/chinese'},{text:'English',link:'/language/English'}]}]}}

如图:

▌侧边栏配置

可以省略扩展名,同时以结尾的路径将会被视为

module.exports={themeConfig:{sidebar:{'/frontEnd/':genSidebarConfig('前端开发规范'),}}}

上面封装的函数

functiongenSidebarConfig(title){return[{title,collapsable:false,children:['','html-standard','css-standard','js-standard','git-standard']}]}

支持侧边栏分组(可以用来做博客文章分类) collapsable是当前分组是否展开

module.exports={themeConfig:{sidebar:{'/note':[{title:'前端',collapsable:true,children:['/notes/frontEnd/VueJS组件编码规范','/notes/frontEnd/vue-cli脚手架快速搭建项目','/notes/frontEnd/深入理解vue中的slot与slot-scope','/notes/frontEnd/webpack入门','/notes/frontEnd/PWA介绍及快速上手搭建一个PWA应用',]},{title:'后端',collapsable:true,children:['notes/backEnd/nginx入门','notes/backEnd/CentOS如何挂载磁盘',]},]}}}

如图:

成品图

▌默认主题修改

主题色修改

在目录下的创建一个文件

$accentColor=#3eaf7c// 主题色

$textColor=#2c3e50// 文字颜色

$borderColor=#eaecef// 边框颜色

$codeBgColor=#282c34// 代码背景颜色

有时需要在不同的页面应用不同的css,可以先在该页面中声明

---pageClass:custom-page-class---

然后在中书写

.theme-container.custom-page-class{/* 特定页面的 CSS */}

▌PWA设置

设置serviceWorker为true,然后提供Manifest 和 icons,可以参考我之前的《PWA介绍及快速上手搭建一个PWA应用》

module.exports={head:[['link',{rel:'icon',href:`/favicon.ico`}],//增加manifest.json['link',{rel:'manifest',href:'/manifest.json'}],],serviceWorker:true,}

▌部署上线

设置基础路径

在设置base

例如:你想要部署在https://foo.github.io 那么设置base为,base默认就为,所以可以不用设置

想要部署在https://foo.github.io/bar/,那么应该被设置成

module.exports={base:'/documents/',}

将会自动地作为前缀插入到所有以开始的其他选项的链接中,所以你只需要指定一次。

▌构建与自动部署

用gitHub的pages或者coding的pages都可以,也可以搭建在自己的服务器上。

将文件夹中的内容提交到git上或者上传到服务器就好

yarn docs:build # 或者:npm run docs:build

另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本

deploy.sh

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

▌注意事项(坑)

把你想引用的资源都放在目录下的文件夹

给git仓库绑定了独立域名后,记得修改路径

设置侧边栏分组后默认会自动生成 上/下一篇链接

设置了自动生成侧边栏会把侧边栏分组覆盖掉

设置PWA记得开启SSL

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

-END-

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180523A1XP8U00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券