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