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

准备

(1)安装git

(2)安装node

开始

1、安装hexo

利用 npm 命令安装。(在任意位置点击鼠标右键,选择Git bash)

npm install -g hexo

tips:

npm ERR! registry error parsing json 错误

可能需要设置npm代理,执行命令

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

hexo:command not found

删除刚刚安装的npm目录,重新执行命令npm install -g hexo安装hexo,

2、创建hexo文件夹

安装完成后,在你喜爱的文件夹下(如E:\myblog),执行以下指令(在E:\myblog内点击鼠标右键,选择Git bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

hexo init

3、安装依赖包

npm install

4、本地查看

现在我们已经搭建起本地的hexo博客了,执行以下命令(在E:\myblog),然后到浏览器输入localhost:4000看看

hexo g   #生成

hexo s #启动服务预览

tips:

执行hexo server提示找不到该指令

解决办法:

在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:

npm install hexo -server --save

安装此server后再试,问题解决

5、创建博客

(1)注册github账号

(2)创建页面仓库

这个仓库的名字需要和你的账号对应,格式: yourname.github.io

输入基本信息,然后点击创建仓库.

6、生成SSH密钥

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

按3个回车,密码为空。

在C:\Users\tong\.ssh下(你自己的用户目录下),得到两个文件id_rsa和id_rsa.pub。

7、在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh,Add SSH key,粘贴进去。

全局配置 _config.yml

本地文件提交到 GitHub Pages

// 删除旧的 public 文件

hexo clean

// 生成新的 public 文件

hexo g

// 开始部署

hexo d

hexo常用命令

hexo help #查看帮助

hexo init #初始化一个目录

hexo new "postName" #新建文章

hexo new page "pageName" #新建页面

hexo generate #生成网页,可以在 public 目录查看整个网站的文件

hexo server #本地预览,'Ctrl+C'关闭

hexo deploy #部署.deploy目录

hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

简写

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

最后在浏览器中输入https://yourname.github.io/ 就可以看到效果了

如果你觉得hexo默认的主题不好看,你可以对其主题进行设置,下面我就来和大家一起学习下怎么更改hexo的默认主题吧

hexo主题更改

你可以根据自己的喜好选择主题,点击链接查看更多hexo主题

这里我选择的是 yilia     

在博客的根目录下克隆主题

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

找到根目录下的_config.yml进行配置

theme: yilia

接着就自动部署一下:

npm install hexo-deployer-git --save

最后发布:

hexo clean && hexo g && hexo d

首先进入到根目录下的 themes\yilia 文件夹,找到_config.yml文件并用编译器打开

我是这样配置的

# Header

menu:

主页: /

技术栈: /tags/随笔/

面试: /

# SubNav

subnav:

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

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

#rss: "#"

#zhihu: "#"

#qq: "#"

#weixin: "#"

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

#douban: "#"

#segmentfault: "#"

#bilibili: "#"

#acfun: "#"

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

#facebook: "#"

#google: "#"

#twitter: "#"

#linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径

# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,

# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

root:

# Content

# 文章太长,截断按钮文字

excerpt_link: more

# 文章卡片右下角常驻链接,不需要请设置为false

show_all_link: '展开全文'

# 数学公式

mathjax: false

# 是否在新窗口打开链接

open_in_new: true

# 打赏

# 请在需要打赏的文章的md文件头部,设置属性reward: true

# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏

reward_type: 2

# 打赏wording

reward_wording: '谢谢你请我吃糖果'

# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/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、网易云跟帖;3、畅言;4、Disqus 不需要使用某项,直接设置值为false,或注释掉

#具体请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说

duoshuo: false

#2、网易云跟帖

wangyiyun: false

#3、畅言

changyan_appid: false

changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia的

disqus: false

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…

style:

# 头像上面的背景颜色

header: '#4d4d4d'

# 右滑板块背景

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

# slider的设置

slider:

# 是否默认展开tags板块

showTags: false

# 智能菜单

# 如不需要,将该对应项置为false

# 比如

#smart_menu:

#  friends: false

smart_menu:

innerArchive: '所有文章'

friends: '友链'

aboutme: '关于我'

friends:

慕课网: http://www.imooc.com/

网易云课堂: http://study.163.com/

阿里图库: http://www.iconfont.cn/

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

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

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

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

配置完成以后,回到根目录,按顺序执行命令就OK啦。

npm install hexo-deployer-git --save

hexo clean && hexo g && hexo d

最后输入 https://yourname.github.io/   预览吧

在配置之后我们可能看不到自己的头像,这里我推荐的图床是七牛云

1..七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了

2.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力(非打广告)。

七牛云存储图片的过程:

(1)首先你得有七牛云的账号

(2)点击“资源主页”——>“对象存储”——>“立即添加”

(3)“新建存储空间”——>“存储空间名称(我已经创建了chentong95就不演示了)”——>“确定创建”

(4)“chentong95(你的空间名称)”——>“内容管理”——>“上传文件””

(5)点击那个省略号,再选择复制外链,在浏览器中打开外链,你就可以看到你上传的图片啦


(6)E:\myblog\themes\yilia(你的主题目录下),找到_config.yml


放入你的图片外链,哈哈,照着前面的教程在重新部署下,打开你的博客就可以看到效果啦

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

1.购买域名

我在阿里上买了一个后缀为.top的域名才1元可以用一年,下面我就以阿里云为例子给大家讲讲吧,域名的购买过程我就不讲啦,大家根据自己的需求来

2.域名解析

购买域名后,我们登录进入阿里云官网的控制台,在域名列表中可查看自己购买的域名:


我们点击这个域名下的解析进入解析页面


点击添加解析按钮,如图一次输入:CNAME、@、Github博客域名。选择保存完成个人域名向个人博客的映射(我在这个地方遇到一个坑,这个域名下默认有很多解析,如果出现了“CNAME记录与主机记录(@)的MX记录冲突,无法保存成功”的情况你就可以把其他的主机记录有@的解析删掉)。添加解析后,在浏览器输入我们新注册的域名:


可以看到网站报出了404错误,这说明我们的域名已经成功映射到了Github网站,但是它找不到我们的博客的位置,所以我们需要实现个人博客向个人域名的映射,我们进入本地博客仓库,在source目录下新建一个CNAME的文件,记住没有后缀哟,在其中添加你的域名(注意:没有http://,没有www)


完成后保存然后发布

hexo clean && hexo g && hexo d

打开你的域名,就可以看到效果啦


本文很多内容取自于网络,这几天在自己做这个事情,所以想写篇文章记录下来,一来自己权当记笔记,以后如果又需要还可以看看,二来也希望可以帮助像我一样的想折腾折腾博客的童鞋少走些弯路,希望这些文章对大家有益~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容