目錄

• 前言
• 一些說明
• 準備工作
• 上docsify官網看一看
• 使用docsify命令生成文件站點
• 部署到Github上
• 寫在最後

前言

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

搭建部落格只是一個小任務，為啥遲遲不能完成？只能說明鄙人執行力太差。想的多做的少，大多數時候我們只要開始行動之後，好多問題都會迎刃而解了。引用最新網上很流行的一段話，與君工勉之：

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

因此，幹就完了。

一些說明

先來看下我搭建好的效果

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

使用的框架技術

• docsify框架
• 基於Github Pages的站點部署

我是在Windows 7下搭建的

網上好些搭建部落格的視訊教程，大部分用的是否Macbook。沒辦法，“實力確實不允許啊”，我還掙扎在Windows的苦海中。等我有錢了，我也要賣最的Mac，寫最渣的程式碼。

準備工作

1、要有git環境，有github賬號

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

因為我們要使用Github Pages來部署我們的應用，請先註冊下github的賬號，官網：Github

2、有node環境

docsify框架需要有node環境的支援。上node.js的官網下載安裝包，此處下載Windows版本的，點下一步一路安裝下去即可。另外需要配置下環境變數。

這裡貼上一篇安裝操作指南，按這個來一定可以裝好node環境。

Windows下安裝node環境

3、簡要說明一下步驟

• 上docsify官網瞭解下，裡面有使用的步驟了。
• 使用docsify命令生成文件站點
• 在github上部署站點

上docsify官網看一看

地址：https://docsify.js.org/#/

docsify官網

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

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

最主要的特性是，支援Markdown格式，對程式設計師的博主們是很友好的。

不用生成html檔案，寫完MD格式的部落格直接往上一放，框架自己在執行時解析渲染成html頁面。

使用docsify命令生成文件站點

安裝docsify-cli 工具

推薦安裝 docsify-cli 工具，可以方便建立及本地預覽文件網站。

npm i docsify-cli -g

因為我們已經安裝了node環境，所以直接開啟CMD視窗執行上面的命令就好了。

初始化一個專案

然後我們選擇一個目錄，作為我們的部落格站點目錄。也就是專案要生成的目錄。

比如我在E盤下新建了一個myblogs的目錄

開啟CMD黑框，cd到該目錄，執行如下命令：

docsify init ./docs

執行完成後，目錄結構就會變成這樣

可以看到，多了一個docs資料夾，其實這個資料夾就是將來我們存放MD格式的部落格檔案的地方。

與此同時，docs目錄下會生成幾個檔案。

• index.html 入口檔案
• README.md 會做為主頁內容渲染
• .nojekyll 用於阻止 GitHub Pages 會忽略掉下劃線開頭的檔案

啟動專案，預覽效果

到這裡，就可以啟動專案，然後看下效果了。

使用下面命令啟動專案：

docsify serve docs

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

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

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

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

1、配置左側導航欄

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

- 設計模式

  - [第一章節](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)

- 資料庫

這其實就是最基本的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 檔案的內容。

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

改一下，放上自己牛逼的經歷或者是標籤。

# 最迷人的二營長

> [個人部落格](https://blog.csdn.net/m0_37965018)


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

看下效果

部署到Github上

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

登入github賬號，建立倉庫

登入github的官網，建立一個倉庫，起個名字吧，就叫myblogs。

倉庫建立好了，我們使用第二種方式匯入一個本地倉庫（本地倉庫還沒有建立，接下來會建一個）。

建立本地倉庫，推送到github

首先我們進入我們的本地部落格站點目錄，也就是 E:\myblogs

右鍵Git Bash Here 開啟git命令列初始化一個倉庫，並提交所有的部落格檔案到git本地倉庫。

涉及命令如下：

git init // 初始化一個倉庫
git add -A // 新增所有檔案到暫存區，也就是交給由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已經同步到了github上面了。

重新整理github的頁面來看下。

使用Github Pages功能建立站點

這一步相當簡單，簡單到令人髮指！！

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

然後滑鼠一直向下滾動，直到看到 GitHub Pages 頁籤，在Source下面選擇master branch / docs folder 選項。

好了，ok了，完美了，“wocao，這麼簡單”。

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

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

寫在最後

本篇演示的專案已經上傳到github上面，有興趣的老鐵們可以試一試。

地址：https://github.com/Corefo/myblogs

最後，“我有一言，請諸位靜聽”：麻煩看完的，點個贊再走！

歡迎關注微信公眾號： 二營長的