2. 河豚號 > 生活百科 >

個人免費博客注冊申請（國內(nèi)免費博客申請地址）

河豚俠 ? 生活百科 ? 2022-09-30 09:54:09 ?

基于Github Pages + docsify，我花了一小時搭建好了個人博客還順手還寫了這篇文章

效果：

封面

 

5分鐘教你搭建個人博客，純白嫖，花了一分錢你來打我

 

內(nèi)容頁

 

5分鐘教你搭建個人博客，純白嫖，花了一分錢你來打我

 

經(jīng)驗之談：就個人博客來講，筆者已經(jīng)折騰過很多了，用過WordPress、Typecho、Hexo等等，主機也用過基于免費的GitPages或者付費的VPS，最后都不了了之，原因要么是VPS到期了懶得續(xù)費，要么是數(shù)據(jù)遷移各種費心，博客要么是基于動態(tài)的比如WordPress需要數(shù)據(jù)庫，要么是基于靜態(tài)的比如Hexo，一遷移你將要面對的是一堆數(shù)據(jù)庫的數(shù)據(jù)或者是HTML代碼，移植都太麻煩。最后我挖掘了我兩個核心需求：免費，易移植，那么Github Pages + docsify完全滿足了我的需求

免費：Github Pages本來就是免費的

易移植：docsify是基于js將md文檔轉(zhuǎn)換成html，計算在客戶端，不在服務(wù)器端，服務(wù)器只用存md，這個就很舒服了，以后你的博客數(shù)據(jù)不會是一堆數(shù)據(jù)庫數(shù)據(jù)或者html代碼，而是具有可讀性的md文檔，下面詳細介紹一下

docsify和一般的使用Hexo、Jekyll、Hugo等博客框不同的是，支持Markdown格式，對程序員的博主們是很友好的。 不用生成html文件，寫完MD格式的博客直接往上一放，框架自己在運行時解析渲染成html頁面。

準(zhǔn)備工作

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

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

因為我們要使用Github Pages來部署我們的應(yīng)用，請先注冊下github的賬號，官網(wǎng)：Github

2、有node環(huán)境

Windows下安裝node環(huán)境

簡單而言

去官網(wǎng)下載nodejs：https://nodejs.org/en/，安裝好

npm設(shè)置代理或鏡像，不然因為周所周知的原因會慢到你可能無法想象設(shè)置代理，按照實際情況來# http代理

npm config set proxy=http://127.0.0.1:8087npm config set registry=http://registry.npmjs.org# https代理npm config set https-proxy http://server:port# 設(shè)置用戶名或密碼，沒有就不管npm config set proxy http://username:password@server:portnpm confit set https-proxy http://username:password@server:port# 取消代理npm config delete proxynpm config delete https-proxy設(shè)置鏡像(推薦)，如果沒有代理，可以設(shè)置個國內(nèi)鏡像# 設(shè)置淘寶鏡像

npm config set registry https://registry.npm.taobao.org# 驗證成功沒npm config get registry

3、簡要說明一下步驟

使用docsify命令生成文檔站點

在github上部署站點

docsify官網(wǎng)

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

使用docsify命令生成文檔站點

安裝docsify-cli 工具

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

npm i docsify-cli -g

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

初始化一個項目

docsify init ./docs

index.html 入口文件

README.md 會做為主頁內(nèi)容渲染

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

啟動項目，預(yù)覽效果

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

docsify serve docs

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

1、配置左側(cè)導(dǎo)航欄

不建議配置，配置了就不能顯示當(dāng)前文章的目錄

在 docs目錄下新建一個_sidebar.md 的md文件，內(nèi)容如下：

- 我的博客

- [第一章節(jié)](blog/博客搭建.md)

在index.html文件中配置一下。在內(nèi)嵌的js腳本中加上下面這句：

loadSidebar: true

2、配置個封面

套路和上面配置左側(cè)導(dǎo)航欄是一樣的。

首先新建一個 _coverpage.md 的md文件，這里面的內(nèi)容就是你封面的內(nèi)容。

# Myblogs

> 我的博客

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

[滾動鼠標(biāo)](#introduction)

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

coverpage: true

3、配置首頁

其實就是 docs目錄下README.md` 文件的內(nèi)容。

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

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

部署到Github上

登錄github賬號，建倉庫

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

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

涉及命令如下：

git init // 初始化一個倉庫

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

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

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

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

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

使用Github Pages

在myblogs倉庫下，選中 Settings 選項，找到GitHub Pages 頁簽，在Source下面選擇master branch / docs folder 選項。即可完成

本文由網(wǎng)上采集發(fā)布，不代表我們立場，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.zltfw.cn/shbk/48344.html

相關(guān)推薦

聯(lián)系我們

在線咨詢：點擊這里給我發(fā)消息

微信號：15705946153

工作日：9:30-18:30，節(jié)假日休息