使用VuePress快速搭建我的博客

前言

看見大部分前端人都有本身博客，驟然發現本身尚未本身的博客，這可不行！別人有的我也要有！ ps:我有本身的域名和服務器。本文詳細說了本身如何快速使用VuePress快速搭建我的博客，看完不會打我(開玩笑的,你們不用看也是會的,可是能夠幫我指出不足)。css

技術選用VuePress ，進入VuePress官網，快速上手。html

上手VuePress

1.建立並進入一個新目錄

2.使用你喜歡的包管理器進行初始化

3.將 VuePress 安裝爲本地依賴

yarn add -D vuepress前端

4.建立你的第一篇文檔

5.在package.json增長運行和打包命令

6.本地熱編譯

yarn docs:devvue

到此你已經上手了VuePress，而後開始看一些配置node

配置問題

發現神三元博客源碼和預覽地址，感受他的博客模板作爲個人初版很合適，那就直接套用，而後修改裏面的配置和刪掉他的博文放上直接的博文。git

先附上我修改後的源碼地址：github

項目講解

.vuepress(博客的配置,這是重點)
blogs(放博文的地方)
node_modules(依賴包)
public(執行打包後纔會有的部署包)

那很明顯重點說.vuepress配置，說這以前一筆蓋過blogs文件夾，裏面的文件放一些你本身的博文，至於怎麼分層按你本身喜愛，好比我分爲算法、css、js、html等等算法

值得注意一點,md頭文件配置，categories分類、tags標籤，sidebar這個設置和等等講的路由配置有關，沒有的話路由配置須要指明，這裏寫着auto，那路由配置就能夠偷懶了，這裏的date和時間線插件掛鉤不能配錯，有格式要求json

---
title: github的pull request操做
date: 2020-08-22
categories:
 - git
tags:
 - git
sidebar: 'auto'
---
複製代碼

.vuepress配置

.vuepress配置感受比較重要，拿出來單獨講。服務器

config.js(基本配置)

基本配置詳情見官網，我這隻說一些我用上的配置屬性。想了解更多請看官網。

title：網站的標題，它將會被用做全部頁面標題的前綴，同時，默認主題下，它將顯示在導航欄（navbar）上。
description：網站的描述，它將會以標籤渲染到當前頁面的 HTML 中。
dest：打包輸出目錄
head：好比我這配置了meta和標題logo

plugins 插件
markdown的lineNumbers:是否顯示行號
themeConfig：這個又是超多配置，包含各類主題菜單等配置

我這裏選用了reco主題，等等再進行說明

頭像配置在這

siderbar.js(路由配置)

能夠看見siderbar.js這裏是在config中引用了

路由配置

其實這裏代碼很簡單你們都能看懂，和vue的router很像。我這裏採用整個模塊聲明配置md中的頭部聲明sidebar: 'auto',若是你不想使用懶人辦法，那能夠以下具體去配置可是路徑要對應

配置就說這詳情看官網更詳情的配置和插件詳情

reco

詳細介紹在這裏vuepress-theme-reco，我也是基於這個主題快速搭建上手，別人造好的輪子能用就用(嘻嘻！感謝開源！)

上面還有不少案例，都很棒，有的主題胡裏花哨(真的美!)，好比山海以南、摸魚人這些真的美，值得鑑賞和借鑑(copy)!!!

本身搭好的博客介紹一下

上面說了那麼多怎麼搭，那我該介紹一下本身博客網站了，看當作果

加載頁

首頁

時間線

展望

打包部署那些很簡單，我這就不說了，若是有要問個人也是歡迎留言。

昨天說留言板今天安排，源碼已更新。

跳轉連接留言板實現

我的從0到部署也花了兩小時時間，不少官方文檔都是基於VuePress,可是這僅僅是開始，接下來要作的就是美化博客界面和增長一些功能，好比留言板(這確定要加的)...

擴展點內容

讀者留言須要博客模板去搞定本身的博客，那我提供一個簡易模板，很高興能幫到你。 ↓↓↓須要模板模板的話，那看這裏

這個模板clone下來，徹底是開箱即用，做者名字和圖片的logo換成本身喜歡的，而後就是往裏增長你的博客。

結束語

看完這篇，快速上手搭建博客絕對輕輕鬆鬆。從12點到如今12.40分寫這博文，午餐還沒吃, 就到這了，後面有補充再編輯。求點贊！求點贊！求點贊！

若是你以爲不錯求點贊！求點贊！求點贊！