Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404

介紹

VuePress 由兩部分組成：一個(gè)以 Vue 驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具，和一個(gè)為編寫(xiě)技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的。

由 VuePress 生成的每個(gè)頁(yè)面，都具有相應(yīng)的預(yù)渲染靜態(tài) HTML，它們能提供出色的加載性能，并且對(duì) SEO 友好。然而，頁(yè)面加載之后，Vue 就會(huì)將這些靜態(tài)內(nèi)容，接管為完整的單頁(yè)面應(yīng)用程序(SPA)。當(dāng)用戶在瀏覽站點(diǎn)時(shí)，可以按需加載其他頁(yè)面。

部署

以下指南假設(shè)你將文檔放置在項(xiàng)目的 docs 目錄中，并使用默認(rèn)的編譯輸出位置。

GitHub 頁(yè)面

將 .vuepress/config.js 中的 base 設(shè)置為你的倉(cāng)庫(kù)名稱(chēng)。例如，如果你的倉(cāng)庫(kù)是 https://github.com/foo/bar ，則已部署的頁(yè)面將在 https://foo.github.io/bar 上可用。在這種情況下，你應(yīng)該將base設(shè)置為 “/bar/” 。

在你的項(xiàng)目中，運(yùn)行：

# 構(gòu)建
vuepress build docs
# 導(dǎo)航到構(gòu)建輸出目錄
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'

推到你倉(cāng)庫(kù)的的 gh-page 分支

將 / 替換為你的信息

git push -f git@github.com:/.git master:gh-pages

你可以在 CI 設(shè)置中運(yùn)行此腳本以啟用每次推送時(shí)的自動(dòng)部署

碼云頁(yè)面-Gitee Pages

config.js的設(shè)置和GitHub頁(yè)面設(shè)置的方法是一致的

項(xiàng)目打包完成后將 docs-.vuepress-dist 中的所有文件上傳到碼云

開(kāi)啟碼云的Gitee Pages服務(wù)

注：我上線后出現(xiàn)了首頁(yè)自動(dòng)跳轉(zhuǎn)404的問(wèn)題，是因?yàn)榇a云 Gitee Pages 服務(wù)的網(wǎng)站地址均為小寫(xiě)，將config.js中的 base 部分全部改成小寫(xiě)就能解決vuepress跳轉(zhuǎn)404的問(wèn)題

Vuepress的簡(jiǎn)單使用

VuePress 由兩部分組成：第一部分是一個(gè)極簡(jiǎn)靜態(tài)網(wǎng)站生成器 (opens new window)，它包含由 Vue 驅(qū)動(dòng)的主題系統(tǒng)和插件 API，另一個(gè)部分是為書(shū)寫(xiě)技術(shù)文檔而優(yōu)化的默認(rèn)主題，它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。

安裝

VuePress 需要 Node.js (opens new window)>= 8.6

本文會(huì)幫助你從頭搭建一個(gè)簡(jiǎn)單的 VuePress 文檔。如果你想在一個(gè)現(xiàn)有項(xiàng)目中使用 VuePress 管理文檔，從步驟 3 開(kāi)始。

1.創(chuàng)建并進(jìn)入一個(gè)新目錄

mkdir vuepress-starter && cd vuepress-starter

2.初始化

 npm init

3.將 VuePress 安裝為本地依賴

我們已經(jīng)不再推薦全局安裝 VuePress

npm install -D vuepress

注意

如果你的現(xiàn)有項(xiàng)目依賴了 webpack 3.x，我們推薦使用 Yarn (opens new window)而不是 npm 來(lái)安裝 VuePress。因?yàn)樵谶@種情形下，npm 會(huì)生成錯(cuò)誤的依賴樹(shù)。

4.創(chuàng)建你的第一篇文檔

mkdir docs && echo '# Hello VuePress' > docs/README.md

5.在 package.json 中添加一些 scripts(opens new window)

這一步驟是可選的，但我們推薦你完成它。在下文中，我們會(huì)默認(rèn)這些 scripts 已經(jīng)被添加。

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

6.在本地啟動(dòng)服務(wù)器

 npm run docs:dev

VuePress 會(huì)在 http://localhost:8080 啟動(dòng)一個(gè)熱重載的開(kāi)發(fā)服務(wù)器。

現(xiàn)在，你應(yīng)該已經(jīng)有了一個(gè)簡(jiǎn)單可用的 VuePress 文檔。

首先來(lái)到config.json修改自己所需要的文件

// .vuepress/config.js
module.exports = {
  title:'《Ts教程》',
  dest:'docs',
  markdown: {
   lineNumbers: true
  },
  head: [
    ['link', {  rel: 'icon', href: '/logo.png' }]
  ],
  sidebarDepth: 2,
  themeConfig: {
    logo:'/logo.png',
    nav: [
      // { text: '和作者做同事', link: '/join_us' },
      { text: 'OpenHarmony倉(cāng)庫(kù)', link: 'https://gitee.com/openharmony/' },
      { text: '視頻教程', link: 'https://space.bilibili.com/480883651' },
      { text: '關(guān)于我', link: 'http://jianguojs.cn/' },
    ],
    sidebar: [
      {
        title:"序",
        path:"/preface"
      },
      {
        title:"第一章：起步",
        path:"/chapter1/index",
        collapsable: false,
        children:[
          '/chapter1/mobile_development_intro',
          '/chapter1/flutter_intro',
          '/chapter1/install_flutter',
          '/chapter1/dart'
        ]
      },
      
      
    ]
  }
}

然后修改summary.md,等文件，

要運(yùn)行的話

npm run dev就可以了

運(yùn)行效果：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論