hexo+github搭建屬于你自己的博客

準(zhǔn)備

(1)安裝git

(2)安裝node

開始

1刘急、安裝hexo

利用 npm 命令安裝。(在任意位置點(diǎn)擊鼠標(biāo)右鍵砚著,選擇Git bash)

npm install -g hexo

tips:

npm ERR! registry error parsing json 錯(cuò)誤

可能需要設(shè)置npm代理,執(zhí)行命令

npm config set registry http://registry.cnpmjs.org

hexo:command not found

刪除剛剛安裝的npm目錄懊昨,重新執(zhí)行命令npm install -g hexo安裝hexo,

2沐批、創(chuàng)建hexo文件夾

安裝完成后,在你喜愛的文件夾下(如E:\myblog)蝎亚,執(zhí)行以下指令(在E:\myblog內(nèi)點(diǎn)擊鼠標(biāo)右鍵九孩,選擇Git bash),Hexo 即會(huì)自動(dòng)在目標(biāo)文件夾建立網(wǎng)站所需要的所有文件发框。

hexo init

3躺彬、安裝依賴包

npm install

4、本地查看

現(xiàn)在我們已經(jīng)搭建起本地的hexo博客了梅惯,執(zhí)行以下命令(在E:\myblog)宪拥,然后到瀏覽器輸入localhost:4000看看

hexo g ? #生成

hexo s #啟動(dòng)服務(wù)預(yù)覽

tips:

執(zhí)行hexo server提示找不到該指令

解決辦法:

在Hexo 3.0 后server被單獨(dú)出來了,需要安裝server铣减,安裝的命令如下:

npm install hexo -server --save

安裝此server后再試她君,問題解決

5、創(chuàng)建博客

(1)注冊github賬號(hào)

(2)創(chuàng)建頁面?zhèn)}庫

這個(gè)倉庫的名字需要和你的賬號(hào)對應(yīng)徙歼,格式: yourname.github.io

輸入基本信息犁河,然后點(diǎn)擊創(chuàng)建倉庫.

6、生成SSH密鑰

ssh -keygen -t rsa -C ?"你的郵箱地址"

按3個(gè)回車魄梯,密碼為空桨螺。

在C:\Users\tong\.ssh下(你自己的用戶目錄下),得到兩個(gè)文件id_rsa和id_rsa.pub酿秸。

7灭翔、在GitHub上添加SSH密鑰

打開id_rsa.pub,復(fù)制全文。https://github.com/settings/ssh肝箱,Add SSH key哄褒,粘貼進(jìn)去。

全局配置 _config.yml

本地文件提交到 GitHub Pages

// 刪除舊的 public 文件

hexo clean

// 生成新的 public 文件

hexo g

// 開始部署

hexo d

hexo常用命令

hexo help #查看幫助

hexo init #初始化一個(gè)目錄

hexo new "postName" #新建文章

hexo new page "pageName" #新建頁面

hexo generate #生成網(wǎng)頁煌张,可以在 public 目錄查看整個(gè)網(wǎng)站的文件

hexo server #本地預(yù)覽呐赡,'Ctrl+C'關(guān)閉

hexo deploy #部署.deploy目錄

hexo clean #清除緩存,**強(qiáng)烈建議每次執(zhí)行命令前先清理緩存骏融,每次部署前先刪除 .deploy 文件夾**

簡寫

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

最后在瀏覽器中輸入https://yourname.github.io/ 就可以看到效果了

如果你覺得hexo默認(rèn)的主題不好看链嘀,你可以對其主題進(jìn)行設(shè)置,下面我就來和大家一起學(xué)習(xí)下怎么更改hexo的默認(rèn)主題吧

hexo主題更改

你可以根據(jù)自己的喜好選擇主題档玻,點(diǎn)擊鏈接查看更多hexo主題

這里我選擇的是?yilia? ? ?

在博客的根目錄下克隆主題

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

找到根目錄下的_config.yml進(jìn)行配置

theme: yilia

接著就自動(dòng)部署一下:

npm install hexo-deployer-git --save

最后發(fā)布:

hexo clean && hexo g && hexo d

首先進(jìn)入到根目錄下的 themes\yilia 文件夾怀泊,找到_config.yml文件并用編譯器打開

我是這樣配置的

# Header

menu:

主頁: /

技術(shù)棧: /tags/隨筆/

面試: /

# SubNav

subnav:

github: "https://github.com/chentong95"

weibo: "http://weibo.com/webpie/profile?is_all=1"

#rss: "#"

#zhihu: "#"

#qq: "#"

#weixin: "#"

jianshu: "http://www.reibang.com/users/93cfc585b901/timeline"

#douban: "#"

#segmentfault: "#"

#bilibili: "#"

#acfun: "#"

#mail: "mailto:2207467597@qq.com"

#facebook: "#"

#google: "#"

#twitter: "#"

#linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路徑

# 如果您的網(wǎng)站存放在子目錄中,例如 http://yoursite.com/blog误趴,

# 請將您的 url 設(shè)為 http://yoursite.com/blog 并把 root 設(shè)為 /blog/霹琼。

root:

# Content

# 文章太長,截?cái)喟粹o文字

excerpt_link: more

# 文章卡片右下角常駐鏈接凉当,不需要請?jiān)O(shè)置為false

show_all_link: '展開全文'

# 數(shù)學(xué)公式

mathjax: false

# 是否在新窗口打開鏈接

open_in_new: true

# 打賞

# 請?jiān)谛枰蛸p的文章的md文件頭部枣申,設(shè)置屬性reward: true

# 打賞基礎(chǔ)設(shè)定:0-關(guān)閉打賞; 1-文章對應(yīng)的md文件里有reward:true屬性纤怒,才有打賞糯而; 2-所有文章均有打賞

reward_type: 2

# 打賞wording

reward_wording: '謝謝你請我吃糖果'

# 支付寶二維碼圖片地址,跟你設(shè)置頭像的方式一樣泊窘。比如:/assets/img/alipay.jpg

alipay:

# 微信二維碼圖片地址

weixin: http://osg0e707p.bkt.clouddn.com/payme.jpg

# Miscellaneous

baidu_analytics: ''

google_analytics: ''

favicon: /favicon.png

#你的頭像url

avatar: http://osg0e707p.bkt.clouddn.com/avatar.jpg

#是否開啟分享

share_jia: true

#評論:1、多說像寒;2烘豹、網(wǎng)易云跟帖;3诺祸、暢言携悯;4、Disqus 不需要使用某項(xiàng)筷笨,直接設(shè)置值為false憔鬼,或注釋掉

#具體請參考wiki:https://github.com/litten/hexo-theme-yilia/wiki/

#1、多說

duoshuo: false

#2胃夏、網(wǎng)易云跟帖

wangyiyun: false

#3轴或、暢言

changyan_appid: false

changyan_conf: false

#4、Disqus 在hexo根目錄的config里也有disqus_shortname字段仰禀,優(yōu)先使用yilia的

disqus: false

# 樣式定制 - 一般不需要修改照雁,除非有很強(qiáng)的定制欲望…

style:

# 頭像上面的背景顏色

header: '#4d4d4d'

# 右滑板塊背景

slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的設(shè)置

slider:

# 是否默認(rèn)展開tags板塊

showTags: false

# 智能菜單

# 如不需要,將該對應(yīng)項(xiàng)置為false

# 比如

#smart_menu:

#? friends: false

smart_menu:

innerArchive: '所有文章'

friends: '友鏈'

aboutme: '關(guān)于我'

friends:

慕課網(wǎng): http://www.imooc.com/

網(wǎng)易云課堂: http://study.163.com/

阿里圖庫: http://www.iconfont.cn/

博客園: https://www.cnblogs.com/

CSDN: http://blog.csdn.net/

菜鳥教程: http://www.runoob.com/

aboutme: 一只努力做全棧的前端~~~

配置完成以后答恶,回到根目錄饺蚊,按順序執(zhí)行命令就OK啦萍诱。

npm install hexo-deployer-git --save

hexo clean && hexo g && hexo d

最后輸入 https://yourname.github.io/ ? 預(yù)覽吧

在配置之后我們可能看不到自己的頭像,這里我推薦的圖床是七牛云

1..七牛云儲(chǔ)存提供10G的免費(fèi)空間,以及每月10G的流量.存放個(gè)人博客圖片最好不過了

2.七牛云儲(chǔ)存還有各種圖形處理功能污呼、縮略圖裕坊、視頻存放速度也給力(非打廣告)。

七牛云存儲(chǔ)圖片的過程:

(1)首先你得有七牛云的賬號(hào)

(2)點(diǎn)擊“資源主頁”——>“對象存儲(chǔ)”——>“立即添加”

(3)“新建存儲(chǔ)空間”——>“存儲(chǔ)空間名稱(我已經(jīng)創(chuàng)建了chentong95就不演示了)”——>“確定創(chuàng)建”

(4)“chentong95(你的空間名稱)”——>“內(nèi)容管理”——>“上傳文件””

(5)點(diǎn)擊那個(gè)省略號(hào)燕酷,再選擇復(fù)制外鏈碍庵,在瀏覽器中打開外鏈,你就可以看到你上傳的圖片啦


(6)E:\myblog\themes\yilia(你的主題目錄下)悟狱,找到_config.yml


放入你的圖片外鏈静浴,哈哈,照著前面的教程在重新部署下挤渐,打開你的博客就可以看到效果啦

如何用hexo搭建的Github博客綁定域名

1.購買域名

我在阿里上買了一個(gè)后綴為.top的域名才1元可以用一年苹享,下面我就以阿里云為例子給大家講講吧,域名的購買過程我就不講啦浴麻,大家根據(jù)自己的需求來

2.域名解析

購買域名后得问,我們登錄進(jìn)入阿里云官網(wǎng)的控制臺(tái),在域名列表中可查看自己購買的域名:


我們點(diǎn)擊這個(gè)域名下的解析進(jìn)入解析頁面


點(diǎn)擊添加解析按鈕软免,如圖一次輸入:CNAME宫纬、@、Github博客域名膏萧。選擇保存完成個(gè)人域名向個(gè)人博客的映射(我在這個(gè)地方遇到一個(gè)坑漓骚,這個(gè)域名下默認(rèn)有很多解析,如果出現(xiàn)了“CNAME記錄與主機(jī)記錄(@)的MX記錄沖突榛泛,無法保存成功”的情況你就可以把其他的主機(jī)記錄有@的解析刪掉)蝌蹂。添加解析后,在瀏覽器輸入我們新注冊的域名:


可以看到網(wǎng)站報(bào)出了404錯(cuò)誤曹锨,這說明我們的域名已經(jīng)成功映射到了Github網(wǎng)站孤个,但是它找不到我們的博客的位置,所以我們需要實(shí)現(xiàn)個(gè)人博客向個(gè)人域名的映射,我們進(jìn)入本地博客倉庫沛简,在source目錄下新建一個(gè)CNAME的文件齐鲤,記住沒有后綴喲,在其中添加你的域名(注意:沒有http://椒楣,沒有www)


完成后保存然后發(fā)布

hexo clean && hexo g && hexo d

打開你的域名给郊,就可以看到效果啦


本文很多內(nèi)容取自于網(wǎng)絡(luò),這幾天在自己做這個(gè)事情撒顿,所以想寫篇文章記錄下來丑罪,一來自己權(quán)當(dāng)記筆記,以后如果又需要還可以看看,二來也希望可以幫助像我一樣的想折騰折騰博客的童鞋少走些彎路吩屹,希望這些文章對大家有益~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末跪另,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子煤搜,更是在濱河造成了極大的恐慌免绿,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件擦盾,死亡現(xiàn)場離奇詭異嘲驾,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)迹卢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門辽故,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人腐碱,你說我怎么就攤上這事誊垢。” “怎么了症见?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵喂走,是天一觀的道長。 經(jīng)常有香客問我谋作,道長芋肠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任遵蚜,我火速辦了婚禮帖池,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谬晕。我一直安慰自己碘裕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布攒钳。 她就那樣靜靜地躺著,像睡著了一般雷滋。 火紅的嫁衣襯著肌膚如雪不撑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天晤斩,我揣著相機(jī)與錄音焕檬,去河邊找鬼。 笑死澳泵,一個(gè)胖子當(dāng)著我的面吹牛实愚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼腊敲,長吁一口氣:“原來是場噩夢啊……” “哼击喂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起碰辅,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤懂昂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后没宾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凌彬,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年循衰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铲敛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,102評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡会钝,死狀恐怖伐蒋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情顽素,我是刑警寧澤咽弦,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站胁出,受9級特大地震影響型型,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜全蝶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一闹蒜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抑淫,春花似錦绷落、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至催式,卻和暖如春函喉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荣月。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工管呵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人哺窄。 一個(gè)月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓捐下,卻偏偏與公主長得像账锹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子坷襟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:本文為博主原創(chuàng)文章奸柬,未經(jīng)博主允許不得轉(zhuǎn)載。 閑聊 在大三的時(shí)候啤握,一直就想搭建屬于自己的一個(gè)博客鸟缕,但由于各...
    Kerry202閱讀 1,857評論 0 2
  • 轉(zhuǎn)載http://www.cnblogs.com/bxm0927/p/6927340.html 大概流程: 1. ...
    阿de牧閱讀 6,805評論 3 32
  • 第一章 安裝Git工具 下載GitHub for Windows,直接點(diǎn)擊安裝,安裝完成后排抬,可以看到“Git Sh...
    不圓的石頭閱讀 11,872評論 5 63
  • 我說我要開心每一天懂从, 可是回憶總是會(huì)突襲。 那年的那個(gè)夜晚蹲蒲, 拼命吞咽口水的夜晚番甩。 那年的那個(gè)下午, 伸出骯臟的手...
    米而閱讀 149評論 0 1
  • 夏天終于來了届搁,還徘徊在棉衣和涼拖間的人如釋重負(fù)缘薛。 前塵往事兵荒馬亂,懷揣一腔孤勇卡睦,踉蹌前來宴胧。 曠日持久的你猜我猜你...
    可可愛愛的可可姐閱讀 576評論 0 2