平時Google搜問題的時候，很多方案都是鏈接到博客上的，有簡書、博客園、思否等等，當然，還有很多個人搭建的博客，風格各異。慢慢的，自己又有了自搭博客的想法，一是作爲自己工作踩坑的學習記錄，二者萬一哪天也能幫到別人解決了什麼問題，豈不美哉
選定VuePress
前後利用工作之餘想了幾種方案，也考慮過Hexo，也是很火的博客搭建工具，但又想藉此機會，學習一下新技術，VuePress是我所在一個技術交流羣裏一位大佬推薦的，我瞭解之後，確實很喜歡， 它有以下幾個特點：
- 輕易上手，配置簡單
- Vue驅動，享用Vue+webpack開發環境，可以自定義Vue組件
- 性能高效
其實上面的優點官網都有介紹，我比較認可，再贅述一遍
詳情請瀏覽VuePress中文網
開始安裝
# 全局安裝 VuePress
yarn global add vuepress # 或者用 npm install -g vuepress爲了方便省事，免去重新構建整個項目的時間，可以從官網demo那裏clone下來整個項目，到後面根據自己的情況再去修改
# cd 到你要保存blog的文件夾， 然後clone
git clone [email protected]:docschina/vuepress.git啓動調試
cd vuepress //進入項目根目錄
yarn //安裝依賴
yarn dev //啓動調試服務當終端中出現 VuePress dev server listening at http://localhost:8080/
就說明項目已經正常啓動調試了，你可以在瀏覽器輸入http://localhost:8080/預覽整個博客項目
修改項目結構
你看到的項目結構應該是下面這樣的
.
├── .vuepress
│ ├── components
│ ├── config.js // 網站基礎配置文件，主要修改的文件
│ └── public // 存放網站靜態資源，例如圖片
├── 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
完成之後應該是這樣的目錄結構
.
├── .vuepress
│ ├── components
│ ├── config.js
│ └── public
├── config
│ └── README.md // 可刪除
├── default-theme-config // 這個也可以刪，或者改成自己需要的
│ └── README.md
├── guide // 也可刪除，建議根據這個修改成自己的blog內容
│ ├── README.md
│ ├── assets.md
│ ├── basic-config.md
│ ├── custom-themes.md
│ ├── deploy.md
│ ├── getting-started.md
│ ├── i18n.md
│ ├── markdown.md
│ └── using-vue.md
├── README.md 網站基本配置
在.vuepress下的config.js裏，包括了網站需要設置的標題、描述等基本信息
簡單列舉一些，因爲沒有留原來的，附上的是我修改後的
module.exports = {
dest: 'vuepress', // yarn 打包生成的文件地址，在根目錄下會有一個vuepress文件夾
locales: { // 語言配置
'/': {
lang: 'zh-CN',
title: 'devZhang', // 網站標題
description: 'Something Good Will Be Happen!' // 網站描述，顯示在標題下面
}
},
head: [ // 額外添加到當前頁面 <head>標籤裏的標籤
['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圖標使用。
配置網站首頁
在.docs下的README.md就是網站首頁配置文件，以下是我修改保留的東西，把沒用的都刪了
---
home: true // 是否啓用首頁默認佈局
heroImage: /alone.png // 首頁顯示的圖片地址
actionText: Go Blog → // 首頁按鈕的文字
actionLink: /js/ // 點擊首頁按鈕後鏈接的路徑
---我的首頁效果展示：
配置網站結構
下面是我在官方Demo基礎上修改後的網站結構，可供參考
themeConfig: {
repo: 'dvxiaofan', // github名稱，可以加參數(/項目名)，直接到項目。 只寫用戶名就會直接到你github首頁
editLinks: false, // 每篇文章底部是否顯示查看原文和編輯， 不需要，就設置爲false
docsDir: 'docs',
locales: { // 網站頂部的導航欄配置
'/': {
nav: [
{
text: 'Web前端', // 顯示名字
items: [ // 下面有二級目錄，就這樣設置
{
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: '關於',
link: '/about/'
}
],
sidebar: { // 側邊欄配置
'/js/': jsSidebarConfig('JS相關'),
}
}
}
}
}
// 側邊欄具體配置
function jsSidebarConfig (title) {
return [
{
title,
collapsable: false, // 是否可摺疊
children: [ // 對應每一篇文章，省略了`.md`擴展名
'', // 默認對應`README.md`
'js01',
'js02',
'js03',
'js04',
'js05',
]
}
]
}
網站頂部目錄效果展示
部署上線
在運行yarn build之後生成的是靜態頁面，我們需要把打包生成的vuepress文件夾中的內容託管到服務器，這樣才能真能的通過網絡瀏覽我們的博客。
暫時可以用GitHub來託管，省去了自己花錢買服務器和域名的繁瑣。
我們需要在GitHub上建立兩個倉庫， 一個是平時新增維護整個博客用的， 一個用來託管博客打包後的文件
比如，我建立了一個MyBlog 和 dvxiaofan.github.io
注意
這個dvxiaofan.github.io裏 前面的名字是你的GitHub用戶名， 必須一模一樣！我GitHub名是dvxiaofan,所以項目名就是前面的樣子
第一個倉庫就放整個項目，具體git操作不再贅述。
編寫發佈腳本
爲了方便以後發佈使用，打開項目跟目錄下的 scripts文件夾裏的 deploy-gh.sh文件， 修改成下面這樣
cd vuepress // 進入到打包好的輸出文件夾
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:dvxiaofan/dvxiaofan.github.io.git master // 代碼上傳到前面建立的第二個倉庫的master分支， 你需要替換成自己的查看成果
把上面的文章保存，在終端裏cd到整個項目目錄下，然後執行yarn deploy-gh， 腳本就會開始執行，知道最後結束，代碼提交部署成功， 你就可以輸入托管博客的查看地址https://dvxiaofan.github.io， 沒問題的話，你應該會看到自己的博客了。
小結
這次就先寫到這裏，後期有時間會把博客部署到自己的域名上去，到時候再來更新文章