平時Google搜問題的時候，很多方案都是鏈接到博客上的，有簡書、博客園、思否等等，當(dāng)然，還有很多個人搭建的博客，風(fēng)格各異。慢慢的，自己又有了自搭博客的想法，一是作為自己工作踩坑的學(xué)習(xí)記錄，二者萬一哪天也能幫到別人解決了什么問題，豈不美哉
選定VuePress
前后利用工作之余想了幾種方案，也考慮過Hexo，也是很火的博客搭建工具，但又想借此機會，學(xué)習(xí)一下新技術(shù)，VuePress是我所在一個技術(shù)交流群里一位大佬推薦的，我了解之后，確實很喜歡， 它有以下幾個特點：
- 輕易上手，配置簡單
- Vue驅(qū)動，享用Vue+webpack開發(fā)環(huán)境，可以自定義Vue組件
- 性能高效
其實上面的優(yōu)點官網(wǎng)都有介紹，我比較認可，再贅述一遍
詳情請瀏覽VuePress中文網(wǎng)
開始安裝
# 全局安裝 VuePress
yarn global add vuepress # 或者用 npm install -g vuepress
為了方便省事，免去重新構(gòu)建整個項目的時間，可以從官網(wǎng)demo那里clone下來整個項目，到后面根據(jù)自己的情況再去修改
# cd 到你要保存blog的文件夾， 然后clone
git clone git@github.com:docschina/vuepress.git
啟動調(diào)試
cd vuepress //進入項目根目錄
yarn //安裝依賴
yarn dev //啟動調(diào)試服務(wù)
當(dāng)終端中出現(xiàn) VuePress dev server listening at http://localhost:8080/
就說明項目已經(jīng)正常啟動調(diào)試了，你可以在瀏覽器輸入http://localhost:8080/預(yù)覽整個博客項目
修改項目結(jié)構(gòu)
你看到的項目結(jié)構(gòu)應(yīng)該是下面這樣的
.
├── .vuepress
│ ├── components
│ ├── config.js // 網(wǎng)站基礎(chǔ)配置文件，主要修改的文件
│ └── public // 存放網(wǎng)站靜態(tài)資源，例如圖片
├── config
│ └── README.md
├── default-theme-config
│ └── README.md
├── guide
│ ├── README.md
│ ├── assets.md
│ ├── basic-config.md
│ ├── custom-themes.md
│ ├── deploy.md
│ ├── getting-started.md
│ ├── i18n.md
│ ├── markdown.md
│ └── using-vue.md
├── zh // 我們需要的中文配置
| ├── README.md // 首頁配置文件
│ ├── config
│ ├── default-theme-config
│ └── guide
└── README.md // 首頁配置文件
因為我們主要是中文界面，不考慮英文，所以，可以直接把zh文件夾里的所有文件移動到上層目錄，覆蓋原有的guide、 default-theme-config、config,以及首頁配置文件README.md
完成之后應(yīng)該是這樣的目錄結(jié)構(gòu)
.
├── .vuepress
│ ├── components
│ ├── config.js
│ └── public
├── config
│ └── README.md // 可刪除
├── default-theme-config // 這個也可以刪，或者改成自己需要的
│ └── README.md
├── guide // 也可刪除，建議根據(jù)這個修改成自己的blog內(nèi)容
│ ├── README.md
│ ├── assets.md
│ ├── basic-config.md
│ ├── custom-themes.md
│ ├── deploy.md
│ ├── getting-started.md
│ ├── i18n.md
│ ├── markdown.md
│ └── using-vue.md
├── README.md
網(wǎng)站基本配置
在.vuepress下的config.js里，包括了網(wǎng)站需要設(shè)置的標(biāo)題、描述等基本信息
簡單列舉一些，因為沒有留原來的，附上的是我修改后的
module.exports = {
dest: 'vuepress', // yarn 打包生成的文件地址，在根目錄下會有一個vuepress文件夾
locales: { // 語言配置
'/': {
lang: 'zh-CN',
title: 'devZhang', // 網(wǎng)站標(biāo)題
description: 'Something Good Will Be Happen!' // 網(wǎng)站描述，顯示在標(biāo)題下面
}
},
head: [ // 額外添加到當(dāng)前頁面 <head>標(biāo)簽里的標(biāo)簽
['link', { rel: 'icon', href: `/logo.png` }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-TileColor', content: '#000000' }]
],
serviceWorker: true, // VuePress支持PWA配置
theme: 'vue', // 主題文件
通過上面的serviceWorker配置，配合public里的manifest.json配置icons圖標(biāo)使用。
配置網(wǎng)站首頁
在.docs下的README.md就是網(wǎng)站首頁配置文件，以下是我修改保留的東西，把沒用的都刪了
---
home: true // 是否啟用首頁默認布局
heroImage: /alone.png // 首頁顯示的圖片地址
actionText: Go Blog → // 首頁按鈕的文字
actionLink: /js/ // 點擊首頁按鈕后鏈接的路徑
---
我的首頁效果展示：
配置網(wǎng)站結(jié)構(gòu)
下面是我在官方Demo基礎(chǔ)上修改后的網(wǎng)站結(jié)構(gòu)，可供參考
themeConfig: {
repo: 'dvxiaofan', // github名稱，可以加參數(shù)(/項目名)，直接到項目。 只寫用戶名就會直接到你github首頁
editLinks: false, // 每篇文章底部是否顯示查看原文和編輯， 不需要，就設(shè)置為false
docsDir: 'docs',
locales: { // 網(wǎng)站頂部的導(dǎo)航欄配置
'/': {
nav: [
{
text: 'Web前端', // 顯示名字
items: [ // 下面有二級目錄，就這樣設(shè)置
{
text: 'JS',
link: '/js/'
},
{
text: 'CSS',
link: '/css/'
},
{
text: 'HTML',
link: '/html/'
},
]
},
{
text: '輪子',
items: [
{
text: 'Echarts',
link: '/echarts/'
},
{
text: 'Vue',
link: '/vue/'
},
]
},
{
text: '生活隨筆',
link: '/lifes/'
},
{
text: '關(guān)于',
link: '/about/'
}
],
sidebar: { // 側(cè)邊欄配置
'/js/': jsSidebarConfig('JS相關(guān)'),
}
}
}
}
}
// 側(cè)邊欄具體配置
function jsSidebarConfig (title) {
return [
{
title,
collapsable: false, // 是否可折疊
children: [ // 對應(yīng)每一篇文章，省略了`.md`擴展名
'', // 默認對應(yīng)`README.md`
'js01',
'js02',
'js03',
'js04',
'js05',
]
}
]
}
網(wǎng)站頂部目錄效果展示
部署上線
在運行yarn build之后生成的是靜態(tài)頁面，我們需要把打包生成的vuepress文件夾中的內(nèi)容托管到服務(wù)器，這樣才能真能的通過網(wǎng)絡(luò)瀏覽我們的博客。
暫時可以用GitHub來托管，省去了自己花錢買服務(wù)器和域名的繁瑣。
我們需要在GitHub上建立兩個倉庫， 一個是平時新增維護整個博客用的， 一個用來托管博客打包后的文件
比如，我建立了一個MyBlog 和 dvxiaofan.github.io
注意
這個dvxiaofan.github.io里前面的名字是你的GitHub用戶名， 必須一模一樣！我GitHub名是dvxiaofan,所以項目名就是前面的樣子
第一個倉庫就放整個項目，具體git操作不再贅述。
編寫發(fā)布腳本
為了方便以后發(fā)布使用，打開項目跟目錄下的 scripts文件夾里的 deploy-gh.sh文件， 修改成下面這樣
cd vuepress // 進入到打包好的輸出文件夾
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:dvxiaofan/dvxiaofan.github.io.git master // 代碼上傳到前面建立的第二個倉庫的master分支， 你需要替換成自己的
查看成果
把上面的文章保存，在終端里cd到整個項目目錄下，然后執(zhí)行yarn deploy-gh， 腳本就會開始執(zhí)行，知道最后結(jié)束，代碼提交部署成功， 你就可以輸入托管博客的查看地址https://dvxiaofan.github.io， 沒問題的話，你應(yīng)該會看到自己的博客了。
小結(jié)
這次就先寫到這里，后期有時間會把博客部署到自己的域名上去，到時候再來更新文章
