轉(zhuǎn)載請注明原作者,如果覺得有用筛婉,不用請我喝咖啡:D
這篇文章,寫給希望使用Hexo在Github上搭建起個人博客的你癞松,同樣適合像 Lucien 一樣不是程序猿的同學(xué):D
1.前置準(zhǔn)備
- Node.js環(huán)境和npm
- git環(huán)境
- 一點點Markdown基礎(chǔ)
- 一點點git基礎(chǔ)
- 命令行工具爽撒,如Terminal、GitBash
- github帳號响蓉,如果要將你的hexo博客免費部署到github上硕勿,類似我的博客 - 德魯熊的博客的話。
Node.js和npm的安裝枫甲,Mac下的配置可以從我博客中的這篇文章找到源武。
git環(huán)境是必須的,Mac下安裝過Xcode默認(rèn)配置有g(shù)it想幻。沒有安裝過粱栖,現(xiàn)裝一個也非常簡單,參考cocoachina上的這篇文章脏毯,沒有親測過查排。
Markdown,如果是純文字記錄抄沮,不會也沒有關(guān)系跋核,但是會的話可以讓你寫出格式更漂亮的日志和文檔。
至于git叛买,同樣也是不會也沒有關(guān)系砂代,因為在用hexo搭建博客的過程中,使用到的命令來回就那幾行率挣。我會把命令都提供出來刻伊,如果有需要修改的地方會特別標(biāo)注,但是如果會的話,理解起來更容易捶箱。
2.使用Hexo
我們先來說說基本的配置和本機部署智什,這章節(jié)的操作做完后,你可以通過一個本機能訪問的地址 http://0.0.0.0:4000/丁屎,看到自己的博客是什么模樣荠锭。
2.1 npm安裝Hexo
打開命令行工具,執(zhí)行如下命令:
$ npm install -g hexo
如果這一步出錯晨川,請參考這篇文章看看能不能解決你的問題证九。
2.2 創(chuàng)建hexo文件夾
在你打算管理博客內(nèi)容的地方,創(chuàng)建一個名為hexo的文件夾共虑。例如我的在:
/Users/drubear/Development/hexo
你也可以直接使用命令行創(chuàng)建目錄愧怜。
3.2 初始化
在 hexo目錄下 打開命令行工具(或者cd到該目錄下),執(zhí)行:
hexo init
命令行會反饋給你:
You're almost done!Don't forget to run 'npm install' before you start blogging with Hexo!
那么接下來我們就在命令行中執(zhí)行:
npm install
執(zhí)行結(jié)束后妈拌,你只需要執(zhí)行一個簡單的命令拥坛,就可以在瀏覽器中看到博客啦。
hexo已經(jīng)為你準(zhǔn)備了模板尘分,現(xiàn)在打開看看吧猜惋!
先執(zhí)行:
hexo server
會看到
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
訪問http://0.0.0.0:4000/,看見了嗎音诫?里面的這篇文章是Hexo為你準(zhǔn)備的樣例惨奕。
3.發(fā)布新文章
現(xiàn)在你已經(jīng)有了一個可以在本機訪問的博客雪位,接下來試著發(fā)布一篇自己的文章竭钝。
如果剛才已經(jīng)執(zhí)行過hexo server,先用Ctrl+C 暫停Hexo server雹洗。
還是 在你的Hexo目錄下 香罐,使用命令行執(zhí)行:
hexo new "我的第一篇文章"
雙引號內(nèi)名字就是你文章的標(biāo)題。
這行命令執(zhí)行完后时肿,Hexo會告訴你庇茫,
INFO Created: ~/Development/hexo/source/_posts/我的第一篇文章.md
Hexo已經(jīng)在你的hexo目錄中的source/_posts/目錄下為你創(chuàng)建了名為"我的第一篇文章"的.md文件。
.md是markdown的縮寫螃成。你可以使用文本編輯工具旦签,如系統(tǒng)自帶的TextEdit,或者Sublime來編輯寸宏。也可以使用專門編輯Markdown格式文本的Markdown編輯器宁炫。在Mac下推薦免費的MacDown,官方網(wǎng)站的下載在這里氮凝。
找到『我的第一篇文章.md』羔巢,使用編輯器對它進(jìn)行編輯,然后保存。
生成的.md文章頭部有一些諸如title,date,tags之類的字段竿秆,是用來配置這篇文章的標(biāo)題启摄、日期和tag的。
然后執(zhí)行:
hexo generate
或者
hexo g
如果出現(xiàn)錯誤幽钢,嘗試先hexo clean歉备,再hexo generate。
如果沒有出現(xiàn)錯誤搅吁,那么執(zhí)行hexo server威创,看看你的文章是不是已經(jīng)出現(xiàn)在博客當(dāng)中了?
Tips:
- 關(guān)于more 在文章中加入一行
<!-- more -->
可以將文章折疊谎懦,點擊more按鈕才展示全文肚豺。這樣比較方便瀏覽,不至于在文章篇幅很長時要滾動很長的距離才能看到下一篇文章界拦。
- 關(guān)于tags 如果想為文章配置tags吸申,修改.md文件頭部的tags字段。需要注意的是享甸,筆者直接寫tags: android,mac沒有起作用截碴。查閱資料后,正確的寫法應(yīng)該是:
tags:
- Android
- Mac
4.個性化配置
對自己的hexo博客進(jìn)行個性化配置蛉威,主要從_config.yml入手日丹。建議先備份該文件,再進(jìn)行修改的嘗試蚯嫌。
在hexo目錄下找到_config.yml文件哲虾。使用文本編輯器打開,所有的配置選項都在這里择示,可以查閱文檔了解每個配置項的意思束凑,如title代表你博客的名稱,author是你的名字栅盲,subtitle是副標(biāo)題等汪诉,這些配置項會反應(yīng)在博客的界面上,不同的主題(Theme谈秫,后文會提到)中扒寄,這些字段的表現(xiàn)形式是不一樣的。
我們主要關(guān)心三個部分:
- 基本信息拟烫,如 title该编、subtitle、description构灸、author等上渴“独妫基本信息的修改依照主題的不同會有不同的表現(xiàn)方式,按照自己選擇的主題來嘗試并觀察變化即可稠氮。
- 主題 theme曹阔。theme的修改見4.2章節(jié)。
- 部署 deploy 隔披,后文會已發(fā)布到Github為例說明赃份。deploy章節(jié)的修改見4.3章節(jié)。
4.1 基本信息
筆者修改了title奢米、subtitle抓韩、author為下面的內(nèi)容,你可以在這個頁面上看到每一個值都顯示在了哪里鬓长。
# Site
title: Drubear的博客
subtitle: 不寫代碼的音樂家不是一個好科學(xué)家
description:
author: Drubear
language:
timezone:
注意:每一個值的冒號后面都有一個半角空格谒拴!
- 未生效的寫法:title:Drubear的博客
- 能生效的寫法:title:[空格]Drubear的博客
改好基本信息,我們再來看看主題該如何改動涉波。
4.2 主題
在選擇主題之前英上,可以參考知乎的一個文章,這里匯總了一些hexo的主題鏈接啤覆。
知乎 - 有哪些好看的Hexo主題苍日?
4.2.1 下載主題
選好主題之后,以我使用的litten的yilia為例:
在hexo目錄下窗声,使用命令行工具相恃,輸入
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
clone后面跟著的是主題的git repo地址,而themes/yilia則表示要將該主題克隆到hexo/themes/yilia目錄中笨觅。
地址根據(jù)主題頁面公布的git repo地址變化拦耐,而themes/[主題名稱] 也有主題名字決定。
通常主題的首頁會告訴你如何使用屋摇,找到長得相似的那一行命令操作即可揩魂。
PS 1:地址可能有兩種形式幽邓,一種是https打頭炮温,git結(jié)尾,如
還有一種是git@github.com打頭牵舵,git結(jié)尾柒啤,如
git@github.com:litten/hexo-theme-yilia.git
具體看主題頁面上的地址,通常在download ZIP的左邊
PS 2:進(jìn)入themes目錄 直接輸入
也可以畸颅,區(qū)別是不用在地址后面指定目錄担巩。
如果你使用的不是yillia,將clone后面的地址没炒,替換為你想要使用的那個地址即可涛癌。例如,如果你想使用modernist,那么就輸入:
git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist
4.2.2 配置主題(非必須)
以筆者配置的yilia主題為例拳话,當(dāng)我們需要對主題中的友情鏈接先匪、個人主頁地址做一些配置時,進(jìn)入tnemes/yilia弃衍,找到主題目錄下的_config.yml文件呀非。
每個主題的配置文件有所不同,具體可參閱主題的主頁上的信息镜盯。
4.2.3 使用主題
回到上一章節(jié)中的_config.yml文件岸裙,修改其theme字段為
## Themes: http://hexo.io/themes/
theme: yilia
同樣的,別忘了冒號后面需要多一個半角空格速缆。
OK降允,主題配置完畢。依次執(zhí)行如下命令:
hexo clean
hexo generate
hexo server
如果沒有報錯的話艺糜,訪問http://0.0.0.0:4000/拟糕,你配置的主題已經(jīng)生效啦!
如果有出現(xiàn)報錯倦踢,通常是因為你的_config.yml改動時出現(xiàn)了問題送滞,除了檢查冒號后面是否已經(jīng)跟上一個半角空格,還可以將備份替換回來排查一下辱挥。
到此為止犁嗅,你已經(jīng)成功的在你自己的電腦上部署了擁有主題和內(nèi)容的個人博客,遺憾的是這個作品只能被你個人訪問到晤碘。如果能把它部署在GitHub上使這個博客可以被公開訪問呢褂微?接下來我們就講講如果將Hexo部署到GitHub Pages。
4.3 部署配置
我們已經(jīng)完成了Hexo個性化配置中的基本信息和主題配置园爷,還剩一項部署 - deploy宠蚂。筆者理解為,當(dāng)對 _config.yml 文件中的 deploy 進(jìn)行了配置童社,那么通過
hexo deploy
命令求厕,就可以將你的Hexo提交到GitHub Pages上,從而刷新你的GitHub Pages頁面扰楼。
換句話說呀癣,如果執(zhí)行了new、clean弦赖、generate,只是在你的電腦上生成了最新的博客项栏,如果不執(zhí)行deploy,新添加的內(nèi)容是不會被推送到GitHub Pages上的蹬竖。
既然我們已經(jīng)決定將Hexo部署到GitHub沼沈,那么我們還是先看看需要在GitHub上做哪些前置準(zhǔn)備流酬。
如果你已經(jīng)準(zhǔn)備好,可以直接跳到5.2章節(jié)列另。
5.連接到GitHub
5.1 前置準(zhǔn)備
如果你擁有了賬號访递,還沒有GitHub Pages地址晦嵌,在頁面右上角你的頭像旁邊點擊 + 號按鈕,選擇repository拷姿〔言兀或者直接點擊這里(https://github.com/new)。
在 Repository name 欄中响巢,輸入
[你的用戶名].github.io
注意描滔,你的用戶名必須與你實際的用戶名一字不差!
這個用戶名可以在 Repository name 欄左邊那個 Owner 中找到踪古,保持一致 即可含长。
比如我的GitHub用戶名是drubear,那么我的Owner中會顯示drubear伏穆,而我應(yīng)該在 Repository name 中填寫:
drubear.github.io
Description可填簡要介紹拘泞,也可以不填。
然后選Public枕扫。
去掉 Initialize this repository with a README 前的鉤陪腌。
然后點擊 Create repository。
成功后烟瞧,就可以通過 http://[你的用戶名].github.io 訪問你的頁面了诗鸭。
也許它現(xiàn)在還空無一物,接下來我們就把Hexo的內(nèi)容放進(jìn)去参滴。
5.2 配置Deploy
當(dāng)你擁有了個人的GitHub Pages后强岸,再回到Hexo的_config.yml文件,找到Deployment章節(jié)砾赔。
將type改為git蝌箍,repository改為你的GitHub Pages地址。這個地址應(yīng)該長這樣:
git@github.com:[你的GitHub用戶名]/[你的GitHub用戶名].github.io.git
branch用來指向分支过蹂,如果沒有特定的分支配置十绑,可以使用默認(rèn)的master聚至。
最終Deployment部分看起來應(yīng)該是下面這個樣子:
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:drubear/drubear.github.io.git
branch: master
通過前面1酷勺、2、3扳躬、4章節(jié)的步驟脆诉,我們已經(jīng)準(zhǔn)備好了要發(fā)布的博客甚亭。執(zhí)行命令:
hexo deploy
如果沒有報錯,你可以訪問自己的GitHub Pages頁面查看你所建立的博客了击胜。
比如我的博客亏狰,地址應(yīng)該為:
將[drubear]替換為你的用戶名即可。
恭喜偶摔!你已經(jīng)使用Hexo完成了個人博客的搭建并將它發(fā)布在GitHub Pages可供公開訪問啦暇唾!
6.日常維護(hù)
當(dāng)部署成功后,我們?nèi)粘V恍枰?/p>
- 新建文章(new)
- 找到生成的.md然后編輯并保存
- 生成博客(generate)
- 部署(deploy)
就可以完成新文章的發(fā)布辰斋。
日常使用命令整理如下:
hexo new "文章標(biāo)題名稱" //新建文章
hexo clean //清理(非必須)策州,在遇到問題時可嘗試先clean再generate
hexo generate //將文章生成為博客的一部分
hexo g //同上,generate的簡寫
hexo server //本地預(yù)覽(非必須)
hexo deploy //推送到GitHub
hexo d //同上最仑,deploy的簡寫
7.筆者遇到的問題
1.Deployer not found: git
出現(xiàn)這個錯誤帆锋,先確認(rèn)deploy的type已經(jīng)改成了git荐虐。
然后在hexo目錄下運行:
npm install hexo-deployer-git --save
之后再執(zhí)行
hexo generate
hexo deploy
即可。
2.genrnate 報錯
檢查_config.yml配置中孽糖,鍵值對冒號后面是否已經(jīng)預(yù)留了一個半角空格。