VuePress從零開(kāi)始搭建自己的博客
最近將自己的博客從Hexo轉(zhuǎn)移到VuePress中來(lái)，使用VuePress的過(guò)程中也遇到了一些問(wèn)題，寫(xiě)一篇文章來(lái)記錄一下搭建過(guò)程和踩過(guò)的坑。
VuePress是什么？
VuePress是以Vue驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器，是一個(gè)由Vue、Vue Router和webpack驅(qū)動(dòng)的單頁(yè)應(yīng)用。在VuePress中，你可以使用Markdown編寫(xiě)文檔，然后生成網(wǎng)頁(yè)，每一個(gè)由VuePress生成的頁(yè)面都帶有預(yù)渲染好的HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化。同時(shí)，一旦頁(yè)面被加載，Vue將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個(gè)完整的單頁(yè)應(yīng)用，其他的頁(yè)面則會(huì)只在用戶(hù)瀏覽到的時(shí)候才按需加載。
詳情請(qǐng)看VuePress官方文檔
VuePress特性
- 為技術(shù)文檔而優(yōu)化的內(nèi)置Markdown拓展
- 在Markdown文件中使用Vue組件的能力
- Vue驅(qū)動(dòng)的自定義主題系統(tǒng)
- 自動(dòng)生成Service Worker(支持PWA)
- Google Analytics集成
- 基于Git的"最后更新時(shí)間"
- 多語(yǔ)言支持
- 響應(yīng)式布局
環(huán)境搭建
安裝
VuePress支持使用Yarn和npm來(lái)安裝，Node.js版本需要>=8才可以。
全局安裝VuePress
yarn global add vuepress # 或者：npm install -g vuepress
創(chuàng)建項(xiàng)目目錄
mkdir project
cd project
初始化項(xiàng)目
yarn init -y # 或者 npm init -y
新建docs文件夾
docs文件夾作為項(xiàng)目文檔根目錄，主要放置Markdown類(lèi)型的文章和.vuepress文件夾。
mkdir docs
設(shè)置package.json
VuePress中有兩個(gè)命令，vuepress dev docs命令運(yùn)行本地服務(wù)，通過(guò)訪問(wèn)http://localhost:8080即可預(yù)覽網(wǎng)站，vuepress build docs命令用來(lái)生成靜態(tài)文件，默認(rèn)情況下，放置在docs/.vuepress/dist目錄中，當(dāng)然你也可以在docs/.vuepress/config.js中的dest字段來(lái)修改默認(rèn)存放目錄。在這里將兩個(gè)命令封裝成腳本的方式，直接使用npm run docs:dev和npm run docs:build即可。
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
創(chuàng)建.vuepress目錄
在docs目錄中，創(chuàng)建.vuepress目錄，.vuepress目錄主要用于存放VuePress相關(guān)的文件。
mkdir .vuepress
創(chuàng)建config.js
進(jìn)入到.vuepress目錄中，然后創(chuàng)建config.js，config.js是VuePress必要的配置文件，它導(dǎo)出y一個(gè)javascript對(duì)象。
touch config.js
創(chuàng)建public文件夾
進(jìn)入到.vuepress目錄中，然后創(chuàng)建public文件夾，此文件夾主要放靜態(tài)資源文件，例如favicons和 PWA的圖標(biāo)。
mkdir public
此時(shí)，項(xiàng)目的結(jié)構(gòu)差不多就出來(lái)了。
project
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
以上只是簡(jiǎn)單了搭建了一下博客的開(kāi)發(fā)環(huán)境，接下來(lái)是博客主要的基本配置config.js，也是必須要做的。
基本配置
一個(gè)config.js的主要配置包括網(wǎng)站的標(biāo)題、描述等基本信息，以及主題的配置。這里簡(jiǎn)單的列舉一下常用配置。
網(wǎng)站信息
module.exports = {
title: '個(gè)人主頁(yè)',
description: '姜帥杰的博客',
head: [
['link', { rel: 'icon', href: '/img/logo.ico' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
]
}
- title：網(wǎng)站標(biāo)題
- description：網(wǎng)站描述
- head：額外的需要被注入到當(dāng)前頁(yè)面的HTML"head"中的標(biāo)簽，其中路徑的"/"就是public資源目錄。
具體配置詳情請(qǐng)看文檔：配置
主題配置
module.exports = {
themeConfig: {
nav: [
{ text: '主頁(yè)', link: '/' },
{ text: '博文',
items: [
{ text: 'Android', link: '/android/' },
{ text: 'ios', link: '/ios/' },
{ text: 'Web', link: '/web/' }
]
},
{ text: '關(guān)于', link: '/about/' },
{ text: 'Github', link: 'https://www.github.com/codeteenager' },
],
sidebar: {
'/android/': [
"",
"android1",
...
],
"/ios/":[
"",
"ios1",
],
"/web/":[
"",
"web1",
...
],
},
sidebarDepth: 2,
lastUpdated: 'Last Updated',
},
}
nav：導(dǎo)航欄配置，此配置主要用于配置導(dǎo)航欄的鏈接，例如以上主頁(yè)的link為"/"，默認(rèn)是根目錄下的README.md。"/android/"鏈接到根目錄docs下的android文件夾下的README.md文件。
-
sidebar：側(cè)邊欄配置，你可以省略.md拓展名，同時(shí)以/結(jié)尾的路徑將會(huì)被視為 */README.md。'/android/'、'/ios/'和'/web/'是通過(guò)路由的方式將每個(gè)頁(yè)面的標(biāo)題抽取出來(lái)顯示。"/android/"是指根目錄下android文件夾中的路由，每個(gè)路由鏈接都要有README.md。所以目錄結(jié)構(gòu)如下：
├─── docs ├── README.md └── android │ └── README.md └── ios └── README.md sidebarDepth：嵌套的標(biāo)題鏈接深度，默認(rèn)的深度為1。
lastUpdated：最后更新時(shí)間。
側(cè)邊欄如圖：
具體主題配置詳情請(qǐng)看文檔：主題配置
PWA配置
VuePress默認(rèn)支持PWA配置的，需要在基本配置中開(kāi)啟serviceWorker。
module.exports = {
serviceWorker: true,
}
然后再添加icons和Manifest配置，在public中添加manifest.json配置，和圖標(biāo)。如果不知道PWA的可以到PWA配置查看相關(guān)資料。
{
"name": "姜帥杰",
"short_name": "姜帥杰",
"start_url": "index.html",
"display": "standalone",
"background_color": "#2196f3",
"description": "姜帥杰的個(gè)人主頁(yè)",
"theme_color": "blue",
"icons": [
{
"src": "./logo.png",
"sizes": "144x144",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "web"
},
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}
]
}
在config.js配置中添加manifest.json，由于iphone11.3不支持manifest的圖標(biāo)，所以加上apple-touch-icon圖標(biāo)配置即可。
module.exports = {
head: [
['link', { rel: 'manifest', href: '/manifest.json' }],
['link', { rel: 'apple-touch-icon', href: '/img/logo.png' }],
]
}
最后在iphone中訪問(wèn)網(wǎng)站，然后添加主屏幕即可。
自定義頁(yè)面
默認(rèn)的主題提供了一個(gè)首頁(yè)（Homepage）的布局(用于這個(gè)網(wǎng)站的主頁(yè))。想要使用它，需要在你的根級(jí) README.md的home: true，然后添加數(shù)據(jù)。
---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡(jiǎn)潔至上
details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專(zhuān)注于寫(xiě)作。
- title: Vue驅(qū)動(dòng)
details: 享受 Vue + webpack 的開(kāi)發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來(lái)開(kāi)發(fā)自定義主題。
- title: 高性能
details: VuePress 為每個(gè)頁(yè)面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁(yè)面被加載的時(shí)候，將作為 SPA 運(yùn)行。
footer: MIT Licensed | Copyright ? 2018-present Evan You
---
效果如下：
如果你想自定義首頁(yè)或者其他頁(yè)面，可以在頁(yè)面的md文件中添加頁(yè)面Vue文件。Vue文件放置在docs/.vuepress/components目錄中。
---
layout: HomeLayout
---
例如我博客的自定義首頁(yè)：
部署上線
由于構(gòu)建的時(shí)候生成靜態(tài)頁(yè)面，所以將dist文件夾中的內(nèi)容可以部署在gitHub的pages或者coding的pages都可以。如果使用git上傳到github上，操作比較繁瑣，這里使用腳本的方式自動(dòng)部署到github上。
創(chuàng)建一個(gè)deploy.sh
在project下創(chuàng)建deploy.sh。
touch deploy.sh
編寫(xiě)腳本
#!/usr/bin/env sh
# 確保腳本拋出遇到的錯(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:<USERNAME>/<REPO>.git master:gh-pages
cd -
設(shè)置package.json
{
"scripts": {
"deploy": "bash deploy.sh"
},
}
運(yùn)行npm run deploy 即可自動(dòng)構(gòu)建部署到github上。
詳情請(qǐng)看，部署
示例：我的博客
