本文介紹從零開始使用VuePress搭建個人博客并且發(fā)布到GithubPages的過程贼涩。
快速上手
初始化項目
新建目錄
mkdir vuepress-starter && cd vuepress-starter
生成package.json文件
yarn init -y
安裝依賴
yarn add -D vuepress
創(chuàng)建第一篇文檔
mkdir docs && echo '# Hello VuePress' > docs/README.md
運行項目
添加scripts
package.json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
本地啟動服務
yarn docs:dev
目錄結構
推薦目錄結構如下
.
├── docs
│ ├── .vuepress (可選的)
│ │ ├── components (可選的)
│ │ ├── theme (可選的)
│ │ │ └── Layout.vue
│ │ ├── public (可選的)
│ │ ├── styles (可選的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可選的, 謹慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可選的)
│ │ └── enhanceApp.js (可選的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
詳細的目錄說明參看官方文檔，這里列出主要修改的幾個目和文件
docs/.vuepress: 存放全局的配置拯爽、組件、靜態(tài)資源等溜宽。docs/.vuepress/public: 靜態(tài)資源目錄汛蝙。docs/.vuepress/config.js: 配置文件的入口文件，也可以是YML或toml娃循。docs/README.md: 站點首頁炕檩，默認路由是/
基本配置
網(wǎng)站banner
docs/README.md
---
home: true
heroImage: /home.jpg
actionText: 開始了解 →
actionLink: /repository/
footer: CC0 Licensed | Copyright ? 2020-alfalfaw
---
默認的靜態(tài)資源目錄為docs/.vuepress/public，/home.jpg表示的是docs/.vuepress/public目錄下的home.jpg文件
網(wǎng)站標題和描述
docs/.vuepress/config.js
module.exports = {
title: '全棧日志',
description: '公眾號：全棧日記'
}
靜態(tài)路徑
docs/.vuepress/config.js
通過配置別名來避免用絕對路徑訪問資源
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@public': './public'
}
}
}
}
站點根目錄
docs/.vuepress/config.js
module.exports = {
base: '/journals/'
}
比如捌斧，要將網(wǎng)站部署到 https://<USERNAME>.github.io/journals/笛质，那么 base 的值就應該被設置為 "/journals/"
網(wǎng)站圖標
docs/.vuepress/config.js
module.exports = {
head: [
[
'link',
{
rel: 'icon',
href: '/favicon.ico'
}
]
]
}
網(wǎng)站目錄
const utils = require('./utils')
module.exports = {
themeConfig: {
editLinks: true,
docsDir: 'docs',
smoothScroll: true,
nav: [
{
text: '博客',
link: '/blog/'
},
{
text: '分享',
link: '/share/'
},
{
text: '面試',
link: '/interview/'
}
],
sidebar: utils.inferSiderbars(),
lastUpdated: '上次更新',
editLinkText: '在 GitHub 上編輯此頁'
}
}
插件
@vuepress/plugin-active-header-links
頁面滾動時自動激活側邊欄鏈接
yarn add -D @vuepress/plugin-active-header-links
使用
module.exports = {
plugins: ['@vuepress/active-header-links', {
sidebarLinkSelector: '.sidebar-link',
headerAnchorSelector: '.header-anchor'
}]
}
back-to-top
增加返回頂部按鈕
yarn add -D @vuepress/plugin-back-to-top
使用
module.exports = {
plugins: ['@vuepress/back-to-top']
}
last-updated
顯示更新時間
使用默認主題只需配置themeConfig.lastUpdated = '最后更新時間'
@vuepress/plugin-medium-zoom
安裝
yarn add -D @vuepress/plugin-medium-zoom
使用
module.exports = {
plugins: ['@vuepress/medium-zoom']
}
yarn add -D @vuepress/plugin-search
搜索
安裝
yarn add -D @vuepress/plugin-search
使用
// .vuepress/config.js or themePath/index.js
module.exports = {
plugins: [
['@vuepress/search', {
searchMaxSuggestions: 10
}]
]
}
@vuepress/plugin-google-analytics
網(wǎng)站統(tǒng)計
安裝
yarn add -D @vuepress/plugin-google-analytics
使用
plugins: [
[
'@vuepress/google-analytics',
{
ga: 'G-XXX'
}
]
]
其中ga獲取方式如下，
訪問Google Analytics捞蚂，點擊左下角管理妇押，然后創(chuàng)建媒體資源，點擊剛才創(chuàng)建的媒體資源下的數(shù)據(jù)流姓迅，選擇添加數(shù)據(jù)流敲霍，數(shù)據(jù)流類型選擇網(wǎng)站
部署
以部署到Github Pages為例
deploy.sh
#!/usr/bin/env sh
# 確保腳本拋出遇到的錯誤
set -e
# 生成靜態(tài)文件
npm run docs:build
# 進入生成的文件夾
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:<USERNAME>/<REPO>.git main:gh-pages
cd -
賦予權限
sudo chmod u+x deploy.sh
每次部署時執(zhí)行下面命令
./deploy.sh
