VuePress 靜態(tài)網(wǎng)站生成方法步驟

更新時(shí)間：2019年02月14日 10:30:18 作者：一念

這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

使用技術(shù)：

VuePress - Vue 驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器

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

全局安裝

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

現(xiàn)有項(xiàng)目

如果你想在一個(gè)現(xiàn)有項(xiàng)目中使用 VuePress，同時(shí)想要在該項(xiàng)目中管理文檔，則應(yīng)該將 VuePress 安裝為本地依賴。

## 沒有項(xiàng)目可以初始化
yarn init

## 將 VuePress 作為一個(gè)本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

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

## 新建一個(gè) 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

一個(gè) VuePress 網(wǎng)站必要的配置文件是 .vuepress/config.js，它應(yīng)該導(dǎo)出一個(gè) JavaScript 對(duì)象：

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

靜態(tài)資源

創(chuàng)建public文件夾，主要用于存放靜態(tài)資源

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

添加網(wǎng)站 favicon，修改 .vuepress/config.js 內(nèi)容

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

導(dǎo)航欄

你可以通過 themeConfig.nav 增加一些導(dǎo)航欄鏈接:

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 標(biāo)題
tagline: Hero 副標(biāo)題
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 簡(jiǎn)潔至上
 details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。
- title: Vue驅(qū)動(dòng)
 details: 享受 Vue + webpack 的開發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來開發(fā)自定義主題。
- title: 高性能
 details: VuePress 為每個(gè)頁面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁面被加載的時(shí)候，將作為 SPA 運(yùn)行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

側(cè)邊欄

想要使側(cè)邊欄（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一個(gè)包含了多個(gè)鏈接的數(shù)組：

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

部署

設(shè)置部署站點(diǎn)的基礎(chǔ)路徑。

module.exports = {

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

在你的項(xiàng)目中，創(chuàng)建一個(gè)如下的 deploy.sh 文件

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

# 如果發(fā)布到 https://<USERNAME>.github.io/<REPO>
 git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pages

cd -

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: