超詳細(xì)動(dòng)手搭建一個(gè)Vuepress站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署

zhoutk 發(fā)布于2019-05-29 17:50 / 905人閱讀

摘要：五一之前就想寫一篇關(guān)于的文章結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項(xiàng)更新倉(cāng)庫(kù)介紹官網(wǎng)類似一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站生成器用來(lái)寫技術(shù)文檔不能在爽。當(dāng)然搭建成博客也不成問(wèn)題。構(gòu)建與自動(dòng)部署用的或者的都可以也可以搭建在自己的服務(wù)器上。

五一之前就想寫一篇關(guān)于Vuepress的文章,結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項(xiàng)！

更新：coding倉(cāng)庫(kù)：https://git.dev.tencent.com/y...

Vuepress介紹

官網(wǎng)：https://vuepress.vuejs.org/

類似hexo一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站生成器,用來(lái)寫技術(shù)文檔不能在爽。當(dāng)然搭建成博客也不成問(wèn)題。

Vuepress特點(diǎn)

響應(yīng)式,也可以自定義主題與hexo類似

內(nèi)置markdown(還增加了一些擴(kuò)展),并且可以在其使用Vue組件

Google Analytics 集成

PWA 自動(dòng)生成Service Worker

快速上手 安裝

初始化項(xiàng)目

yarn init -y
# 或者 npm init -y

安裝vuepress

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

全局安裝vuepress

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

新建一個(gè)docs文件夾

mkdir docs

設(shè)置下package.json

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

寫作

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

也就是運(yùn)行開(kāi)發(fā)環(huán)境,直接去docs文件下書寫文章就可以,打開(kāi)http://localhost:8080/可以預(yù)覽

構(gòu)建

build生成靜態(tài)的HTML文件,默認(rèn)會(huì)在 .vuepress/dist 文件夾下

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

基本配置

在 .vuepress目錄下新建一個(gè)config.js,他導(dǎo)出一個(gè)對(duì)象

一些配置可以參考官方文檔,這里我配置常用及必須配置的

網(wǎng)站信息

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

導(dǎo)航欄配置

module.exports = {
  themeConfig: {
    nav: [
      { text: "主頁(yè)", link: "/" },
      { text: "前端規(guī)范", link: "/frontEnd/" },
      { text: "開(kāi)發(fā)環(huán)境", link: "/development/" },
      { text: "學(xué)習(xí)文檔", link: "/notes/" },
      { text: "游魂博客", link: "https://www.iyouhun.com" },
      // 下拉列表的配置
      {
        text: "Languages",
        items: [
          { text: "Chinese", link: "/language/chinese" },
          { text: "English", link: "/language/English" }
        ]
      }
    ]
  }
}

如圖：

側(cè)邊欄配置

可以省略.md擴(kuò)展名,同時(shí)以 / 結(jié)尾的路徑將會(huì)被視為 */README.md

module.exports = {
  themeConfig: {
    sidebar: {
      "/frontEnd/": genSidebarConfig("前端開(kāi)發(fā)規(guī)范"),
    }
  }
}

上面封裝的genSidebarConfig函數(shù)

function genSidebarConfig(title) {
  return [{
    title,
    collapsable: false,
    children: [
      "",
      "html-standard",
      "css-standard",
      "js-standard",
      "git-standard"
    ]
  }]
}

支持側(cè)邊欄分組(可以用來(lái)做博客文章分類) collapsable是當(dāng)前分組是否展開(kāi)

module.exports = {
  themeConfig: {
    sidebar: {
      "/note": [
        {
          title:"前端",
          collapsable: true,
          children:[
            "/notes/frontEnd/VueJS組件編碼規(guī)范",
            "/notes/frontEnd/vue-cli腳手架快速搭建項(xiàng)目",
            "/notes/frontEnd/深入理解vue中的slot與slot-scope",
            "/notes/frontEnd/webpack入門",
            "/notes/frontEnd/PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用",
          ]
        },
        {
          title:"后端",
          collapsable: true,
          children:[
            "notes/backEnd/nginx入門",
            "notes/backEnd/CentOS如何掛載磁盤",
          ]
        },
      ]
    }
  }
}

如圖：

默認(rèn)主題修改 主題色修改

在.vuepress目錄下的創(chuàng)建一個(gè)override.styl文件

$accentColor = #3eaf7c // 主題色
$textColor = #2c3e50 // 文字顏色
$borderColor = #eaecef // 邊框顏色
$codeBgColor = #282c34 // 代碼背景顏色

自定義頁(yè)面類

有時(shí)需要在不同的頁(yè)面應(yīng)用不同的css,可以先在該頁(yè)面中聲明

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

然后在override.styl中書寫

.theme-container.custom-page-class {
  /* 特定頁(yè)面的 CSS */
}

PWA設(shè)置

設(shè)置serviceWorker為true,然后提供Manifest 和 icons,可以參考我之前的《PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用》

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

部署上線 設(shè)置基礎(chǔ)路徑

在config.js設(shè)置base
例如：你想要部署在https://foo.github.io 那么設(shè)置base為/,base默認(rèn)就為/,所以可以不用設(shè)置
想要部署在https://foo.github.io/bar/,那么 base 應(yīng)該被設(shè)置成 "/bar/"

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

base 將會(huì)自動(dòng)地作為前綴插入到所有以 / 開(kāi)始的其他選項(xiàng)的鏈接中,所以你只需要指定一次。

構(gòu)建與自動(dòng)部署

用gitHub的pages或者coding的pages都可以,也可以搭建在自己的服務(wù)器上。
將dist文件夾中的內(nèi)容提交到git上或者上傳到服務(wù)器就好

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

另外可以弄一個(gè)腳本,設(shè)置持續(xù)集成,在每次 push 代碼時(shí)自動(dòng)運(yùn)行腳本

deploy.sh

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo "www.example.com" > CNAME

git init
git add -A
git commit -m "deploy"

# 如果發(fā)布到 https://.github.io
# git push -f git@github.com:/.github.io.git master

# 如果發(fā)布到 https://.github.io/
git push -f git@github.com:/.git master:gh-pages

cd -

注意事項(xiàng)(坑)

把你想引用的資源都放在.vuepress目錄下的public文件夾

給git倉(cāng)庫(kù)綁定了獨(dú)立域名后,記得修改base路徑

設(shè)置側(cè)邊欄分組后默認(rèn)會(huì)自動(dòng)生成上/下一篇鏈接

設(shè)置了自動(dòng)生成側(cè)邊欄會(huì)把側(cè)邊欄分組覆蓋掉

設(shè)置PWA記得開(kāi)啟SSL

GPU云服務(wù)器云服務(wù)器超詳細(xì)教你搭建云免服務(wù)器超詳細(xì)教你搭建云免流服務(wù)器 iis搭建站點(diǎn)與域名站點(diǎn)開(kāi)啟

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/8983.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhoutk

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#萬(wàn)圣節(jié)#hostsailor：羅馬尼亞VPS全場(chǎng)6.5折起，XEN/KVM/OVZ架構(gòu)全有

閱讀 2854·2021-11-02 14:42
EasyUI項(xiàng)目之新書上架、熱門書籍

閱讀 3224·2021-10-08 10:04
Vue:scoped與module的使用與利弊

閱讀 1249·2019-08-30 15:55
webpack4.16壓縮打包

閱讀 1086·2019-08-30 15:54
聊聊sticky定位

閱讀 2379·2019-08-30 15:43
關(guān)于外部樣式表也許你不知道的事

閱讀 1738·2019-08-29 15:18
[譯] 如何運(yùn)用新技術(shù)提升網(wǎng)頁(yè)速度和性能

閱讀 926·2019-08-29 11:11
splice, split, slice 的區(qū)別

閱讀 2429·2019-08-26 13:52

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

超詳細(xì)動(dòng)手搭建一個(gè)Vuepress站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署

相關(guān)文章

**從今天開(kāi)始，拿起VuePress打造屬于自己的專屬博客**

**讀?VuePress（四）插件機(jī)制的設(shè)計(jì)**

**用vuepress搭建一個(gè)夠自己用的博客(帶評(píng)論功能)**

**用vuepress搭建一個(gè)夠自己用的博客**

**前端自學(xué)筆記 - 第二篇(vuePress自動(dòng)部署 & 后臺(tái)項(xiàng)目自學(xué))**

發(fā)表評(píng)論

0條評(píng)論

zhoutk

男|高級(jí)講師

TA的文章

#萬(wàn)圣節(jié)#hostsailor：羅馬尼亞VPS全場(chǎng)6.5折起，XEN/KVM/OVZ架構(gòu)全有

EasyUI項(xiàng)目之新書上架、熱門書籍

Vue:scoped與module的使用與利弊

webpack4.16壓縮打包

聊聊sticky定位

關(guān)于外部樣式表也許你不知道的事

[譯] 如何運(yùn)用新技術(shù)提升網(wǎng)頁(yè)速度和性能

splice, split, slice 的區(qū)別

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

超詳細(xì)動(dòng)手搭建一個(gè)Vuepress站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！