這段時(shí)間弄了一哈個(gè)人博客怠益,感覺挺有意思的仪搔,于是邊學(xué)邊做了一哈記錄,就有了這篇博客蜻牢。
GitHub Pages
1.進(jìn)入Github賬號烤咧, 建立一個(gè)名字為username.github.io
(其中username為你自己的用戶名)形式的倉庫
- 將剛建立的倉庫克隆至本地:
-
測試一下GitHub Pages是否順利運(yùn)行
-
上傳一個(gè)內(nèi)容為“Hello World”的html文件
$ cd username.github.io # 注意這里的username為你的用戶名 $ echo "Hello World" > index.html $ git add --all $ git commit -m "測試" $ git push -u origin master
-
-
打開
https://username.github.io
這個(gè)網(wǎng)站(注意username為你的用戶名),如果試一下情況則表示成功了:
部署hexo
安裝
在安裝Hexo之前需要安裝以下程序:
- Git
- Node.js
由于之前在建立Git Pages時(shí)已經(jīng)安裝好了git bash抢呆,所以接下來就需要安裝Node.js了
安裝Node.js
由于我的電腦是win10系統(tǒng)煮嫌,所以我選擇用安裝包進(jìn)行安裝
-
進(jìn)入
https://nodejs.org/en/
這個(gè)網(wǎng)站進(jìn)行下載,我選擇的是左邊的穩(wěn)定版 -
注意在安裝過程中記得選add to path選項(xiàng)添加至環(huán)境變量
安裝Hexo
由于之前在安裝時(shí)已將nvm
添加至環(huán)境變量抱虐,所以可以直接通過nvm
命令安裝Hexo
$ npm install -g hexo-cli
可能要等一段時(shí)間才會(huì)安裝成功昌阿,我的就等了20s。恳邀。宝泵。
部署
成功安裝之后,就可以開始Hexo的部署了轩娶!
啟動(dòng)hexo
首先創(chuàng)建項(xiàng)目文件夾,我自己的文件夾名字是hexo_blog
$ hexo init hexo_blog
$ hexo install
$ hexo server
之后用瀏覽器打開localhost:4000
出現(xiàn)以下畫面說明Hexo服務(wù)正常啟動(dòng):
部署hexo至GitHub Pages
修改部署配置
打開上一步創(chuàng)建的hexo_blog
文件夾框往,其中有一個(gè)名為_config.yml
的文件鳄抒,修改以下配置:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
修改為:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/JasonLmile/jasonlmile.github.io.git
branch: master
注意!R住许溅!上面那個(gè)repo
的值應(yīng)該是你之前建立的那個(gè)GitHub Pages項(xiàng)目的地址!1妗贤重!
進(jìn)行部署
-
先安裝
hexo-deployer-git
$ npm install hexo-deployer-git
-
進(jìn)行部署
$ hexo deploy
完成之后瀏覽器打開
GitHub Pages
項(xiàng)目的地址https://username.github.io
,發(fā)現(xiàn)跟你之前啟動(dòng)本地服務(wù)器后訪問localhost:4000
的效果是一樣的清焕,這代表部署成功了2⒒取狈谊!
Hexo設(shè)置
主要設(shè)置
通過修改_config.yml
配置文件對博客進(jìn)行修改适滓,常用的參數(shù)有如下幾種:
- title:網(wǎng)站標(biāo)題
- subtitle:網(wǎng)站副標(biāo)題
- description:網(wǎng)站描述
- anthor:作者名稱
- language:網(wǎng)站使用語言
主題修改
可能你會(huì)認(rèn)為默認(rèn)的主題不太好看即寡,沒關(guān)系链烈,你可以在https://hexo.io.themes/
中尋找自己喜歡的主題牡辽,克隆至本地進(jìn)行配置屎篱。以目前最火的一個(gè)主題next
為例:
-
進(jìn)入之前建立的hexo項(xiàng)目文件夾(我建立的叫
hexo_blog
)盈罐,執(zhí)行:$ cd themes $ git clone https://github.com/iissnan/hexo-theme-next
-
更改配置文件
_config.yml
:將以下內(nèi)容:
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape
改為
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: hexo-theme-next
其中
theme
的值為你下載至本地的主題名字 -
執(zhí)行以下命令驻右,在本地進(jìn)行調(diào)試:
$ hexo clean $ hexo generate $ hexo server
這三條命令分別有以下功能:
-
hexo clean
:清空及刪除public
文件夾 -
hexo generate
:生成靜態(tài)文件 -
hexo server
:啟動(dòng)本地服務(wù)器進(jìn)行調(diào)試
這時(shí)候訪問
http://localhost:4000/
會(huì)發(fā)現(xiàn)博客主題已經(jīng)變了:之后可通過
hexo deploy
命令部署至Github上 -
主題設(shè)置
主要是通過theme
文件夾下的_config.yml
文件進(jìn)行設(shè)置(M谎F鹛琛涡贱!注意這個(gè)和之前的_config.yml文件同名但是不同位置)
首頁顯示摘要
將enable的值由false
改為true
就可以在首頁只顯示文章摘要了。默認(rèn)顯示前150個(gè)字惹想,但是你可以通過在發(fā)布的文章中添加>
來指定摘要的內(nèi)容问词,只顯示這個(gè)符號前面的文字。
添加標(biāo)簽界面
新建一個(gè)頁面命名為tags
:
$ hexo new page tags
這時(shí)會(huì)發(fā)現(xiàn)在項(xiàng)目下source
文件夾下會(huì)出現(xiàn)一名為tags
的新建文件夾勺馆,對該文件夾里的index.md
文件進(jìn)行編輯:
---
title: tags
date: 2019-03-04 20:38:08
type: tags
comments: false
---
添加分類界面
與添加標(biāo)簽界面類似戏售,先新建一個(gè)名為categories
的界面:
$ hexo new page tags
編輯categories下的index.md
為:
---
title: categories
date: 2019-03-04 20:36:29
type: categories
comments: false
---
添加評論系統(tǒng)
next主題本身就集成了Valine評論系統(tǒng),不過需要leancloud賬號才能使用草穆。所以首先你需要注冊一個(gè)賬號:
注冊完之后需要先創(chuàng)建一個(gè)應(yīng)用:
創(chuàng)建之后悲柱,點(diǎn)開該應(yīng)用锋喜,進(jìn)入設(shè)置->安全中心,將web安全域名改為你的博客域名豌鸡。然后進(jìn)入設(shè)置->應(yīng)用Key復(fù)制App ID
和App Key
的值嘿般,填入主題配置文件中:
再將文件中enable
的值改為true。部署之后博客就可以評論了涯冠。
添加閱讀次數(shù)
next主題同樣提供了leancloud的統(tǒng)計(jì)閱讀次數(shù)的功能炉奴。我們只需要打開之前創(chuàng)建的leancloud應(yīng)用(注意ACL權(quán)限設(shè)置為無限制),點(diǎn)開 存儲(chǔ)->數(shù)據(jù)->創(chuàng)建Class 創(chuàng)建一個(gè)名稱為Counter的class蛇更,之后再修改主題配置文件即可瞻赶。
最后曬一下自己的博客把,雖然只有兩篇文章??
參考: