vuepress 是 Vue 驅(qū)動(dòng)的靜態(tài)站點(diǎn)生成工具

本文僅介紹，搭建靜態(tài)博客的過程，具體教程及文檔請(qǐng)點(diǎn)擊進(jìn)入 vuepress中文網(wǎng)

點(diǎn)擊查看項(xiàng)目代碼

vuepress初始化

下面初始化

# 將 github 新創(chuàng)建的倉(cāng)庫(kù)克隆到本地git clone git@github.com:zhb333/readme-blog.git# 進(jìn)入項(xiàng)目cd readme-blog# npm 初始化, 按照提示回車npm init# 安裝 vuepressnpm i vuepress -D# 安裝 gh-pagesnpm i gh-pages -D# 創(chuàng)建一個(gè) docs 目錄mkdir docs# 創(chuàng)建一個(gè) markdown 文件echo '# Hello VuePress' > docs/README.md

npm 腳本

然后，給 package.json 添加一些 scripts 腳本：

{ "scripts": {  "dev": "vuepress dev docs",  "build": "vuepress build docs",  "deploy": "npm run build && gh-pages -d docs/.vuepress/dist" }}

運(yùn)行本地開發(fā)環(huán)境

運(yùn)行 vurepress 的本地開發(fā)環(huán)境

npm run dev

訪問 localhost:8080 ， 已經(jīng)成功開啟

基礎(chǔ)配置

生成靜態(tài)資源

執(zhí)行下面的命令，生成靜態(tài)資源

npm run build

默認(rèn)情況下，構(gòu)建的文件會(huì)位于 docs/.vuepress/dist 中，該文件可以通過 docs/.vuepress/config.js 中的 dest 字段進(jìn)行配置。

配置

創(chuàng)建 docs/.vuepress/config.js， 并進(jìn)行簡(jiǎn)單配置

var config = { // 靜態(tài)網(wǎng)站部署的目錄 base: '/readme-blog/', // 網(wǎng)站標(biāo)題 title: '標(biāo) の 博客', // <meta name="description" content="..."> description: '種一棵樹最好的時(shí)間是十年前，其次是現(xiàn)在',  markdown: {    // 顯示代碼行號(hào)  lineNumbers: true }}module.exports = config

博客首頁

公共文件

創(chuàng)建 docs/.vuepress/public 用于存放公共文件

我在 public/ , 存在了 favicon.ico 圖標(biāo)， 以及 zlx.jpg 首頁的頭像圖片

簡(jiǎn)單的首頁編寫

將 docs/README.md設(shè)置為首頁， 修改代碼為：

---home: trueheroImage: /zlx.jpgfooter: MIT Licensed | Copyright © 2018 ZhangHuanbiao---

設(shè)置網(wǎng)站 ico 圖標(biāo)

配置網(wǎng)站的 ico 圖標(biāo)， 修改 .vuepress/config.js：

const config = { head: [  ['link', { rel: 'icon', href: '/favicon.ico' }] ]}

導(dǎo)航欄

配置導(dǎo)航欄

使用 vuepress 的默認(rèn)主題配置導(dǎo)航欄 .vuepress/config.js：

const nav = [ {  text: '前端棧',  items: [   { text: 'Vue', link: '/WEB/Vue/vuepress-blog' },   { text: 'React', link: '/WEB/React/react-router' }  ] }]const config = { themeConfig: {  // 項(xiàng)目的 github 地址  repo: 'zhb333/readme-blog',  // github 地址的鏈接名  repoLabel: '代碼',  // 配置導(dǎo)航欄  nav, },}