准备
(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
打开你的域名,就可以看到效果啦
本文很多内容取自于网络,这几天在自己做这个事情,所以想写篇文章记录下来,一来自己权当记笔记,以后如果又需要还可以看看,二来也希望可以帮助像我一样的想折腾折腾博客的童鞋少走些弯路,希望这些文章对大家有益~~~