首页 > 程序开发 > 移动开发 > 其他 >

Hexo+Github Pages搭建个人博客

2017-04-24

Hexo+Github Pages搭建个人博客,官方教程里已经有很详细的步骤了,这里只是把几个需要注意的地方记录一下。

Github Pages仓库创建

官方教程里已经有很详细的步骤了,这里只是把几个需要注意的地方记录一下。

首先必须得有Github账号,作为世界上最大的同性交友网站,越早注册越好,带你进入一个全新的世界! New Repository时,必须以username.github.io命名,username就是指自己的用户名,例如crocutax.github.io,注意必须严格按照这个格式来命名,否则无效.官网给出的警告是:

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

3.为仓库配置SSH keys,后期以更加安全的SSH方式管理远程仓库(毕竟是个人博客,还是SSH方式好些)

在电脑任意位置右键打开Git bash窗口(必须已安装Git),输入ssh-keygen -t rsa -C "youremailAddress(你的邮箱地址)",

此时会提示创建密码,此密码会在之后向仓库push时使用,如果为空的话之后push时就不用输入。

如下图:

SSH keys

生成好之后,第二个红圈表示SSH keys生成的位置,在C盘的用户目录下,比如我的是C:\Users\Crocutax\.ssh\,找到该文件夹的位置

生成的ssh keys.png

将其中的id_rsa.pub (公匙)用文本编辑器打开,复制其中的内容,

打开刚刚创建的Github Repository,位置如下:crocutax.github.io–>Settings–>Deploy keys–>Add key

添加公匙.png

个人域名解析

购买了域名之后,添加域名解析,即将自己的域名指向哪个具体的主机 IP。

打开dos窗口,输入ping xxx.github.io ,获取到主机IP,如图所示

获取主机IP.png

获取到主机IP后,在域名管理后台进行添加

添加主机IP.png

添加完毕后,如下图所示:

域名解析设置完毕.png

除了这里进行域名解析的设置,要想正常通过http://www.crocutax.com 来访问http://crocutax.github.io 的内容,还需要在Repository–>Settings–>Options–>GitHub Pages-Custom domain中进行配置

如图:

将自己的域名指向github pages域名.png

这样配置之后,后面等到Hexo初始化完毕后,再完成最后一步:在source/目录下创建一个CNAME文件(后面再说),就可以直接通过http://www.crocutax.com 来访问http://crocutax.github.io 的内容了。不过现在我们github仓库里是空的,接下来就开始搭建Hexo环境了。

搭建Hexo环境

Hexo的运行依靠Node.js,因此需要先 安装Node.js 。

$ npm install -g hexo

然后继续开启Git bash窗口,输入npm install -g hexo,开始安装Hexo。

这里我碰到了一个问题,就是提示

npm WARN deprecated swig@1.4.2: This package is no longer maintained

如下图:

This package is no longer maintained.png

起初以为是报了个错误,于是网上一顿搜,各种更新各种折腾。后来发现,其实一直是在安装中,只是速度慢而已,导致我认为出了错误。通过google,通过npm config set registry "https://registry.npm.taobao.org"设置淘宝镜像源后,很快就安装完毕了,弹出了如下界面

Hexo install succeed.png

$ hexo init

Hexo安装完毕后,创建一个想要在此创建网站目录的文件夹,比如我的是D:\Blog,在此处打开Git bash窗口,输入hexo init 进行初始化。

输出以下两个命令

hexog hexo s

第一个命令用于生成静态文件,第二个命令用于启动本地服务器,此时用浏览器打开http://localhost:4000 ,就可以看到hexo内置样式的Blog了。

创建CNAME文件

前面提到等Hexo初始化完毕后,需要在source/目录下创建一个CNAME文件,才能最终完成独立域名与Github Pages的绑定。关于CNAME的具体知识我现在还没有去深入的了解,这里只记录使用方法,注意:

CNAME文件名全部为大写字母 文件没有后缀名,注意不要创建成CNAME.txt了 文件内容为你的域名,不带http://,比如www.crocutax.com即可

其实此时整个基础环境已经搭建完毕了,新建文章,deploy到远程仓库就可以了,但是一般我们都不会满足于hexo默认提供的主题样式,所以接下来开始选择主题。

选择主题

如果要自定义主题,还是需要耗点时间的,所以为了快速的先把环境搭建起来,最好的方式是用前辈们创建好的主题,有很多官网主题都有漂亮,自己选一个吧!

根据主题提供者的安装,配置步骤,一步一步来就行了。

由于自己长期做Android开发,所以对Material Design风格情有独钟,就选用了indigo主题,感谢前辈的付出。

Hexo常用命令

可以在官网学习Hexo 指令,常用的有

hexo clean (清除缓存文件 (db.json) 和已生成的public目录下的静态文件,在某些情况下,尤其是更换主题后,如果发现对站点的更改无论如何也不生效,可能需要运行该命令) hexo g (hexo generate的简化命令,用于生成静态文件) hexo s (hexo server的简化命令,用于启动本地服务器,一般用于测试) hexo d (hexo deploy的简化命令,用将本地内容部署到远程仓库)

注意事项

在_config.yml 文件的配置中,必须注意yml文件的语法格式 : 字段+冒号+空格+内容,比如url: http://www.crocutax.com/ ,这个空格一定不能省,否则会报错 通过hexo s 运行起本地服务之后 ,git bash会显示如下内容INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop. ,此时按Ctrl+C 是停止运行的作用,而不是我们常用的复制,在这里可以再git bash窗口中通过鼠标右键+copy来复制.

踩坑记录

Github pages 的custom domain重置问题

为了使用http://www.corcutax.com替代http://corcutax.github.io来访问我们的博客,除了需要设置DNS解析之外,还需要在Github pages–>Settings–>Custom domain中设置.

但是在使用过程中发现 , 每次hexo deploy 之后 , http://www.corcutax.com 都会出现404,而http://corcutax.github.io 则访问正常.再次来到Github pages–>Settings–>Custom domain , 发现Custom domain已经重置了 . 需要手动再次重新关联.

google了一下 , 网上小伙伴们遇到了同样的问题 , 比如:

https://github.com/hexojs/hexo/issues/2446

https://www.zhihu.com/question/28814437

问题原因 : CNAME文件每次部署都被自动删除.

解决方案 : 将CNAME文件放在source目录下.

如图:

CNAME文件.png

CNAME文件内容为 : www.crocutax.com

完事!

部署过程中参考到的网址有:

设置DNS解析

CNAME

记录第一次搭建Hexo

搭建Hexo博客

搭建Hexo博客中碰到的坑

还有一些后期在性能优化上可能会用到,先在此记录:

为博客添加运行时间

解决访问次数限制

Hexo进阶

MD插件库

如何自己制作主题

相关文章
最新文章
热点推荐