1. 为何采用Github pages服务
Hexo是一个简单、快速、强大的基于 Github Pages的博客发布工具,支持Markdown格式,有众多优秀插件和主题。
使用github pages服务搭建博客的好处有:
(1)全是静态文件,访问速度快;
(2)免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
(3)可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于
github的;(4)数据绝对安全,基于
github的版本管理,想恢复到哪个历史版本都行;(5)博客内容可以轻松打包、转移、发布到其它平台;
2. 准备工作
在开始一切之前,首先要准备以下工作:
Github账号,https://github.com/node.js、npm,http://nodejs.cn/download/git for windows(或者其他git客户端),https://git-scm.com/downloads
3. 搭建博客
3.1 创建仓库
(1)直接打开Github官网,完成注册
(2) 创建仓库:新建一个名为github用户名.github.io的仓库,比如,github用户名为lajos182,那么就新建lajos182.github.io的仓库(其他名称无效),以后部署上线就可以使用http://lajos182.github.io(如果使用https,就使用https://lajos182.github.io)访问
3.2 绑定域名
如果不绑定域名就用默认的 xxx.github.io 来访问,如果你想拥有一个属于自己的域名,那也是OK的;
首先注册一个域名,域名注册可以去godaddy,阿里云、腾讯云等;
绑定域名分2种情况:带www和不带www的;
域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先ping一下github用户名.github.io的IP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP,将CNAME指向github用户名.github.io,这样可以保证无论是否添加www都可以访问,如下:

然后到你的github项目根目录新建一个名为CNAME的文件(无后缀),里面填写解析后的域名。注意,在绑定了新域名之后,原来的github用户名.github.io并没有失效,而是会自动跳转到你的新域名。
3.3 配置SSH key
提交代码肯定要拥有github权限才可以,但是直接使用用户名和密码太不安全了,所以使用ssh key来解决本地和服务器的连接问题。
用git bash执行如下命令:
1  | $ cd ~/. ssh #检查本机已存在的ssh密钥  | 
如果提示:No such file or directory,就使用下面的命令生成密钥:
1  | $ ssh-keygen -t rsa -C "邮件地址"  | 
然后连续3次回车,最终会在用户目录下生成一个.ssh目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开github主页,进入个人设置 ->SSH and GPG keys -> New SSH key,配置好密钥即可。
3.4 hexo安装并初始化
(1)安装hexo:首先确保电脑已经安装node.js和npm,可以通过下面的命令进行验证是否已经安装:
1  | $ node -v  | 
如果直接显示出对应的版本号表示已经安装,当然还要确保电脑已经配置好环境变量。然后输入命令安装hexo:
1  | $ npm install -g hexo  | 
(2)克隆仓库至本地:如果无法克隆空仓库,可以现在仓库新建一个README.md文件,里面可以暂时写一些介绍。
1  | $ git clone git@github.com:lajos182/lajos182.github.io.git # 后面是创建的仓库地址  | 
(3)找到lajos182.github.io所在目录,创建一个hexo(可以随便取个名字)分支,这是方便以后多台电脑同步。
1  | $ cd lajos182.github.io/  | 
(4)切换至hexo分支,初始化:
1  | $ hexo init  | 
hexo会自动下载一些文件至lajos182.github.io目录,包含node_modules,此时创建一个.gitignore文件,里面包含以下内容:
1  | .DS_Store  | 
此时的目录结构如下:

这时,使用下面的命令启动服务后,在浏览器访问 http://localhost:4000 即可看到内容,可能会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口4000被占用的缘故,解决端口冲突问题请参考这篇文章:http://blog.liuxianan.com/windows-port-bind.html。
1  | $ hexo g # 生成  | 
3.5 hexo修改主题
第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,所以可以进行修改。hexo常用的主题可以看知乎这个推荐https://www.zhihu.com/question/24422335/answers/updated。
博主采用hexo-theme-yilia-plus这个主题,这个主题是根据hexo-theme-yilia主题做了一些优化和改动,详情可以直接点击上面的链接查看。
预览效果:
电脑端:

移动端:

(1)下载主题:
1  | $ cd lajos182.github.io/  | 
下载后的主题都在目录themes下:

(2)修改全局配置_config.yml:就是根目录下的这个文件,下面配置中的xxxxxx可以根据自己来进行配置。
1  | # Hexo Configuration  | 
(3)修改主题下面的_config.yml:这个配置是themes/yilia-plus/_config.yml
1  | # Header-菜单  | 
(4)添加CNAME文件:文件内容添加绑定的域名
(5)将上面显示的目录结构中的文件、CNAME、READE.md提交至远程hexo分支:
1  | $ git add .  | 
(6)hexo常见命令
1  | hexo new "postName" #新建文章  | 
缩写:
1  | hexo n == hexo new  | 
组合命令:
1  | hexo s -g #生成并本地预览  | 
(7)发布博客并上传
1  | hexo n "发布第一个博客"  | 
进入lajos182.github.io/source/_posts/,找到发布第一个博客.md这个文件,可采用Markdown编辑器进行编写,编写完成后,使用命令生成并上传
(8)提交hexo分支的修改内容:
每次发布完,记得将修改的部分提交至hexo。
3.6 git管理与多端同步
为什么会存在这个问题呢?因为刚开始在一台电脑上搭建hexo环境并发布博客后,又换用另外一台新设备继续发布博客,此时发现从github克隆下来的只有网页样式文件,而source目录中的md文件就没有,如果直接发布新博文,就会把原来的博文覆盖掉。
为解决这个问题,上面的教程已经实现了:通过git建立新建一个hexo分支,hexo生成的静态博客文件默认放在master分支上;hexo的源文件(部署环境文件)可以都放在hexo分支上,换用新设备时,直接git clone -b hexo git@github.com:lajos182/lajos182.github.io.git,然后使用npm install安装环境,这样就能看到之前发布的博文*.md文件,发布新博文还是一样的。
3.7 常见的问题
(1)域名如何使用https访问?
进入github官网,打开仓库所在目录,点击settings,在Gighub Pages服务中配置Enforce HTTPS,此时绑定的域名就可以使用https访问
(2)如何添加gitment评论系统?
进入github主页,打开Settings—>Developer settings—>OAuth Apps—>New OAuth App,进入下面的页面:详细可以参考https://www.jianshu.com/p/f5c4633524c7

(3)hexo的gitment评论跳转问题,登录github后出现跳转地址https://www.lajos.top/?error=redirect_uri_mismatch&error_description=The redirect_uri MUST match the registered callback URL for this application.&error_uri=https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch,而且还无法评论
这个问题一般是注册的gitment应用有问题,自己查看主页以及授权回调地址是否正确,http和https也要查看是否与博客的域名地址一致。
(4)上一页和下一页显示问题:使用这个主题可能会出现下面这个问题:

首先找到lajos182.github.io/themes/yilia-plus/layout/_partial/archive.ejs,修改两处,分别在8,9行与37,38行,将« Prev改为<< 上一页, Next &raque;改为下一页 >>,操作如下:


接着,找到lajos182.github.io/themes/yilia-plus/layout/_partial/script.ejs,crtl + f搜索« Prev,将改为<< 上一页, 搜索Next &raque;改为下一页 >>,操作如下:

保存完成,输入一下命令:
1  | $ hexo clean  | 
至此完成修改
4 本文参考
http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa
https://blog.csdn.net/whbk101/article/details/97300209
https://www.jianshu.com/p/f5c4633524c7
- 本文作者: Lajos
 - 本文链接: https://www.lajos.top/2020/05/07/hexo-github快速制作个人博客/
 - 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!
 
		