準(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 即會自動在目標(biāo)文件夾建立網(wǎng)站所需要的所有文件。

hexo init

3、安裝依賴包

npm install

4、本地查看

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

hexo g ? #生成

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

tips：

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

解決辦法：

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

npm install hexo -server --save

安裝此server后再試，問題解決

5、創(chuàng)建博客

（1）注冊github賬號

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

這個(gè)倉庫的名字需要和你的賬號對應(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

接著就自動部署一下：

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.itdecent.cn/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..七牛云儲存提供10G的免費(fèi)空間,以及每月10G的流量.存放個(gè)人博客圖片最好不過了

2.七牛云儲存還有各種圖形處理功能、縮略圖、視頻存放速度也給力（非打廣告）。

七牛云存儲圖片的過程：

（1）首先你得有七牛云的賬號

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

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

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

（5）點(diǎn)擊那個(gè)省略號，再選擇復(fù)制外鏈，在瀏覽器中打開外鏈，你就可以看到你上傳的圖片啦

（6）E:\myblog\themes\yilia（你的主題目錄下），找到_config.yml

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

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

1.購買域名

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

2.域名解析

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

我們點(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)記筆記，以后如果又需要還可以看看，二來也希望可以幫助像我一樣的想折騰折騰博客的童鞋少走些彎路，希望這些文章對大家有益~~~