Hexo配合github搭建免费博客,绑定域名

出发点:有那么大的博客平台不用为什么自己搭建博客,说白了就是玩玩坚持写几篇博客然后就是装逼了呗。


本篇文章在我的简书地址


今天要讲的搭建博客教程很简单不需要什么钱当然有钱可以买虚拟机配个数据库可以玩wordpress搭建博客更简单,记得万网有活动几块钱就可以买个一年的虚拟机活动长期有可以看看,这里就不详细介绍了。


言归正传,本篇博客说的是用github和 Hexo搭建一个免费的博客网站,搭建完看起来像这样 http://ws1227.github.io 如果有个人域名就可以类似这样http://wangsen.website/ 后边再介绍。


先说下需要的基本条件:


安装Node(必须)

作用:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可。提供一个mac版本的https://pan.baidu.com/s/1gf5NSyf 不用翻墙下载了


安装Git(必须)

作用:把本地的hexo内容提交到github上去. 安装Xcode就自带有Git,我就不多说了。没有的话可以去https://git-scm.com/downloads 下载


申请GitHub(必须)

作用:是用来做博客的远程创库、域名、服务器之类的,怎么与本地hexo建立连接等下讲。 github账号我也不再啰嗦了,没有的话直接申请就行了,跟一般的注册账号差不多,SSH Keys,看你自己了,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了,怎么配置我就不多说了,网上有很多教程。


安装Hexo

Node和Git都安装好后,可执行如下命令安装hexo:


1
$ sudo npm install -g hexo

创建一个文件夹,如:Blog,cd到Blog里执行hexo init的。命令:


1
hexo init

好啦,至此,全部安装工作已经完成!


因为Hexo编写的文章都是用 markdown语法写的 所以需要生成静态界面也就是Html网页。

生成静态页面

继续在刚才的Blog目录下执行如下命令,生成静态页面

1
hexo generate (hexo g 缩写也可以)

本地启动

启动本地服务,进行文章预览调试,命令:

1
hexo server (hexo s 缩写也可以)

开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故,因为4000这个端口太常见了 ,可以更换个端口号 然后再执行 hexo s


1
2
hexo server -p 5000 #更改端口随意写
hexo server -i 192.168.1.1 #自定义 IP

运行成功后按Control+L可以停止 如果直接用Hexo s启动会提示错误 就是已经被占用了 所以正确的命令应该是


1
2
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页

上边算是搭建了一个本地的博客系统了 然后就是配置Git了用git就可以把博客移动到远程服务器访问类似我的博客地址http://ws1227.github.io


配置Github

建立Repository


建立与你用户名对应的仓库,仓库名必须为【useame.github.io】如下图我的,固定写法


image description


建立关联


打开Blog在本地/Users/wangsen/Blog,Blog是之前建Hexo的文件,有:


1
2
3
4
5
6
7
8
9
10
Blog
 |
 |-- _config.yml
 |-- node_modules
 |-- public
 |-- source
 |-- db.json
 |-- package.json
 |-- scaffolds
 |-- themes

 现在我们需要打开_config.yml文件,来建立关联,命令:
 
 如果终端不是在Blog目录就cd到该目录执行命令
 

1
vim _config.yml 我建议用sublime


翻到最下面,改成我这样子的,注意 : 后面要有个空格


repository地址换成你自己的git地址


1
2
3
4
deploy:
type: git
branch: master

执行如下命令才能使用git部署


1
npm install hexo-deployer-git –save

配置命令:


作用就是把blog目录下的Public目录下的文件上传至git仓库


1
hexo deploy

 然后再浏览器中输入就行了http://ws1227.github.io/,我的 github 的账户叫 ws1227 ,把这个改成你 github 的账户名就行了


每次修改博客文件后都需要从新部署


1
2
3
hexo clean
hexo generate
hexo deploy

一些常用命令:

http://www.jianshu.com/p/eb02029f7a81


HEXO主题

如果你到了这里没有任何问题,那么恭喜你已经成功了,不过这才刚刚开始。当你成功的看到自己博客搭建好的那一刻又是激动又是失望,激动的是博客总算折腾出来了,失望的是,为何如此的丑。。。说实话Hexo默认的主题我不喜欢,如果你想换风格,Hexo的主题网上随便一搜也有很多。在此笔者使用的博客主题是Next.Pisces(国人写的)。https://github.com/iissnan/hexo-theme-next 作者很详细的使用文档


域名绑定(第三步,可选)

笔者是在万网买的域名(http://wangsen.website/)。 域名买好之后提交实名认证等,这些操作就不在赘述。域名购买地址
价格表:https://wanwang.aliyun.com/help/price.html?spm=5176.8076989.339865.8.yRl9gU选择自己喜欢又能接受价格的域名吧 域名是需要每年都付钱的,看清楚续费价格再下手。


买完域名后进入域名管理后台添加解析,下图我添加解析后的。
说下这个记录值就是ip地址得获取方式,打开终端ping下自己的git仓库 命令如下格式


1
ping ws1227.github.io

看到如下数据,就看到这个ip地址了

1
2
3
4
5
6
PING github.map.fastly.net (151.101.100.133): 56 data bytes
64 bytes from 151.101.100.133: icmp_seq=0 ttl=50 time=105.119 ms
Request timeout for icmp_seq 1
64 bytes from 151.101.100.133: icmp_seq=2 ttl=50 time=105.448 ms
64 bytes from 151.101.100.133: icmp_seq=3 ttl=50 time=104.788 ms
64 bytes from 151.101.100.133: icmp_seq=4 ttl=50 time=103.319 ms


image description


然后在你的本地站点目录里的source目录下添加一个CNAME文件,不带后缀,可以用终端切换到source目录下,执行命令如下


1
vim CNAME

内容是域名地址不带www和http 就类似我的是 wangsen.website


填写完了之后再重新部署到github pages上(部署简写命令hexo d -g)


打开自己的博客尽情打开各种蹂躏吧