前言

“作為一個真正的碼農，不能沒有自己的個人博客”，這是我說的。慚愧的是，入行兩年多了都沒搞起來，這讓我一度懷疑自己是個假程序員。昨天終于克服了心里的“猶豫”和“恐懼”，嘗試搭建了一把，半天就搞好了，看著能用。

搭建博客只是一個小任務，為啥遲遲不能完成？只能說明鄙人執(zhí)行力太差。想的多做的少，大多數(shù)時候我們只要開始行動之后，好多問題都會迎刃而解了。引用最新網(wǎng)上很流行的一段話，與君共勉之：

我們遇到什么困難也不要怕，微笑著面對它！消除恐懼的最好辦法就是面對恐懼！堅持，才是勝利。加油！奧利給！

因此，干就完了。

一些說明

先來看下我搭建好的效果

?

和一般的使用Hexo、Jekyll、Hugo等博客框架搭建的博客可能有些差異。這個更像是一個Document API，不過博客也是一些文章啦。

使用的框架技術

• docsify框架

• 基于Github Pages的站點部署

我是在Windows 7下搭建的

網(wǎng)上好些搭建博客的視頻教程，大部分用的是Macbook。沒辦法，“實力確實不允許啊”，我還掙扎在Windows的苦海中。等我有錢了，我也要賣最好的Mac，寫最渣的代碼。

?

準備工作

1、要有git環(huán)境，有github賬號

windows下安裝git可以看下這篇Git簡易教程之git簡介及安裝

因為我們要使用Github Pages來部署我們的應用，請先注冊下github的賬號。

2、有node環(huán)境

docsify框架需要有node環(huán)境的支持。上node.js的官網(wǎng)下載安裝包，此處下載Windows版本的，點下一步一路安裝下去即可。另外需要配置下環(huán)境變量。

Windows下安裝node環(huán)境，請自行百度教程安裝。

3、簡要說明一下步驟

• 上docsify官網(wǎng)了解下，里面有使用的步驟了。

• 使用docsify命令生成文檔站點

• 在github上部署站點

上docsify官網(wǎng)看一看

地址：https://docsify.js.org/#/ docsify官網(wǎng)

?你沒有看錯，docsify的官網(wǎng)就是用它自身的js框架搭建的。這種極簡風我還是挺喜歡的。

A magical documentation site generator 一款神奇的文檔站點生成器

最主要的特性是，支持Markdown格式，對程序員的博主們是很友好的。不用生成html文件，寫完MD格式的博客直接往上一放，框架自己在運行時解析渲染成html頁面。

使用docsify命令生成文檔站點

安裝docsify-cli 工具

推薦安裝 docsify-cli 工具，可以方便創(chuàng)建及本地預覽文檔網(wǎng)站。

npm i docsify-cli -g

因為我們已經(jīng)安裝了node環(huán)境，所以直接打開CMD窗口執(zhí)行上面的命令就好了。

初始化一個項目

然后我們選擇一個目錄，作為我們的博客站點目錄。也就是項目要生成的目錄。

比如我在E盤下新建了一個myblogs的目錄??打開CMD黑框，cd到該目錄，執(zhí)行如下命令：

docsify init ./docs

執(zhí)行完成后，目錄結構就會變成這樣

可以看到，多了一個docs文件夾，其實這個文件夾就是將來我們存放MD格式的博客文件的地方。

與此同時，docs目錄下會生成幾個文件。

• index.html 入口文件

• README.md 會做為主頁內容渲染

• .nojekyll 用于阻止 GitHub Pages 會忽略掉下劃線開頭的文件

啟動項目，預覽效果

到這里，就可以啟動項目，然后看下效果了。使用下面命令啟動項目：

docsify serve docs

流程器輸入：http://localhost:3000

?看著有點簡陋，不過框架已經(jīng)搭好了，接下來就是一些配置了。

增加一些配置，變身成真正的blogsite

這里我們主要配置一下封面、左側導航欄和首頁，其他的配置可以參考docsify官網(wǎng)。

1、配置左側導航欄

在?E:\myblogs\docs目錄下新建一個?_sidebar.md?的md文件，內容如下：

- 設計模式

- [第一章節(jié)](desgin-pattern/Java面試必備：手寫單例模式.md)

- [工廠模式](desgin-pattern/工廠模式超詳解(代碼示例).md)

- [原型模式](desgin-pattern/設計模式之原型模式.md)

- [代理模式](desgin-pattern/設計模式之代理模式.md)

- Spring框架

- [初識spring框架](spring/【10分鐘學Spring】：(一)初識Spring框架.md)

- [依賴注入及示例](spring/【10分鐘學Spring】：(二)一文搞懂spring依賴注入(DI).md)

- [spring的條件化裝配](spring/【10分鐘學Spring】：(三)你了解spring的高級裝配嗎_條件化裝配bean.md)

- 數(shù)據(jù)庫

這其實就是最基本的md文件，里面寫了一些鏈接而已。當然了我們諸如?desgin-pattern/Java面試必備：手寫單例模式.md?是相對路徑，目錄下也要放?Java面試必備：手寫單例模式.md?文件才行。

?只有上面的?_sidebar.md?文件是不行滴，還需要在index.html文件中配置一下。在內嵌的js腳本中加上下面這句：

loadSidebar: true

好了，我們來看下效果。

注意，無需我們重新啟動docsify serve，保存剛才添加和修改的文件就行。

2、配置個封面

套路和上面配置左側導航欄是一樣的。

首先新建一個?_coverpage.md?的md文件，這里面的內容就是你封面的內容。

# Myblogs

> 我要開始裝逼了

[CSDN](https://blog.csdn.net/m0_37965018)

[滾動鼠標](#introduction)

然后在index.xml文件中修改js腳本配置，添加一句：

coverpage: true

看下效果

3、配置一個首頁

最后我們來配置下首頁，也就是封面完了之后，第一個看到的界面。

其實就是?E:\myblogs\docs?目錄下?README.md?文件的內容。

我們一直沒有管他，默認就是這個樣子的：

?改一下，放上自己牛逼的經(jīng)歷或者是標簽。

# 最迷人的二營長

> [個人博客](https://blog.csdn.net/m0_37965018)

> [GitHub](https://github.com/Corefo/ "github")

看下效果

部署到Github上

沒有域名 + 服務器怎么辦，不用擔心，我們有Github啊，通過Github Pages的功能，我們可以將個人站點托管到github上。

登錄github賬號，創(chuàng)建倉庫

登錄github的官網(wǎng)，創(chuàng)建一個倉庫，起個名字吧，就叫myblogs。

倉庫創(chuàng)建好了，我們使用第二種方式導入一個本地倉庫(本地倉庫還沒有創(chuàng)建，接下來會建一個)。

創(chuàng)建本地倉庫，推送到github

首先我們進入我們的本地博客站點目錄，也就是?E:\myblogs

右鍵?GitBashHere?打開git命令行初始化一個倉庫，并提交所有的博客文件到git本地倉庫。

涉及命令如下：

git init // 初始化一個倉庫

git add -A // 添加所有文件到暫存區(qū)，也就是交給由git管理著

git commit -m "myblogs first commit" // 提交到git倉庫，-m后面是注釋

git remote add origin https://github.com/Corefo/myblogs.git

git push -u origin master // 推送到遠程myblogs倉庫

按上面的命令順序操作，不出意外的話，我們的本地myblogs已經(jīng)同步到了github上面了。

刷新github的頁面來看下。

使用Github Pages功能建立站點

這一步相當簡單，簡單到令人發(fā)指！！

在myblogs倉庫下，選中?Settings?選項，

然后鼠標一直向下滾動，直到看到?GitHubPages?頁簽，在Source下面選擇?master branch/docs folder?選項。

?好了，ok了，完美了，這么簡單。

同時，還會提示你在哪里去訪問你的站點。?

按照提示，我們訪問看看：

總結

以上是生活随笔為你收集整理的用js实现导航栏shoufang效果_【读者投稿】用Github+docsify，我花了半天就搭好了个人博客...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。