使用Hexo搭建博客步骤详解
簡(jiǎn)介
hexo —— 簡(jiǎn)單、快速、強(qiáng)大的Node.js靜態(tài)博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。
特性
風(fēng)一般的速度
Hexo基于Node.js,支持多進(jìn)程,幾百篇文章也可以秒生成。流暢的撰寫
支持GitHub Flavored Markdown和所有Octopress的插件。擴(kuò)展性
Hexo支持EJS、Swig和Stylus。通過插件支持Haml、Jade和Less.
基本配置和使用的工具
操作系統(tǒng):Windows 7
使用的工具:Git和Node.js
Git用于把部署在GitHub的內(nèi)容獲取至本地,Node.js用于安裝Hexo。
基本步驟
安裝Git
- 安裝 Git,目前支持 Linux/Unix、Solaris、Mac和 Windows 平臺(tái)上運(yùn)行
安裝Node.js
- 下載安裝文件,nodejs官網(wǎng),我這里下載的是node-v6.11.2-x64.msi.
安裝nodejs
雙擊”node-v6.11.2-x64.msi”,開始安裝nodejs,自定義安裝在D:\dev\nodejs下面。
在cmd控制臺(tái)輸入:node -v,控制臺(tái)將打印出:v6.11.2,出現(xiàn)版本提示表示安裝成功。
該引導(dǎo)步驟會(huì)將node.exe文件安裝到D:\dev\nodejs\目錄下,并將該目錄添加進(jìn)PATH環(huán)境變量。
安裝相關(guān)環(huán)境
npm install express -g npm install jade -g npm install mysql -g npm install coffee-script -g所有命令都是-g進(jìn)行全局安裝的,這樣安裝的安裝包都在當(dāng)前用戶下,在磁盤的所有其他地方都可以訪問到,比較方面。否則安裝在當(dāng)前目錄下,只能在當(dāng)前目錄下使用。
默認(rèn)情況下上述組件都是安裝在D:\dev\nodejs\node_modules文件夾下,這也是nodejs相關(guān)組件的自動(dòng)查找路徑。確認(rèn)安裝的命令:coffee -v,出現(xiàn)版本號(hào)表示成功安裝。
以上環(huán)境基本就配置完成
安裝Hexo
這一步的前提是必須先安裝 Node.js和Git
1 npm install hexo -g 升級(jí),更新hexo到最新版(升級(jí)僅需一步就把 Hexo 本體和所有相依套件安裝完畢)
1 npm update hexo -g 安裝hexo-deployer-git,用于將博客的內(nèi)容部署到git上
1 npm install hexo-developer-git --save 初始化如果指定 <folder>,便會(huì)在目前的資料夾建立一個(gè)名為<folder>的新資料夾;否則會(huì)在目前資料夾初始化。在Git命令行窗口中輸入(指定 的方法是):
cd [需要指定的文件夾路徑]跳轉(zhuǎn)到對(duì)應(yīng)的文件夾目錄下后,進(jìn)行初始化:
hexo init初始化后對(duì)應(yīng)的資料夾中有一下文件(_config.yml, theme/, source/, scaffolds/, package.json, .gitignore);文件作用:
_config.yml:整個(gè)站點(diǎn)的配置,包括基本介紹,所使用的主題,關(guān)聯(lián)的倉(cāng)庫(kù)等;
theme/:所用的主題以及主題的配置;
source/:目前所寫的所有文章以及404頁面等;
scaffolds/:Hexo所提供的模板文件;
package.json:說明站點(diǎn)使用了哪些包;
gitignore:放置在git端時(shí)忽略的文件;
安裝Markdown編輯器
簡(jiǎn)介:Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言,通過類似HTML的標(biāo)記語法,它可以使普通文本內(nèi)容具有一定的格式。git上上傳的文本一般都是用Markdown編輯的,而且它的語法也很簡(jiǎn)單,所以這很實(shí)用。
安裝,下載地址,下載得到 markdownpad2-setup.exe,雙擊并完成安裝。
作用:由于使用Hexo寫博客,其中博客文章的格式就是.md格式,需要使用Markdown編輯器完成編輯,將純文本轉(zhuǎn)化為html,在瀏覽器上顯示出來。
Markdown語法說明
安裝主題
可以到Hexo官網(wǎng)主題頁去搜尋自己喜歡的theme。我安裝的是hexo-theme-next。
next主題使用文檔:http://theme-next.iissnan.com/
hexo的next主題個(gè)性化教程:打造炫酷網(wǎng)站
發(fā)布文章
1) 新建文章
在對(duì)應(yīng)的博客文件夾下的git-bash命令行中運(yùn)行以下命令
$ hexo new "filename" #新建文章新建文章之后,在博客對(duì)應(yīng)的文件夾source\_posts中找到對(duì)應(yīng)的.md文件,然后用Markdown編輯器打開,對(duì)文章內(nèi)容進(jìn)行編輯。
2)本地服務(wù)器上測(cè)試
保存文章后,在git-bash命令行中輸入以下命令
| 1 2 3 4 5 6 7 | # 清除Hexo的緩存,包括 (db.json) 和已生成的靜態(tài)文件 (public) $ hexo clean $ hexo new "Hello World" # 創(chuàng)建新博客 $ hexo generate # 生成靜態(tài)網(wǎng)站,或者h(yuǎn)exo g命令 $ hexo s # 打開本地服務(wù)器 |
伺服器會(huì)跑在 http://localhost:port (port 預(yù)設(shè)為 4000,可在 _config.yml 設(shè)定),可在本地訪問:http://localhost:4000
3)關(guān)聯(lián)遠(yuǎn)程GitHub
修改_config.yml配置文科,終端cd到blog(這個(gè)是本地存放博客的文件夾,如beatriceblog)文件夾下,打開_config.yml,找到文件的最后兩行,修改成下邊的樣子:
1
2
3
4deploy:
type: git
repository: https://github.com/jeasonstudio/jeasonstudio.github.io.git
branch: master
2
3
4
5
# 生成網(wǎng)頁時(shí),出現(xiàn)錯(cuò)誤:ERROR Local hexo not found in ~/blog
npm install hexo --save
# 若執(zhí)行命令hexo deploy仍然報(bào)錯(cuò):無法連接git,則執(zhí)行如下命令來安裝hexo-deployer-git:
npm install hexo-developer-git --save
關(guān)聯(lián)GitHub賬號(hào)及倉(cāng)庫(kù)
根據(jù)已有的GitHub賬號(hào),配置本地Git(其實(shí)就是建立本地Git與服務(wù)器上GitHub賬號(hào)的關(guān)聯(lián))
在本地創(chuàng)建ssh key:在本地的git bash命令窗口輸入下列命令,`your_email@youremail.com為你在github上注冊(cè)的郵箱,如beatrice.qq.com`
1 $ ssh-keygen -t rsa -C [your_email@youremail.com] 復(fù)制ssh key: ,輸入上面的命令后,會(huì)要求確認(rèn)路徑和輸入密碼,我們這使用默認(rèn)的一路回車就行。成功的話會(huì)在C:\Users\[本機(jī)的用戶名]下生成.ssh文件夾,進(jìn)去,打開id_rsa.pub,所有的文件內(nèi)容就是ssh key,復(fù)制下來。
添加ssh key到Github:回到github網(wǎng)頁上,進(jìn)入 Account Settings(賬戶配置),左邊選擇SSH Keys,Add SSH Key,title隨便填,粘貼電腦上生成的key,完成后就是下面的狀態(tài)。
驗(yàn)證是否成功,在git bash下輸入:
1 $ ssh -T git@github.com
2
$ git config --global user.name [your name]
$ git config --global user.email [your_email@youremail.com]
- **關(guān)聯(lián)遠(yuǎn)程GitHub倉(cāng)庫(kù)**,進(jìn)入要上傳的本地倉(cāng)庫(kù)所在目錄,右鍵打開git bash窗口,添加遠(yuǎn)程地址: 1
2
3
4
$ git remote add origin git@github.com:yourName/yourRepo.git
# 例如,連接自己的博客遠(yuǎn)程倉(cāng)庫(kù)
git remote add origin git@github.com:dby124/dby124.github.io.git
> yourName和yourRepo表示你在github的用戶名和剛才新建的倉(cāng)庫(kù),加完之后進(jìn)入.git,打開config,這里會(huì)多出一個(gè)remote "origin"內(nèi)容,這就是剛才添加的遠(yuǎn)程地址,也可以直接修改config來配置遠(yuǎn)程地址。 - **創(chuàng)建新本地git倉(cāng)庫(kù)**:進(jìn)入要上傳的本地倉(cāng)庫(kù)所在目錄,然后執(zhí)行 `git init` 以創(chuàng)建新的 git 倉(cāng)庫(kù)。 1
$ git init
- 參考GitHub簡(jiǎn)明教程
4)部署到對(duì)應(yīng)的網(wǎng)站上去
本地測(cè)試沒有問題后,執(zhí)行下面命令
| 1 2 | $ hexo g # 生成靜態(tài)網(wǎng)頁 $ hexo d #上傳到GitHub對(duì)應(yīng)的倉(cāng)庫(kù)中 |
自動(dòng)備份Hexo博客源文件
安裝shelljs模塊
1 npm install --save shelljs 模塊安裝完成,在blog根目錄的scripts文件夾(如果沒有就新建一個(gè))下新建一個(gè)js文件,文件名隨意取
修改腳本內(nèi)容中,hexo的根目錄路徑
1 cd('D:/nodejs/beatriceblog'); //此處修改為Hexo根目錄路徑
這樣,每次更新博文并deploy到服務(wù)器上之后,備份就會(huì)自動(dòng)啟動(dòng)并完成備份。
參考:hexo個(gè)人博客搭建教程
【Hexo+Github】域名和github綁定的問題
本地端
在/blog/themes/landscape/source目錄下新建文件名為:CNAME文件,注意沒有后綴名!直接將自己的域名如:jeasonstudio.com寫入。
終端cd到blog目錄下執(zhí)行如下命令重新部署:
1
2
3$ hexo clean
$ hexo g
$ hexo d域名解析
- 如果將域名指向一個(gè)域名,實(shí)現(xiàn)與被指向域名相同的訪問效果,需要增加CNAME記錄。
- 登錄你注冊(cè)域名的網(wǎng)站,比如萬網(wǎng),在你購(gòu)買的域名后邊點(diǎn)擊:解析 –> 添加解析
- 記錄類型:CNAME
- 主機(jī)記錄:將域名解析為example.com(不帶www),填寫@或者不填寫
- 記錄值:yourname.github.io. (不要忘記最后的,yourname改為你自己的用戶名),點(diǎn)擊保存即可。
參考:【Hexo+Github】域名和github綁定的問題
總結(jié)
以上是生活随笔為你收集整理的使用Hexo搭建博客步骤详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 时隔3年 一加将再发概念机:搭载颠覆性技
- 下一篇: 消息称一加键盘将于 2 月 7 日在印度