一看就會的保姆級教程，10分鐘搭建個人博客
Part1前言
相信很多人都想擁有一個自己的個人博客，現(xiàn)有的個人博客搭建框架已經(jīng)有很多了，例如 hexo 、vuepress 、jekyll 等等，這里我選用 vuepress 來快速搭建個人博客
網(wǎng)上教程千千萬，但總歸都是零零散散的，沒人會給你講解得清清楚楚，所以我這里就手把手來講解一下如何從零搭建
這里先放上 vuepress 的官網(wǎng)鏈接：https://www.vuepress.cn/(opens new window)[1]
1一、準備工作
首先我們要把需要的東西都下好，例如：node 、git 、vuepress
node下載鏈接(opens new window)[2]
git下載鏈接(opens new window)[3]
2二、安裝腳手架
這里本應該安裝 vuepress 的，但是 vuepress 其本身是一個文檔型的頁面，比較簡約，我們肯定都想讓自己的博客變得好看一點，所以這里推薦一個大佬制作好的主題 vuepress-theme-reco ，其頁面效果大致是這樣的：
隨便找個路徑，在終端下輸入該指令：
// npm
npm install @vuepress-reco/theme-cli -g
等待下載好以后，再輸入輸入該指令進行初始化項目：
theme-cli init blog
在初始化時，會讓你填寫一些信息，例如：博客名稱、博客標題、博客描述..
你只需要全部按回車先跳過即可，后續(xù)這些信息都還可以自己填寫的
等項目全部初始化好了以后，文件目錄是這個樣子的：
├── blog
├── .vuepress
│ ├── public // 存放靜態(tài)資源
│ │ ├── avatar.png // 頭像圖片
│ │ ├── favicon.ico // 網(wǎng)站icon圖標
│ │ ├── hero.png // 我也不知道有啥用，刪了也可以
│ │ └── logo.png // 網(wǎng)站導航欄左上角的logo圖片
│ │
│ └── config.js // 配置文件，非常重要?。?！
├── blogs // 存放文章，即.md文件
│ ├── ...
│ ├── ...
│ └── ...
├── docs // 存放一些后續(xù)需要配置的文件，暫時不需要了解
├── .gitignore // 提交git倉庫時需要忽略的文件
├── package.json // 管理包文件
└── README.md // 自動生成的，我們可以先不管
了解完文件目錄結構以后，我們需要啟動一下項目看一眼，因為剛生成的項目很多依賴包還沒安裝，并且當前的路徑也沒在項目中，所以我們要按下面的指令依次執(zhí)行，進行啟動項目
// 第一步，進到項目根目錄中
cd blog
// 第二步，安裝依賴包（這個過程很慢，需要等待）
npm install
// 第三步，等依賴包下完了以后再執(zhí)行該指令啟動項目
npm run dev
啟動好以后會自動打開網(wǎng)頁，我們可以看到這樣的畫面了，可以說這個主題的腳手架已經(jīng)幫我們做了很多工作了，頁面也非常的漂亮
3三、配置信息詳解
這個頁面的一切都是可以由我們的配置文件來控制的，也就是 .vuepress/config.js ，我們來看看它具體的配置信息具體含義是什么（這里非常重要，因為后續(xù)如果你要改動頁面的什么東西，都要在這里改的，所以必須非常熟悉各個屬性的作用）
module.exports = {
"title": "",
"description": "",
"dest": "public",
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
]
],
"theme": "reco",
"themeConfig": {
"nav": [
{
"text": "Home",
"link": "/",
"icon": "reco-home"
},
{
"text": "TimeLine",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "Docs",
"icon": "reco-message",
"items": [
{
"text": "vuepress-reco",
"link": "/docs/theme-reco/"
}
]
},
{
"text": "Contact",
"icon": "reco-message",
"items": [
{
"text": "GitHub",
"link": "https://github.com/recoluan",
"icon": "reco-github"
}
]
}
],
"sidebar": {
"/docs/theme-reco/": [
"",
"theme",
"plugin",
"api"
]
},
"type": "blog",
"blogConfig": {
"category": {
"location": 2,
"text": "Category"
},
"tag": {
"location": 3,
"text": "Tag"
}
},
"friendLink": [
{
"title": "午后南雜",
"desc": "Enjoy when you can, and endure when you must.",
"email": "[email protected]",
"link": "https://www.recoluan.com"
},
{
"title": "vuepress-theme-reco",
"desc": "A simple and beautiful vuepress Blog & Doc theme.",
"avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
"link": "https://vuepress-theme-reco.recoluan.com"
}
],
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
"lastUpdated": "Last Updated",
"author": "",
"authorAvatar": "/avatar.png",
"record": "xxxx",
"startYear": "2017"
},
"markdown": {
"lineNumbers": true
}
}
接下來按順序講解一下各個屬性的作用
（1）title
該屬性表示的是博客的標題
我們將 title 值修改為 前端印象 ，看一看有哪些地方有所變動
第一處是加載動畫時的大標題
第二處是導航欄的最左側(cè)
第三處就是瀏覽器標簽頁的title
（2）description
該屬性表示該網(wǎng)站的一些描述信息
我們將 description 的值改為 該網(wǎng)站用于記錄前端知識總結 ，看一看有哪些地方有所變動
第一處是加載動畫的副內(nèi)容
第二處是網(wǎng)站描述節(jié)點，用于SEO的
（3）dest
該屬性表示的是項目打包以后文件生成的目錄
例如我們將該 dest 的值改成 ./dist ，那么當我們執(zhí)行 npm run build 打包文件后，會在當前根目錄下生成一個 dist 文件夾，打包好的項目文件都在該文件夾中
（4）head
該屬性表示的是 html 文檔的 head 標簽中需要額外插入的其它標簽
默認生成的是：
"head": [ // 在head標簽中生成以下標簽
[
"link", // 生成link標簽
{
"rel": "icon", // rel屬性值為icon
"href": "/favicon.ico" // href屬性值為 /favicon.ico
}
],
[
"meta", //生成meta標簽
{
"name": "viewport", // name屬性值為viewport
"content": "width=device-width,initial-scale=1,user-scalable=no" // content屬性值為width=device-width,initial-scale=1,user-scalable=no
}
]
]
當然我們也可以繼續(xù)添加別的標簽，例如：
"head": [ // 在head標簽中生成以下標簽
["link", { "rel": "icon", "href": "/favicon.ico" }],
["meta", { "name": "viewport", "content": "width=device-width,initial-scale=1,user-scalable=no" }],
["meta", { "name": "keywords", "content": "前端,js,css" }],
['meta', { name: 'author', content: '零一' }],
]
（5）theme
該屬性表示的是當前項目使用的主題
這里我們是用 vuepress-theme-reco 主題的腳手架生成的，所以它默認就是 reco ，我們可以不用修改，當然后續(xù)你想使用別的主題也可以，可以參考一下 vuepress 的官網(wǎng)
（6）themeConfig
該屬性表示的是主題的配置信息
這里東西有點多，我們慢慢來講
1. nav
該屬性表示導航欄的配置信息
默認生成的 nav 值如下：
"nav": [
{ // 第一個導航按鈕
"text": "Home", // 按鈕名稱為 Home
"link": "/", // 對應的跳轉(zhuǎn)鏈接為 /
"icon": "reco-home" // 按鈕的前置圖標為 reco-home
},
{ // 第二個導航按鈕
"text": "TimeLine", // 按鈕名稱為 TimeLine
"link": "/timeline/", // 對應的跳轉(zhuǎn)鏈接為 /timeline/
"icon": "reco-date" // 按鈕的前置圖標為 reco-date
},
{ // 第三個導航按鈕
"text": "Docs", // 按鈕名稱為 Docs
"icon": "reco-message", // 按鈕的前置圖標為 reco-message
"items": [ // 該按鈕的子菜單
{ // 子菜單中的第一個導航按鈕
"text": "vuepress-reco",
"link": "/docs/theme-reco/"
}
]
},
{ // 第四個導航按鈕
"text": "Contact", // 按鈕名稱為 Contact
"icon": "reco-message", // 按鈕的前置圖標為 reco-message
"items": [ // 該按鈕的子菜單
{ // 子菜單中的第一個導航按鈕
"text": "GitHub",
"link": "https://github.com/recoluan",
"icon": "reco-github"
}
]
}
]
詳細的注釋我都已經(jīng)寫在上面了
2. sidebar
該屬性表示的是側(cè)邊欄的導航信息
默認生成的是：
"sidebar": {
"/docs/theme-reco/": [
"", // 空字符串對應的是 README.md
"theme", // 對應 theme.md
"plugin", // 對應plugin.md
"api" // 對應api.md
]
},
該配置信息表示的是當路徑為 /docs/theme-reco/ 時，側(cè)邊欄會自動找路徑 ./docs/theme-reco/ 下的 README.md 、theme.md 、plugin.md 、api.md 文件進行識別生成側(cè)邊欄，如圖所示：
側(cè)邊欄的文字其實是識別了 md 文件中的 title ，例如 theme.md 文件對應的名稱就是 title 的值
---
title: theme
date: 2020-05-27
---
This is theme.
這是一種寫法，但其實還有另一種更為復雜一點的寫法，我們來看一下
"sidebar": {
"/docs/theme-reco/": [
{
title: '一些文件', // 標題信息
collapsable: true, // 是否可折疊
children: [ // 該塊內(nèi)容對應的所有鏈接
"",
"theme",
"plugin",
"api"
]
}
]
}
這樣的實現(xiàn)效果其實和剛才是差不多的，區(qū)別的話可以看下圖來對比一下：
3. type
該屬性表示的是當前項目的類型
默認的是 blog ，也就是我們現(xiàn)在看到的樣式，其實還有別的值可以設定，例如 docs ，其對應的就是比較簡約化的文檔樣式了，當然了這些都是腳手架幫我們處理好了的
4. blogConfig
該屬性表示的是導航欄的配置信息，其是 reco 主題設置的
不知你有沒有發(fā)現(xiàn)，剛剛設置 nav 導航欄信息的時候，一共有 4 個導航欄按鈕，但實際呢？
實際情況卻有 6 個，那么多出來的兩個是哪里來的呢？其實就是 blogConfig 中設置的
"blogConfig": {
"category": {
"location": 2, // 在導航欄中的位置在第二個
"text": "Category"
},
"tag": {
"location": 3, // 在導航欄中的位置在第三個
"text": "Tag"
}
},
這兩個都是內(nèi)置的設定好了的，所以只要按這樣配置好就可以了，不過我感覺是不太需要，大家可以自己抉擇
5. friendLink
該屬性是用于設置友鏈的
具體在網(wǎng)站中的位置如下圖所示：
配置的話也比較簡單，模仿默認的配置去做就可以了：
"friendLink": [
{
"title": "午后南雜",
"desc": "Enjoy when you can, and endure when you must.",
"email": "[email protected]",
"link": "https://www.recoluan.com"
},
{
"title": "vuepress-theme-reco",
"desc": "A simple and beautiful vuepress Blog & Doc theme.",
"avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
"link": "https://vuepress-theme-reco.recoluan.com"
}
],
6. logo
該屬性表示的是導航欄最左側(cè)的 logo 圖片，如下圖所示
在寫該值時的根路徑是 public ，即 /logo.png 表示的就是 public 下的 logo.png
7. search
該屬性表示是否有搜索功能
8. searchMaxSuggestions
該屬性官網(wǎng)也沒做過多說明，所以我也不知道有什么用，暫且可以不用管
9. lastUpdated
該屬性表示每篇文章底部顯示的 "最后一次更新時間" 的文案
如下圖所示：
10. author
該屬性表示作者的名稱，在每一篇文章的作者署名中都會沿用該名稱
11. authorAvatar
該屬性表示作者的頭像，與 logo 一樣的路徑規(guī)則，頭像顯示位置如下圖所示：
12. record && recordLink && cyberSecurityRecord && cyberSecurityLink
record: ICP備案號
recordLink： ICP 備案指向的鏈接
cyberSecurityRecord： 公安部備案文案
cyberSecurityLink： 公安部備案指向鏈接
如果項目不是部署在個人服務器上的話，這四個屬性可以忽略不管
13. startYear
該屬性表示博客的開始時間（只需要寫年份就可以了），在網(wǎng)站上的展示如圖所示：
左側(cè)是我們填寫的時間，右側(cè)是根據(jù)當前時間自動生成的年份
（7） markdown
該屬性里存儲著一些對于 markdown 解析的配置
例如腳手架自動生成的 lineNumbers 表示的就是代碼塊顯示行號
其實還有其它很多的 markdown 配置，詳細參考 vuepress官方(opens new window)[4]
4四、開始輸入文章吧
按照上面進行配置，一個基本的博客就搭建好了，現(xiàn)在就可以開始瘋狂輸入文章了，所有的文章只需要以.md文件格式放在blogs文件夾下即可
我們創(chuàng)建一篇文章試試吧～
---
title: 我的第一篇文章
date: 2021-05-07
categories:
- 分類1
tags:
- 標簽1
- 標簽2
---
這是我的第一篇文章
這里有四個屬性可以配置，分別是title、date、categories、tags
這四個屬性在頁面上的體現(xiàn)如下圖所示：
其中，date的時間也會在時間軸中呈現(xiàn)出來，即你所有的文章會按date的時間從上到下按時間新->舊的順序進行排序
另外，我們本文使用的主題框架還為文章提供了一個很不錯的功能：加密，只需要在文章中給keys屬性賦值一個md5加密后的字符串即可
比如我們將密碼設為zero2one，那么打開在線md5加密 (opens new window)[5]網(wǎng)站，將密碼輸入到框中，就能得到一串密文，該密文就是我們要設置的keys的值
---
title: 我的第一篇文章
date: 2021-05-07
categories:
- 分類1
tags:
- 標簽1
- 標簽2
keys:
- 'ababf713be53f3d10366196bf0297c30'
---
這是我的第一篇文章
來看下效果：
5五、添加評論模塊
其實這個主題框架已經(jīng)內(nèi)置了評論插件@vuepress-reco/vuepress-plugin-comments，我們需要做的就是做一些額外的配置
首先去Valine官網(wǎng) (opens new window)[6]注冊一下Valine賬號，注冊好后進行登錄，然后進入控制臺，點擊左下角創(chuàng)建應用
應用創(chuàng)建好以后，進入剛剛創(chuàng)建的應用，選擇左下角的設置>應用Key，然后就能看到你的APP ID和APP Key了：
拿到APP ID和APP Key后，我們來到我們項目中.vuepress/config.js中的themeConfig屬性中，按如下設置即可：
module.exports = {
// ...
themeConfig: {
// ....
valineConfig: { // valine 評論功能配置信息
appId: '在這輸入你的appid',// your appId
appKey: '在這輸入你的appKey', // your appKey
placeholder: '盡情留下你想說的話吧~', // 評論框占位符
avatar: 'wavatar', // 評論用戶的頭像類型
highlight: true, // 代碼高亮
recordIP: true, // 記錄評論者的IP
},
}
// ...
}
這樣我們就能看到我們每篇文章的最底部都有留言功能了
當然如果我們不想讓某篇文章有留言板，也可以設置isShowComments屬性為false即可
---
title: 我的第一篇文章
date: 2021-05-07
categories:
- 分類1
tags:
- 標簽1
- 標簽2
keys:
- 'ababf713be53f3d10366196bf0297c30'
isShowComments: false
---
這是我的第一篇文章
此時留言板就不存在了
6六、總結
到此為止，基本上一個博客該有的功能就都具備了。其實本文介紹的這個主題腳手架他還提供了一個插件廣場（支持實現(xiàn)各種各樣的功能），目前這個插件廣場中有：打賞插件、回到頂部插件、音樂播放器插件、可愛光標插件、流程圖插件等等
最后，大家也可以訪問一下我搭建的個人博客[7] ，我正在我的個人博客里打造一套完整的寶典，歡迎關注～
參考資料
https://www.vuepress.cn/(opens new window): https://www.vuepress.cn/
[2]node下載鏈接(opens new window): http://nodejs.cn/download/
[3]git下載鏈接(opens new window): https://git-scm.com/downloads
[4]vuepress官方(opens new window): https://www.vuepress.cn/config/#markdown
[5]在線md5加密 (opens new window): https://vuepress-theme-reco.recoluan.com/views/1.x/password.html
[6]Valine官網(wǎng) (opens new window): https://console.leancloud.cn/register
[7]我搭建的個人博客: https://lpyexplore.gitee.io/blog/