VuePress 靜態網站生成

使用技術：

• VuePress - Vue 驅動的靜態網站生成器

倉庫地址： https://github.com/yinian-R/v...

全局安裝

## 安裝
yarn global add vuepress # 或者：npm install -g vuepress

現有項目

若是你想在一個現有項目中使用 VuePress，同時想要在該項目中管理文檔，則應該將 VuePress 安裝爲本地依賴。

## 沒有項目能夠初始化
yarn init

## 將 VuePress 做爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

## 新建一個 docs 文件夾
mkdir docs

## 新建一個 markdown 文件
echo # Hello VuePress! > docs/README.md

## 開始寫做
npx vuepress dev docs

接着，在 package.json 里加一些腳本:

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

基本配置

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js

一個 VuePress 網站必要的配置文件是 .vuepress/config.js，它應該導出一個 JavaScript 對象：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

靜態資源

建立public文件夾，主要用於存放靜態資源

.
├─ docs
│  └─ .vuepress
│     └─ public
│          └─ image
│               └─ favicon.ico

添加網站 favicon，修改 .vuepress/config.js 內容

module.exports = {
    head:[
        ['link', {rel:'icon', href:'/image/favicon.ico'}]
    ]
};

導航欄

你能夠經過 themeConfig.nav 增長一些導航欄連接:

module.exports = {
    themeConfig: {
        nav: [
            { text: '主頁', link: '/' },
            { text: '指南', link: '/guide/' },
            {
                text: '語言',
                items: [
                    { text: '中文', link: '/language/chinese/' },
                    { text: 'English', link: '/language/english/' }
                ]
            },
            { text: 'GitHub', link: 'https://github.com' }
        ]
    }
};

首頁

須要在dosc/README.md指定 home: true

---
home: true
heroImage: /image/favicon.ico
heroText: Hero 標題
tagline: Hero 副標題
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 簡潔至上
  details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時能夠使用 Vue 來開發自定義主題。
- title: 高性能
  details: VuePress 爲每一個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將做爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

側邊欄

想要使 側邊欄（Sidebar）生效，須要配置 themeConfig.sidebar，基本的配置，須要一個包含了多個連接的數組：

module.exports = {
    themeConfig: {
        sidebar: [
            '/',
            ['/hello', 'hello page']
        ]
    }
};

部署

設置部署站點的基礎路徑。

module.exports = {

    base: '/vuepress-demo/',
    
};

在你的項目中，建立一個以下的 deploy.sh 文件

#!/usr/bin/env bash
# 確保腳本拋出遇到的錯誤
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://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
 git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pages

cd -