什么是Hexo?Hexo 是一個(gè)快速崎淳、簡(jiǎn)潔且高效的博客框架堪夭。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi)拣凹,即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)森爽。堪稱在座各位喜歡Markdown的優(yōu)雅人士博客建站神器喲嚣镜!
1. Quick Start
1.1 創(chuàng)建存放Github Pages的倉(cāng)庫(kù)
Github Pages 是面向用戶爬迟、組織和項(xiàng)目開(kāi)放的公共靜態(tài)頁(yè)面搭建托管服務(wù),站點(diǎn)可以被免費(fèi)托管在 Github 上菊匿,你可以選擇使用 Github Pages 提供的域名 github.io 或者自定義域名來(lái)發(fā)布站點(diǎn)付呕。
需要Github賬號(hào),請(qǐng)登錄https://github.com/ 注冊(cè)跌捆。
登錄了自己的github賬號(hào)后徽职,可以安裝下圖一樣,創(chuàng)建自己的GitHub Pages倉(cāng)庫(kù)名[參考https://pages.github.com/ ]佩厚,[PS] 倉(cāng)庫(kù)名repository name需要約定為: 你的賬號(hào)名.github.io
創(chuàng)建好博客項(xiàng)目倉(cāng)庫(kù)后姆钉,可以通過(guò)git命名下載到本地,并編輯一下README.md從本地提交到GitHub,這樣做主要是使本地文件與Github關(guān)聯(lián)起來(lái)育韩,方便后面hexo deploy,直接部署博客內(nèi)容到GitHub進(jìn)行更新克蚂。
$ git clone https://github.com/yourGithubName/yourGithubName.github.io
$ vim README.md
# REAMME.md上可以簡(jiǎn)單寫(xiě)一些博客介紹啥的
$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"
$ git add ./
$ git commit -m 'test'
$ git push -u origin master
Username for 'https://github.com': Builder34
Password for 'https://Builder34@github.com':
1.2 Hexo安裝
安裝 Hexo 相當(dāng)簡(jiǎn)單。然而在安裝前筋讨,您必須檢查電腦中是否已安裝下列應(yīng)用程序:
- Node.js (請(qǐng)看https://nodejs.org/zh-cn/)
- Git (請(qǐng)看https://git-scm.com/downloads)
安裝好上面2個(gè)程序后埃叭,可以進(jìn)行hexo的安裝了:
$ npm install -g hexo-cli
1.3 Hexo初始化
安裝 Hexo 完成后,我們可以在本地新建一個(gè)文件夾如:builder34.github.io(這個(gè)目錄是我們Github Pages博客項(xiàng)目的目錄),假如我的文件夾路徑為/home/test/builder34.github.io悉罕,建站初始化命令可以如下:
$ cd /home/test/builder34.github.io
$ hexo init ./
$ npm install
$ hexo generate
下面介紹幾個(gè)常用的hexo命令(括號(hào)里面的命令為縮寫(xiě)形式赤屋,效果一樣):
1. hexo generate(hexo g) #生成靜態(tài)文件,會(huì)在當(dāng)前目錄下生成一個(gè)新的叫做public的文件夾
2. hexo new "postTitle" #新建博客文章
3. hexo new page "pageTitle" #新建1個(gè)頁(yè)面
4. hexo server(hexo s) #啟動(dòng)本地web服務(wù)預(yù)覽(加參數(shù)--debug,用于調(diào)試壁袄,如:hexo s --debug)
5. hexo deploy(hexo d) #部署播客到遠(yuǎn)端(比如Github,coding,heroku等平臺(tái))
在命令行中輸入hexo s --debug
后类早,運(yùn)行成功后,可以在瀏覽器中輸入:http://localhost:4000看到自己新建的博客了嗜逻。
1.4 更改主題
一般我們初始化博客的文件夾后涩僻,文件結(jié)構(gòu)大概如下:
$ ll
total 1352
-rw-r--r-- 1 builder34 staff 32B 4 14 01:34 README.md
-rw-r--r-- 1 builder34 staff 2.3K 6 25 10:40 _config.yml
-rw-r--r-- 1 builder34 staff 32K 6 26 15:50 db.json
-rw-r--r-- 1 builder34 staff 458K 6 26 15:56 debug.log
drwxr-xr-x 293 builder34 staff 9.2K 6 25 10:42 node_modules
-rw-r--r-- 1 builder34 staff 110K 6 22 23:59 package-lock.json
-rw-r--r-- 1 builder34 staff 564B 6 22 23:59 package.json
drwxr-xr-x 14 builder34 staff 448B 6 25 10:40 public
drwxr-xr-x 5 builder34 staff 160B 4 17 23:12 scaffolds
drwxr-xr-x 3 builder34 staff 96B 6 25 10:57 source
drwxr-xr-x 6 builder34 staff 192B 6 25 11:33 themes
themes文件夾是我們博客主題的存放地方,下面我推薦一個(gè)主題:BlueLake
$ cd themes/
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git ./BlueLake
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-stylus --save
(該主題更細(xì)致的配置栈顷,請(qǐng)登錄上面這個(gè)github網(wǎng)址逆日,閱讀README.md進(jìn)行定制化配置)
在Hexo配置文件($your_blog_path/_config.yml)中把主題設(shè)置修改為BlueLake。
theme: BlueLake
完成配置后萄凤,執(zhí)行下面語(yǔ)句室抽,重新打開(kāi)http://localhost:4000 可以看到博客以一個(gè)新的主題展現(xiàn)了
$ hexo g
$ hexo s --debug
1.5 hexo部署到Github
配置$your_blog_path/_config.yml文件的Deployment:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/your_githubName/your_githubName.github.io.git
通過(guò)下面的命名進(jìn)行博客靜態(tài)頁(yè)面的生成,以及部署到遠(yuǎn)端Github Pages
#刪除靜態(tài)文件,即 public 文件
$ hexo clean
#生成靜態(tài)文件,即 public 文件
$ hexo generate
#部署到遠(yuǎn)程站點(diǎn)
$ hexo deploy
#也可以使用組合命令(替代上面2條命令):生成靜態(tài)命令并部署到遠(yuǎn)程站點(diǎn)
$ hexo deploy -g
使用 hexo deploy 命名部署到github失敗靡努,報(bào)上面的錯(cuò)誤時(shí)坪圾,安裝下面的插件即可解決:
$ npm install hexo-deployer-git --save
至此,Hexo+Github Pages構(gòu)建個(gè)人博客網(wǎng)站已經(jīng)基本完成了惑朦∈扌梗可以通過(guò)網(wǎng)頁(yè)訪問(wèn)自己的博客地址如:https://builder34.github.io
2.設(shè)置博客自定義域名
進(jìn)入自己博客的repository倉(cāng)庫(kù),通過(guò)類似如下的頁(yè)面進(jìn)行設(shè)置:
進(jìn)入了settings頁(yè)面后漾月,往下拉直到看到Github Pages模塊:
所填的自定義域名是需要自己已經(jīng)在萬(wàn)網(wǎng)上注冊(cè)的了已日,并且如果勾選了 Enforce HTTPS 的話,你的域名是需要ssl證書(shū)的喲栅屏。
3.注意事項(xiàng)
3.1 上傳README.md并防止被渲染成文章
#在博客根目錄下,新建或編輯你的README.md文件
$ vim README.md
$ mv README.md ./sources
#修改_config.yml文件,設(shè)置不渲染的文件
$ vim _config.yml
skip_render: README.md
3.2 每次hexo deploy
后Github Pages自定義域名會(huì)被重置的問(wèn)題
需要在sources目錄下新建CNAME文件(注意為全大寫(xiě)無(wú)后綴的文件哦),文件內(nèi)容為你需要映射到的自定義域名:
$ vim CNAME
blog.monbuilder.top
$ mv CNAME ./sources