搭建個(gè)人博客，東半球最強(qiáng)
hello 小伙伴們大家好，我是雷小帥！
想象一下你有一個(gè)技術(shù)博客，然后把網(wǎng)址寫在了簡歷上，面試官點(diǎn)擊鼠標(biāo)打開了這個(gè)網(wǎng)站，然后被驚艷了，最后面試的結(jié)果你懂得……
好了，今天的主題就是手把手教大家從零開始搭建一個(gè)個(gè)人博客，整個(gè)搭建過程我保證一分錢都不用花，全部白嫖！
趕緊開始吧，有點(diǎn)迫不及待了。
環(huán)境準(zhǔn)備
安裝 node.js
進(jìn)入 nodejs 官網(wǎng)下載安裝包：
https://nodejs.org/en/download/
下載和安裝步驟省略一萬字……
安裝好了之后可以測試一下：
npm?-v
回顯：
7.5.0
出現(xiàn)版本說明安裝成功！
安裝 docsify-cli
下一步通過 npm 命令安裝 docsify-cli 工具
npm?i?docsify-cli?-g
測試一下是否安裝成功：
docsify?-v
回顯：
docsify-cli?version:
??4.4.3
至此環(huán)境工具都已經(jīng)安裝完畢，下面正式開始搭建工作。
初始化工程目錄
比如說我們想做一個(gè) Java 項(xiàng)目，可以通過 IDEA 創(chuàng)建一個(gè)工程，那我們想搭建一個(gè)博客，這里可以直接用 docsify 命令行工具初始化一個(gè)功能即可。
執(zhí)行 docsify init 命令（后面的目錄大家可以根據(jù)情況自行更換）
docsify?init?./leixiaoshuai-blog
初始化成功后回顯：
Initialization succeeded! Please run docsify serve ./leixiaoshuai-blog
可以看到 ./leixiaoshuai-blog 目錄下已經(jīng)創(chuàng)建好了3個(gè)文件。
index.html入口文件README.md會(huì)做為主頁內(nèi)容渲染.nojekyll用于阻止 GitHub Pages 會(huì)忽略掉下劃線開頭的文件
小芝士：
Github Pages 默認(rèn)是基于 Jekyll 構(gòu)建，Jekyll 是一個(gè)將純文本轉(zhuǎn)換為靜態(tài)網(wǎng)站的工具，它構(gòu)建的網(wǎng)站下各種目錄都是特定的以下劃線開頭命名的文件夾，例如 _layouts、_posts ，它會(huì)忽略掉其它的以下劃線開頭的文件夾和文件。
.nojekyll 就是告訴 Github Pages 當(dāng)前網(wǎng)站不是基于 Jekyll 構(gòu)建的，不要忽略掉下劃線開頭的文件和文件夾。
可見 .nojekyll 主要就是用于 Github Pages 這種有默認(rèn)規(guī)則的網(wǎng)站部署平臺(tái)，如果是部署在自己的服務(wù)器上，可以把它刪掉。
反之，如果你的網(wǎng)站不是 Jekyll 構(gòu)建的，要部署到 Github Pages ，并且包含下劃線開頭的文件或文件夾，那么你就需要在根目錄添加一個(gè) .nojekyll 空文件。
本地預(yù)覽博客網(wǎng)站
在正式發(fā)布博客網(wǎng)站前我們可以在本地預(yù)覽一下，類似于寫代碼的時(shí)候在本地調(diào)試。
docsify?serve?leixiaoshuai-blog
效果如下：
哈哈，好激動(dòng)，博客的 hello world 已經(jīng)出來啦~
但好像有點(diǎn)丑，沒關(guān)系，我們一步一步優(yōu)化，往下看。
定制化
多頁文檔
如果需要?jiǎng)?chuàng)建多個(gè)頁面，或者需要多級(jí)路由的網(wǎng)站，在 docsify 里也能很容易的實(shí)現(xiàn)。
假設(shè)你的目錄結(jié)構(gòu)如下：
.
└── leixiaoshuai-blog
├── README.md
├── Java
├── README.md
└── Go
└── README.md
那么對(duì)應(yīng)的訪問頁面將是
leixiaoshuai-blog/README.md => http://xxx.com
leixiaoshuai-blog/Java/README.md => http://xxx.com/Java/
leixiaoshuai-blog/Go/README.md => http://xxx.com/Go/
有了多個(gè)頁面，你肯定需要一個(gè)側(cè)邊欄，點(diǎn)擊不同的鏈接可以跳到不同的頁面，配置方法如下：
步驟一：配置 loadSidebar 選項(xiàng)，開始側(cè)邊欄
<script>
??window.$docsify?=?{
????loadSidebar:?true
??}
script>
<script?src="http://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js">script>
步驟二：在項(xiàng)目根目錄下創(chuàng)建 _sidebar.md 文件，內(nèi)容如下
*?[Java?學(xué)習(xí)](Java/)
*?[Go?學(xué)習(xí)](Go/)
需要在 ./leixiaoshuai-blog 目錄創(chuàng)建 .nojekyll 命名的空文件，阻止 GitHub Pages 忽略命名是下劃線開頭的文件。如果已存在該文件，這里可以忽略。
效果預(yù)覽：
添加封面
docsify 還支持在博客的首頁加一個(gè)歡迎封面，我們試著加一下。
步驟一：打開配置開關(guān)
<script>
??window.$docsify?=?{
????coverpage:?true
??}
script>
<script?src="http://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js">script>
步驟二：在項(xiàng)目的根目錄下新創(chuàng)建一個(gè) _coverpage.md 文件，文件命名不要漏了下劃線。
源碼參考如下：
#?歡迎來到程序員雷小帥的博客
-?公眾號(hào)：愛笑的架構(gòu)師
-?B站:?程序員雷小帥
[Gitee](http://coderleixiaoshuai.gitee.io/java-eight-part/#/)
[Get?Started](#leixiaoshuai-blog)
效果預(yù)覽：
更換主題
docsify 官方默認(rèn)提供了5 套主題，默認(rèn)是 vue 風(fēng)格的，大家可以根據(jù)喜好自行更換。
"stylesheet"?href="http://cdn.jsdelivr.net/npm/docsify/themes/vue.css">
我們選擇一個(gè)暗黑風(fēng)格的進(jìn)行演示，在 index.htm 頭部中引用以下的 css 文件，記得把老的注釋掉。
<link?rel="stylesheet"?href="http://cdn.jsdelivr.net/npm/docsify/themes/dark.css">
本地預(yù)覽看一下效果：
自定義插件
搜索框
全文搜索插件會(huì)根據(jù)當(dāng)前頁面上的超鏈接獲取文檔內(nèi)容，在 localStorage 內(nèi)建立文檔索引。默認(rèn)過期時(shí)間為一天，當(dāng)然我們可以自己指定需要緩存的文件列表或者配置過期時(shí)間。
配置代碼如下：
search:?{
????????maxAge:?86400000,?//?過期時(shí)間，單位毫秒，默認(rèn)一天
????????paths:?[],?//?or?'auto'
????????placeholder:?'請輸入關(guān)鍵字搜索',
????????noData:?'找不到結(jié)果!',
????????//?搜索標(biāo)題的最大層級(jí),?1?-?6
????????depth:?2
??????}
效果展示：
字?jǐn)?shù)統(tǒng)計(jì)
這是一款為docsify提供文字統(tǒng)計(jì)的插件。
它提供了統(tǒng)計(jì)中文漢字和英文單詞的功能，并且排除了一些markdown語法的特殊字符例如*、-等。
步驟一：添加 js
<script?src="http://unpkg.com/docsify-count/dist/countable.js">script>
步驟二：添加配置
window.$docsify?=?{
??count:{
????countable:true,
????fontsize:'0.9em',
????color:'rgb(90,90,90)',
????language:'chinese'
??}
}
效果展示
右上角會(huì)出現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)和預(yù)估閱讀時(shí)間。
部署到 Gitee
好了，個(gè)人博客網(wǎng)站已經(jīng)配置差不多了，本地也能預(yù)覽看到效果了。
但是問題來了，如何把網(wǎng)站部署到外網(wǎng)上去供其他技術(shù)小伙伴看呢？買阿里云服務(wù)器？好像有點(diǎn)費(fèi)錢。
那有沒有免費(fèi)可以白嫖的方式？當(dāng)然有了，答案就是 Gitee Pages 。我們可以把博客代碼推送到 Gitee 倉庫中，然后開啟 Pages 配置就可以通過外網(wǎng)訪問啦~
開干吧……
創(chuàng)建 Gitee 倉庫
Gitee 中文名是碼云，可以理解為中國版的 Github，沒用過的小伙伴先自行注冊一個(gè)賬號(hào)吧。
https://gitee.com/
新建代碼倉：
推送本地博客項(xiàng)目代碼
我們先將本地的工程初始化為一個(gè) Git 倉庫。
cd?leixiaoshuai-blog
git?init
git?add?.
git?commit?-m?"first?commit"
Git 倉庫初始化完畢，開始推送代碼至遠(yuǎn)端。
git?remote?add?origin?https://gitee.com/CoderLeixiaoshuai/leixiaoshuai-blog.git
git?push?-u?origin?master
這一步可能需要輸入用戶名和密碼，或者大家百度搜一下如何配置公鑰私鑰。
開啟 pages
代碼推送成功后，我們就可以正式開始部署項(xiàng)目了。
進(jìn)入代碼倉，點(diǎn)擊 Gitee Pages
點(diǎn)擊部署，部署成功后會(huì)顯示訪問地址
注意：
首次部署可能需要實(shí)名認(rèn)證，大家安裝要求提供身份證照片和手持身份證照片，一般 24 小時(shí)之內(nèi)就可以審核通過了，大家耐心等待一下吧。
總結(jié)
不花一分錢，全靠白嫖就可以搭建屬于自己的個(gè)人博客，真是太香了！??！
還愣著干啥，趕緊動(dòng)手吧。
后面還會(huì)給大家分享如何綁定個(gè)人域名，想看的小伙伴三連支持一下吧。
參考文檔：
（1）更多玩法可以參考官網(wǎng)的教程文檔：
https://docsify.js.org/#/zh-cn/
（2）如果還有不熟悉的可以參考視頻教程（點(diǎn)擊文尾閱讀原文直達(dá)）：
https://www.bilibili.com/video/BV1AQ4y1q7eB/
-- End --
這些文章值得看：
????『死磕Java并發(fā)編程系列』 01 十張圖告訴你多線程那些破事
『死磕Java并發(fā)編程系列』 02 面試官：說說什么是Java內(nèi)存模型？
『死磕Java并發(fā)編程系列』 03 面試必問的CAS原理你會(huì)了嗎？
作者簡介：
博主從華中科技大學(xué)碩士畢業(yè)，是一個(gè)對(duì)技術(shù)有追求，對(duì)生活有激情的程序員。
幾年間浪跡于多個(gè)一線互聯(lián)網(wǎng)大廠，具有多年開發(fā)實(shí)戰(zhàn)經(jīng)驗(yàn)。
如果你熱愛技術(shù)或者你也不滿足現(xiàn)狀喜歡搞事情，那你不妨關(guān)注我，讓我們一路同行，一起分享技術(shù)干貨、交流面試技巧，吐槽職場故事。
我有技術(shù)和故事，你來嗎？
點(diǎn)贊、在看、分享三連支持一下咯