快速搭建一個自己的個人博客(Github Pages~二次元主題)

前言

本次的一個佈局技術都寫的非常詳細了,只要按着來就行,不過,先說明本次主題爲二次元主題。
如果真的喜歡本主題的不妨可以試一試(建議跟據目錄來看

在很久很久以前。。。。

嘛,就在前不久我正在。。
在這裏插入圖片描述

額,上圖僅僅表示我的無敵 無聊,本人不抽菸。
嗯嗯,在我閒來無事的過程中我找到了一個我特別喜歡的個人博客網站;
然後:(放圖~哦哦)
在這裏插入圖片描述

大佬”蟬時雨“,自己寫的主題:
1、所用前端技術:vue
2、博客文章存儲技術:Github issuses(就是原項目的討論部分,分類,心情也是使用的,待會細講)
3、博客評論技術:Gittalk (嗯,就是github提供的開發者設置裏面有)
4、博客熱度技術:LeanCloud (因爲沒有後端數據庫方面,所以使用第三方存儲)

傳送門:蟬時雨的網站
傳送門:蟬時雨的github

嘛,待會就以這幾個部分講解


技術簡單過

先說好其實並不難,真的不難,按着來就行!!!
思維圖如下:
在這裏插入圖片描述
腦圖版:
在這裏插入圖片描述

本次的倉庫:
在這裏插入圖片描述

本次的要改動代碼:
在這裏插入圖片描述
本次環境:

在食用 Aurora 主題之前,需先安裝 Nodejs 和 Git 環境,這兩步不必細說。環境安裝完畢,由於 Aurora 使用 vue 開發,所以需要安裝 vue-cli。

歐克,Let`go


Github Pages 的部署(個人網址的託管)

1、創建自己github的Pages(並把項目拉下來自己測試跑)

①、安裝環境和拉取項目

需先安裝 Nodejs 和 Git 環境,這兩步不必細說

①安裝vue-cli

npm install -g @vue/cli-service-global

②拉取項目(唔,經常玩的倒是不用這麼解釋了)

# clone 主題
git clone git@github.com:chanshiyucx/aurora.git
 
# 進入主題目錄
cd aurora
 
# 安裝依賴包
npm install
 
# 本地預覽
npm start

依賴包安裝完畢,便可執行 npm start 本地預覽效果,訪問 http://localhost:8080/, 當然現在看到的是蟬時雨的博客

②、創建自己github的Pages

重點是 github pages庫的創建,並且一個用戶只能有一個Pages

在這裏插入圖片描述
1、測試
在這裏插入圖片描述
2、選主題在這裏插入圖片描述

3、然後直接在網址輸入自己的網址,(比如我的:liwangwang321.github.io)

我的是我的主題,你們是剛剛選擇的主題。。。
在這裏插入圖片描述


2、如何把自己本地的項目部署到自己的Pages

這個時候我們已經簡單的把大佬的主題拉下來了,
那麼就開始第一次部署到自己的Pages上(啥也不改)

現在大佬的主題有一鍵部署的功能
在這裏插入圖片描述
修改內容
在這裏插入圖片描述
然後記得 Shift+右鍵 (用管理員的權限執行命令,我之前第一次沒執行成功,然後使用管理員權限就行了)
在這裏插入圖片描述
成功
在這裏插入圖片描述


Github issues (原功能是追蹤項目的)

1、配置專門訪問的token令牌

①、註冊一個token令牌

這個token令牌是用來去訪問github倉庫的訪問權限的設置。
在這裏插入圖片描述

成功後:
在這裏插入圖片描述

②、把註冊完的token令牌設置到自己的項目中

在這裏插入圖片描述


2、設置(書單,靈感,友鏈,關於)、(分類,標籤)

在這裏插入圖片描述

①設置closed的issues

在這裏插入圖片描述
設置labels(也可以設置分類)
在這裏插入圖片描述


②設置open的issues

在這裏插入圖片描述
設置
在這裏插入圖片描述


③書單,關於,友鏈格式規定(標籤,分類設置)

書單:書單頁面使用##做分割,內容示例如下:

	
## ES6 標準入門
 
author: 阮一峯
published: 2017-09-01
progress: 正在閱讀...
rating: 5,
postTitle: ES6 標準入門
postLink: //chanshiyu.com/#/post/12
cover: //chanshiyu.com/yoi/2019/ES6-標準入門.jpg
link: //www.duokan.com/book/169714
description: 柏林已經來了命令,阿爾薩斯和洛林的學校只許教 ES6 了...他轉身朝着黑板,拿起一支粉筆,使出全身的力量,寫了兩個大字:“ES6 萬歲!”(《最後一課》)。

友鏈:友鏈頁面使用##做分割,內容示例如下:

	
## 閣子
 
link: //newdee.cf/
cover: //i.loli.net/2018/12/15/5c14f329b2c88.png
avatar: //i.loli.net/2018/12/15/5c14f3299c639.jpg

關於:關於頁面使用##做分割,內容示例如下:

	
## 關於
 
隨便

標籤設置
在這裏插入圖片描述
分類設置
在這裏插入圖片描述

文章模塊
文章模板沒有太多的格式約束,只需要在文章正文頂部加上封面配圖即可,配圖採用的是 markdown 的註釋語法,所以並不會在正文裏渲染,以後即使你更換博客主題,也不會影響內容的展示。

[pixiv: 41652582]: # 'https://raw.githubusercontent.com/chanshiyucx/yoi/master/bg/3.jpg'

在這裏插入圖片描述


Gitalk (評論系統)

1、設置一個評論應用

位置:
在這裏插入圖片描述
新建引用
在這裏插入圖片描述

2、把註冊完的ID和Secret放到自己項目中

位置:

在這裏插入圖片描述

修改文件:
在這裏插入圖片描述

3、給每一個需要評論的文章或者(關於,書單,友鏈)建一個 issues

具體的可以去大佬的倉庫看看
傳送門:蟬時雨的github
在這裏插入圖片描述


LeanCloud (第三方管理數據,類似數據庫的概念)

在這裏插入圖片描述

1、註冊LeanCloud賬戶和創建應用

賬戶要是國際版的
在這裏插入圖片描述
創建應用
在這裏插入圖片描述

2、創建三個class(Comment,Counter,Visitor)

在這裏插入圖片描述

3、把對應的ID 和Key來修改自己配置

在這裏插入圖片描述
修改配置
在這裏插入圖片描述


後言

嘛,差不多了,其實要改變的配置就改變那個config.js就差不多了,

其他的感覺多玩下github就行,

啊啊,不過說實話之前還是不太會玩github來着,現在。。。。。

如果真的喜歡本主題的不妨可以試一試,倉庫可以直接去看
在這裏插入圖片描述

傳送門:蟬時雨的網站
傳送門:蟬時雨的github
我的傳送門:https://liwangwang321.github.io/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章