超詳細動手搭建一個Vuepress站點及開啟PWA與自動部署

zhoutk 發布于2019-05-29 17:50 / 832人閱讀

摘要：五一之前就想寫一篇關于的文章結果朋友結婚就不了了之了。記得最后一定要看注意事項更新倉庫介紹官網類似一個極簡的靜態網站生成器用來寫技術文檔不能在爽。當然搭建成博客也不成問題。構建與自動部署用的或者的都可以也可以搭建在自己的服務器上。

五一之前就想寫一篇關于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

GPU云服務器云服務器超詳細教你搭建云免服務器超詳細教你搭建云免流服務器 iis搭建站點與域名站點開啟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/8983.html

從今天開始，拿起VuePress打造屬于自己的專屬博客

摘要：故九萬里，則風斯在下矣，而后乃今培風背負青天，而莫之夭閼者，而后乃今將圖南。這里是文件的內容部分最后更新時間最后更新時間默認不開啟，它是基于提交的時間戳，所以我們的靜態站點是需要通過的倉庫進行管理的，并且它是按的時間來計算的。VuePress(0.x版本) 本blog配套了一個基于 VuePress 的一個簡單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請移步這里VueP...

dantezhao 2019-05-22 17:59 評論0 收藏0
讀?VuePress（四）插件機制的設計

前言從 9 月份開始，vuepress 源碼進行了重新設計和拆分。先是開了個 next 分支，后來又合并到 master 分支，為即將發布的 1.x 版本做準備。最主要的變化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式來支撐 vuepress 的運作，這一點很像 webpack。具體架構如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 評論0 收藏0
用vuepress搭建一個夠自己用的博客(帶評論功能)

摘要：那么我們如何在博客中實現這個功能呢，其實很簡單，首先修改我們的文件介紹正在使用的構造函數附加到根實例的一些選項當前應用的路由實例站點元數據對的判斷是防止編譯的時候報錯然后新建一個的文件取消默認的復制事件作者靜水深流原文著作權歸作者所有。原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站，記得當時為了把它搞出來，廢了不少勁，然后后來又斷斷續續更改過一些配置和樣式，但是因...

thekingisalwaysluc 2019-08-26 13:55 評論0 收藏0
用vuepress搭建一個夠自己用的博客

原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站:ox:，記得當時為了把它搞出來，廢了不少勁:anger:，然后后來又斷斷續續更改過一些配置和樣式，但是因為感覺各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現在也懶得在打掃了（其實是好久不用，有點忘了怎么用了:-1::poop:），前段時間在百度統計上看了看那個靜態網站的訪問人數，發現已經很久很久沒人訪問過了...

Forelax 2019-05-27 17:43 評論0 收藏0
前端自學筆記 - 第二篇(vuePress自動部署 & 后臺項目自學)

摘要：今天部署好了項目，現在寫好了博客頁面，只要一提交，會自動打包并且部署如果部署失敗，還會發送郵件提醒。但今天為了自動化部署項目，掛了三四十次了，真是慘不忍睹。。。而這第二個項目，將會是第一個的深入。長期更新前端自學筆記，歡迎關注前端自學筆記 - 第一篇(nginx/flutter/后臺系統/vuepress博客）一、jenkins自動部署vuePress博客項目自動化部署項目de...

zzzmh 2019-08-26 10:43 評論0 收藏0