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

原创 youhun 教程 前端 222阅读 2018-05-06 16:48:20 举报

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

五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。

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

Vuepress介绍

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

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

Vuepress特点

  • 响应式,也可以自定义主题与hexo类似
  • 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件
  • Google Analytics 集成
  • PWA 自动生成Service Worker

快速上手

安装

初始化项目

安装vuepress

全局安装vuepress

新建一个docs文件夹

设置下package.json

写作

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

构建

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

基本配置

.vuepress目录下新建一个config.js,他导出一个对象

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

网站信息

导航栏配置

如图:

侧边栏配置

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

上面封装的genSidebarConfig函数

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

如图:

成品图

默认主题修改

主题色修改

.vuepress目录下的创建一个override.styl文件

自定义页面类

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

然后在override.styl中书写

PWA设置

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

部署上线

设置基础路径

config.js设置base
例如:你想要部署在https://foo.github.io 那么设置base为/,base默认就为/,所以可以不用设置
想要部署在https://foo.github.io/bar/,那么 base 应该被设置成 "/bar/"

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

构建与自动部署

gitHub的pages或者coding的pages都可以,也可以搭建在自己的服务器上。
dist文件夹中的内容提交到git上或者上传到服务器就好

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

deploy.sh

注意事项(坑)

  • 把你想引用的资源都放在.vuepress目录下的public文件夹
  • 给git仓库绑定了独立域名后,记得修改base路径
  • 设置侧边栏分组后默认会自动生成 上/下一篇链接
  • 设置了自动生成侧边栏会把侧边栏分组覆盖掉
  • 设置PWA记得开启SSL
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复