基於Github Pages + docsify,我花了半天就搭建好了個人博客


前言

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

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

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

因此,干就完了

一些說明

先來看下我搭建好的效果

在這里插入圖片描述
在這里插入圖片描述

和一般的使用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

最后,“我有一言,請諸位靜聽”:麻煩看完的,點個贊再走!

歡迎關注微信公眾號: 二營長的筆記


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM