资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/超详细动手搭建一个Vuepress站点及开启PWA与自动部署

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

zhoutk / 694人阅读

摘要：五一之前就想写一篇关于的文章结果朋友结婚就不了了之了。记得最后一定要看注意事项更新仓库介绍官网类似一个极简的静态网站生成器用来写技术文档不能在爽。当然搭建成博客也不成问题。构建与自动部署用的或者的都可以也可以搭建在自己的服务器上。

五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。
记得最后一定要看注意事项！

更新：coding仓库：https://git.dev.tencent.com/y...

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文件,默认会在 .vuepress/dist 文件夹下

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

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

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

网站信息 
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" }
        ]
      }
    ]
  }
}

如图：

侧边栏配置

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

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

上面封装的genSidebarConfig函数

function genSidebarConfig(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如何挂载磁盘",
          ]
        },
      ]
    }
  }
}

如图：

默认主题修改 主题色修改

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

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
自定义页面类

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

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

然后在override.styl中书写

.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,
}
部署上线 设置基础路径

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

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

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

构建与自动部署

用gitHub的pages或者coding的pages都可以,也可以搭建在自己的服务器上。
将dist文件夹中的内容提交到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" > CNAME

git init
git add -A
git 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-pages

cd -
注意事项(坑)

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

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

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

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

设置PWA记得开启SSL

超融合服务器 专线服务 超详细教你搭建云免服务器 超详细教你搭建云免流服务器 iis搭建站点与域名 站点开启

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8983.html

相关文章

  • 从今天开始，拿起VuePress打造属于自己的专属博客

    摘要：故九万里，则风斯在下矣，而后乃今培风背负青天，而莫之夭阏者，而后乃今将图南。这里是文件的内容部分最后更新时间最后更新时间默认不开启，它是基于提交的时间戳，所以我们的静态站点是需要通过的仓库进行管理的，并且它是按的时间来计算的。VuePress(0.x版本) 本blog配套了一个基于 VuePress 的一个简单的配置案例，此配置案例包含了本blog绝大部分配置案例，更多详情请移步这里VueP...

    dantezhao 评论0 收藏0

  • 读 VuePress（四）插件机制的设计

    前言 从 9 月份开始，vuepress 源码进行了重新设计和拆分。先是开了个 next 分支，后来又合并到 master 分支，为即将发布的 1.x 版本做准备。 最主要的变化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式来支撑 vuepress 的运作，这一点很像 webpack。 具体架构如下： showImg(https://user-gold-cdn.xitu.io/2019...

    April 评论0 收藏0

  • 用vuepress搭建一个够自己用的博客(带评论功能)

    摘要：那么我们如何在博客中实现这个功能呢，其实很简单，首先修改我们的文件介绍正在使用的构造函数附加到根实例的一些选项当前应用的路由实例站点元数据对的判断是防止编译的时候报错然后新建一个的文件取消默认的复制事件作者静水深流原文著作权归作者所有。 原文博客 闲扯 很久以前，自己拥有一个用hexo搭建的静态博客网站，记得当时为了把它搞出来，废了不少劲，然后后来又断断续续更改过一些配置和样式，但是因...

    thekingisalwaysluc 评论0 收藏0

  • 用vuepress搭建一个够自己用的博客

    原文博客 闲扯 很久以前，自己拥有一个用hexo搭建的静态博客网站:ox:，记得当时为了把它搞出来，废了不少劲:anger:，然后后来又断断续续更改过一些配置和样式，但是因为感觉各种麻烦，所以就放在github上积累和很多的尘土:cupid:，到现在也懒得在打扫了（其实是好久不用，有点忘了怎么用了:-1::poop:），前段时间在百度统计上看了看那个静态网站的访问人数，发现已经很久很久没人访问过了...

    Forelax 评论0 收藏0

  • 前端自学笔记 - 第二篇(vuePress自动部署 & 后台项目自学)

    摘要：今天部署好了项目，现在写好了博客页面，只要一提交，会自动打包并且部署如果部署失败，还会发送邮件提醒。但今天为了自动化部署项目，挂了三四十次了，真是惨不忍睹。。。而这第二个项目，将会是第一个的深入。 长期更新前端自学笔记，欢迎关注 前端自学笔记 - 第一篇(nginx/flutter/后台系统/vuepress博客） 一、jenkins自动部署vuePress博客项目 自动化部署项目de...

    zzzmh 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhoutk

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<