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