如何快速搭建好看的个人博客(完整配置与源码)
為什么選擇vuepress
博客地址?程序員成長指北(http://www.inode.club/)??可以先體驗下。
之前使用docsify部署過個人博客, 在此之前也使用過gitbook, 這次使用vuepress來改版, 根據自己的體驗, 將這三者做一個對比
從閱讀體驗來說(個人感覺): gitbook > docsify =vuepress
從配置上來說, docsify相比于vuepress和gitbook都要簡單一些.
從性能上來說: vuepress > docsify
雖然docsify也是基于vue的, docsify是運行時解析, vuepress是預先渲染HTML
靈活性上, vuepress也是相當占優勢的, 對vue熟悉的朋友可以編寫vue組件實現你想要的功能樣式
vuepress特性
為技術文檔而優化的內置Markdown拓展
在Markdown文件中使用Vue組件的能力
Vue驅動的自定義主題系統
自動生成Service Worker(支持PWA)
Google Analytics集成
基于Git的"最后更新時間
多語言支持
響應式布局
支持PWA模式
總的來說, 使用vuepress優勢有挺多的, 特別是我之前使用docsify搭建的網站, 是一點也沒有被瀏覽器收錄啊, 怎么都搜不到,受到一萬點打擊,所以決心改一改
其實vuepress的官網已經寫的挺好的了, 但是我這篇文章也有優勢啊,是一步步的教你搭建, 這樣就不用來回在文檔中去找什么配置.(當然如果你想直接通過官網來學習, 可以直接看官網,點擊鏈接就可以喔)
項目搭建
安裝vuepress
第一步就是進行vuepress進行安裝: 如果使用npm來安裝, Node.js版本需要 >=8 才可以
yarn global add vuepress # 或者:npm install -g vuepress注意
如果你的現有項目依賴了 webpack 3.x,推薦使用 Yarn而不是 npm 來安裝 VuePress。因為在這種情形下,npm 會生成錯誤的依賴樹。
初始化項目
創建項目目錄blog
mkdir blog cd blog初始化
yarn init -y # 或者 npm init -y初始化完成后, 會創建一個package.json
{"name":"blog",??"version":?"1.0.0","main":?"index.js","license":?"MIT""scripts":?{"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1"} }在package.json中, 配置啟動命令
"scripts":?{"docs:dev":?"vuepress?dev?docs","docs:build":?"vuepress?build?docs"}啟動項目: npm run docs:dev這條命令就等于vuepress dev docs
打包項目: npm run build 這條命令就等于 vuepress build docs
創建docs目錄, 主要用于放置我們寫的.md類型的文章以及.vuepress相關的配置
mkdir docs接著在docs文件夾中創建.vuepress文件夾
cd?docs mkdir?.vuepress這個文件主要就是放vuepress相關的配置
到這一步, 我們的項目大體架子已經搭建出來了,接下來進行配置.
頁面具體內容配置
基本配置
接下來要讓頁面顯示內容, 就需要進行配置, 新建一個總的配置文件config.js, 這個文件的名字是固定的.
cd?.vuepress touch?config.jsconfig.js最基礎的配置文件內容如下:
module.exports?=?{title:?'koala的博客',description:?'專注?Node.js?技術棧分享,從前端到Node.js再到數據庫', }如果這時運行npm run docs:dev或者yarn docs:dev, 會出現頁面404頁面,vuepress默認打開的是docs下的readme.md文件, 由于你沒有創建,所以找到的是vuepress默認提供的404頁面, 關于這有點,我們借助vue-devtools工具來查看一下vue的結構
在docs目錄下創建README.md文件, 再運行,就可以看到運行起來的效果, 如下圖所示:
blog001.jpg
設置封面頁
此時README文件中沒有內容,封面頁是空的, 我們可以通過在這個markdown文件中寫一些內容, 同時官方也給我們提供了封面頁的模板(個人覺得還是比較實用的):
--- home:?true heroImage:?/home.png actionText:?Get?Started?→ actionLink:?/node/ features: -?title:?day?day?updetails:?記錄每一天的進步,?一分耕耘,一分收獲. -?title:?程序員成長指北details:?專注?Node.js?技術棧分享,從?前端?到?Node.js?再到?后端數據庫,祝您成為優秀的高級?Node.js?全棧工程師 -?title:?koaladetails:?一個有趣的且樂于分享的人。座右銘:今天未完成的,明天更不會完成。 footer:?MIT?Licensed?|?Copyright???2018-present?Evan?You---效果圖如下:
配置導航欄nav
在config.js中添加:
themeConfig:{nav:?[{text:?"主頁",?link:?"/"??????},{?text:?"node",?link:?"/node/"?},{?text:?"前端",?link:?"/webframe/"},{?text:?"數據庫",?link:?"/database/"???},{?text:?"android",?link:?"/android/"???},{?text:?"面試問題",?link:?"/interview/"?}], }效果如下圖:
如果想要展示二級導航, 可以這樣配置:
themeConfig:{nav:?[{text:?"主頁",?link:?"/"??????},{?text:?"node",?link:?"/node/"?},{?text:?"前端",?items:?[?{?text:?"html",?link:"/web/html/"},{?text:?"css",?link:"/web/css/"},]},{?text:?"數據庫",?link:?"/database/"???},{?text:?"android",?link:?"/android/"???},{?text:?"面試問題",?link:?"/interview/"?}], }效果如圖所示:
當你使用上面的方式配置nav時, 目錄結構最好和我創建的一樣 項目目錄結構如下:
導航欄創建好了, 接下來就是配置頁面內容中的側邊欄slider
配置側邊欄slider
1.自動獲取側邊欄內容
如果你希望自動生成當前頁面標題的側邊欄, 可以在config.js中配置來啟用
//?.vuepress/config.js module.exports?=?{themeConfig:{sidebar:?'auto',//?sidebarDepth:?1?} }2.展示每個頁面的側邊欄
如果你希望為不同的頁面組顯示不同的側邊欄, 就和官網一樣, 點擊指南顯示的是對應的側邊欄,目前目錄有node \ database \ web等, 這些目錄下都存放著多個md文件:
module.exports?=?{themeConfig:{sidebar:{"/node/":[["",?"node目錄"],["path",?"作為前端也需要知道的路徑知識"],["stream",?"node核心模塊-stream"]],"/web/":[["",?"前端"],{title:?"css",name:?"css",collabsable:?false,children:?[["css/",?"目錄"],['css/1',?"css常考面試題"]]}]}} }設置的效果圖如下: 在node導航下:
在前端導航下的效果:
上面采用了兩個方式配置側邊欄, 一個側邊欄是node目錄下直接是寫的markdown文章, 而在web下又有多個分類, 所有有進行了分欄配置, 其實這兩種方式在我們博客中都是比較常見的
自定義布局內容
網站的導航和側邊欄都已經配置好之后, 如果你覺得頁面不是很符合你的預期, 你也可以自定修改成你想要的效果。比如就像我的博客中左側固定的內容, 就是自定義的全局組件. 這里使用vuepress提供的插件機制來實現
在.vuepress文件夾下創建components文件夾, 在components下再創建fixed.vue文件
<template><div?class="fixed_container"><div?class="tencent_code"><h4>關注作者公眾</h4><p>和萬千小伙伴一起學習</p><img?src="/ggh.jpg"?alt=""></div><div?class="group_code"><h4>加入技術交流群</h4><p>掃描二維碼?備注<span>?加群</span></p><img?src="/wechat.jpg"?alt=""></div></div> </template> <script> export?default?{name:?'fixed' } </script>....//?這里省略了部分樣式代碼,?想看全部的小伙伴點開github地址就可以了然后在配置文件中以插件的形式配置即可:
??//?插件plugins:[{name:"page-plugin",globalUIComponents:["fixed"],?}]globalUIComponents是用于注入全局的UI, 它以數組的形式接收參數名字, 這里的名字必須與components文件夾下的.vue文件同名, 全局UI就是一個Vue組件; 其實vuepress也提供了一些內置的全局UI組件, 例如:back-to-top, popup, nprogress等.
配置插件
UI插件
配置內置的全局UI,首先需要插件:
yarn?add?-D?@vuepress/plugin-back-to-top?@vuepress/plugin-nprogress #?OR?npm?install?-D?@vuepress/plugin-back-to-top??@vuepress/plugin-nprogress在config.js中配置:
??plugins:[["@vuepress/back-to-top"],?//?返回頂部["@vuepress/nprogress"],???//?加載進度條]這里需要注意一點就是看你項目中是否安裝了vuepress, 由于我之前是全局安裝的, 在項目下還沒有安裝, 插件是依賴于vuepress的, 所有沒有安裝的需要安裝上, 插件才有效.
支持PWA
vuepress還有一個我比較看重的優勢, 就是支持PWA, 當用戶沒有網的情況下,一樣能繼續的訪問我們的網站
在0.x 版本中我們只要配置serviceWorker: true 即可, 但是我們現在使用的是1.2.0版本, 這個版本中已經將這個功能抽離出來作為插件的方式使用, 下面就看一下具體如何使用的:
首先需要安裝插件:
yarn?add?-D?@vuepress/plugin-pwa #?或者?npm?install?-D?@vuepress/plugin-pwa在config.js中配置:
module.exports?=?{plugins:?['@vuepress/pwa',?{serviceWorker:?true,updatePopup:?true}] }注意點:
為了讓你的網站完全地兼容 PWA,你需要:
在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正確的 head links
manifest.json 文件
{"name":?"koala_blog","short_name":?"blog","version":?"1.0.0","description":?"程序員成長指北博主,?koala的博客","manifest_version":?2 }配置評論
由于之前有小伙伴說過,『程序員成長指北』公眾號上不能評論,所有這次我在博客中增加了評論功能,剛開始本來打算使用gitTalk, 但是我的博客采用的是部署到自己的服務器, 并沒有部署成 GitHub Pages, 所有我使用的是valine, 它除了評論功能還可以統計閱讀量, 請大家看:
但是我后面也會將gitTalk配置方式寫出來, 方便使用gitTalk的小伙伴
valine 使用
點擊進入 Valine官網 ,需要先注冊才能使用.
然后創建應用, 獲取APP ID 和APP KEY
應用創建好以后,進入剛剛創建的應用,選擇左下角的設置 > 應用Key,然后就能看到你的APP ID 和APP Key了
安裝:
yarn add vuepress-plugin-comment -D
快速使用
在.vuepress下的config.js插件配置中:
module.exports?=?{plugins:?[['vuepress-plugin-comment',{choosen:?'valine',?//?options選項中的所有參數,會傳給Valine的配置options:?{el:?'#valine-vuepress-comment',appId:?'Your?own?appId',appKey:?'Your?own?appKey'}}]] }appid和appkey為你創建的應用的APP ID 和APP Key
gitTalk 使用
主題樣式修改
vuepress默認是主題顏色是綠色, 如果你不喜歡可以對其進行更改. 如果要對默認設置的樣式進行簡單顏色替換, 或者自定義一些顏色變量供以后使用, 可以在.vuepress/styles下創建palette.styl文件.
你可以調整的顏色變量:
// 顏色 $textColor ?= #2c3e50 $accentColor ?= #1e90ff $grayTextColor ?= #666 $lightTextColor ?= #999 $borderColor ?= #eaecef $codeBgColor ?= #282c34 $arrowBgColor ?= #ccc $navbarColor ?= #fff $headerColor ?= #fff $headerTitleColor ?= #fff $nprogressColor ?= $accentColor// 布局 $navbarHeight ?= 3.6rem $bannerHeight ?= 12rem// 響應式 breakpoints $MQWide ?= 1440px $MQNarrow ?= 1024px $MQMobile ?= 768px $MQMobileNarrow ?= 480px注意點:
你應該只在這個文件中寫入顏色變量。因為 palette.styl 將在根的 stylus 配置文件的末尾引入,作為配置,它將被多個文件使用,所以一旦你在這里寫了樣式,你的樣式就會被多次復制
如果要添加額外的樣式, vuepress也是提供了簡便方法的, 只要在.vuepress/styles文件下創建一個 index.styl, 在里面寫css樣式即可, 注意文件命名是固定的.
部署
nginx部署
我的博客采用的是靜態文件部署, 感覺方便又便捷, 之前部署在Github Pages上, 訪問速度不是很理想.
第一步: 確保你滿足下面幾個條件
你有一臺服務器
已經安裝好nginx, 如果不會的小伙伴請看如何安裝nginx
解析了一個可用的域名
第二步: 打包你的項目
運行npm run docs:build將項目打包, 默認打包文件在docs/.vuepress/dist目錄下
第三步: 配置nginx
進入到nginx 配置目錄, 找到conf.d文件, 添加下面的配置:
server?{listen???????80;server_name??www.inode.club;root?????/usr/web/inode/dist;error_log???/var/log/nginx/inode-error.log;access_log??/var/log/nginx/inode-access.log;#????????deny?all;index??index.php?index.html?index.htm; }server_name 是你解析的域名地址
root 配置文件將訪問的靜態資源文件的路徑
**第四步: 上傳靜態資源文件 **
將靜態資源文件放置到服務器上, 路徑為配置的/usr/web/inode/dist, 可以借助xftp工具上傳也可以通過git克隆, 選擇適合自己的方式就可以
**第五步: 重啟nginx **
# 重啟之前務必檢查配置是否正確 sudo nginx -t // 檢查配置 sudo nginx -s reload // 重啟然后你就可以通過域名來訪問你的網站啦!
github部署
將代碼部署到 Github Pages, 你可以看vuepress文檔: vuepress部署, 也參照我這里寫的的步驟來部署
第一步: 首先確保你的項目滿足以下幾個條件:
文檔放置在docs目錄中
使用的是默認的構建輸出位置
vuepress以本地依賴的形式被安裝到你的項目中, 在根目錄package.json文件中包含如下代碼:
第二步: 創建github倉庫
在github上創建一個名為blog的倉庫, 并將代碼提交到github上
第三步: 配置倉庫名稱
配置docs/.vuepress/config.js文件中的base, 如果打算發布到https://<USERNAME>.github.io/<REPO>/(也就是說你的倉庫在: ?https://github.com/<USERNAME>/<REPO> ), 此處我的倉庫為: blog, 則將base按照如下配置即可:
module.exports?=?{base:?"/blog/" }第四步: 在項目根目錄中,創建一個如下的腳本文件deploy.sh
#!/usr/bin/env?sh#?確保腳本拋出遇到的錯誤 set?-e#?生成靜態文件 npm?run?docs:build#?進入生成的文件夾 cd?docs/.vuepress/distgit?init git?add?-A git?commit?-m?'deploy'#?如果發布到?https://<USERNAME>.github.io/<REPO> git?push?-f?git@github.com:<USERNAME>/<REPO>.git?master:gh-pages #?例如?git?push?-f?git@github.com:koala-coding/blog.git?master:gh-pages? cd?-第五步: 雙擊 deploy.sh 運行腳本
會自動在我們的 GitHub 倉庫中,創建一個名為 gh-pages 的分支,而我們要部署到 GitHub Pages 的正是這個分支
第六步: setting Github Pages這是最后一步了,在 GitHub 項目點擊 Setting 按鈕,找到 GitHub Pages - Source,選擇 gh-pages 分支,點擊 Save 按鈕后,靜靜地等待它部署完成即可。
項目地址
我的網站 程序員成長指北(http://www.inode.club/)?就是這樣搭建出來的!
本文章實現的內容都已經上傳到github, 如果不想一步步進行配置的, 可以直接下載下來使用,就不用重復造輪子啦!
需要博客源碼的小伙伴可以直接公眾后臺回復【博客】領取,或者直接聯系我。
參考文章 https://juejin.im/post/5c94ddf35188252d65344cfe
??愛心三連擊1.看到這里了就點個在看支持下吧,你的「在看」是我創作的動力。 2.關注公眾號程序員成長指北,「帶你一起學Node」! 3.特殊階段,帶好口罩,做好個人防護。 4.添加微信【ikoala520】,拉你進技術交流群一起學習。“在看轉發”是最大的支持總結
以上是生活随笔為你收集整理的如何快速搭建好看的个人博客(完整配置与源码)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AUV运动控制仿真(PID控制)
- 下一篇: Linux下cp和scp的详细说明及其他