使用GitHub Pages无须购买主机空间免备案搭建个人博客网站

2001/01/01 web 共 3682 字,约 11 分钟

本文介绍如何使用GitHub Pages免主机空间免备案搭建个人博客网站的方法,以前早期搭建博客基本上使用WordPress的较多,这种博客网站功能较多,但是也蛮麻烦,对于个人来说有以下问题:

  • 需要购买主机空间,主机空间又是一摊乱象:收费贵,服务不稳定,供应商不长久,虽然说现在各大厂也在卖主机空间,但是不便宜。对于个人小站来说也没必要。
  • 经常需要维护打理,需要定期备份,一旦换空间还要各种备份搬家,很是麻烦。
  • 写博客文章的时候麻烦,编辑什么的很痛苦,发布的时候麻烦。

而使用GitHub Pages搭建的博客完全没有上述问题,有以下优势:

  • 直接依赖GitHub的仓库作为存放博客的空间,不需要付费,不用购买主机空间。
  • 写博客文章就是写markdown,git上传就是发布文章,随写随传,编写方便。
  • 完全不用担心备份问题,都在代码仓库里,还有更新记录。
  • 博客文章就是一个个的markdown文件,本地也可以直接打开看,也方便使用,与线上时刻保持一致。

现在的模板

2020年12月3日更新

最新的博客模板使用的是 mzlogin.github.io: Jekyll Themes / GitHub Pages 博客模板 ,这个模板看起来比早期使用的效果略好一些,博客风格清爽大气,支持搜索,支持谷歌统计和谷歌广告,配置简单,博客摘要清爽,翻页页码也清晰……诸多好处不一一列举了,下面看如何部署。

基础配置

  • 创建一个用来作为博客网站的GitHub仓库,例如我的bigsinger.github.io,已经有的忽略。
  • 迁移GitHub,先从 mzlogin.github.io: Jekyll Themes / GitHub Pages 博客模板 迁移过来,我没有用fork的形式,直接提交代码的形式。
  • 修改 _config.yml 文件,对照着修改即可,非常简单。
  • 替换一个你喜欢的favicon.ico图标,当然不修改也没关系。
  • _data目录下是一些个人相关的数据:社交账号,个人技能,友链等,直接参考着修改即可。
  • _drafts目录是存放草稿的,个人感觉用不太上,因此只保留了 template.md 文件,其余的文件全部删除了。
  • _posts目录就是博客文章发布目录,可以安装子目录存放,markdown格式不变,之前的博客文件我是直接连同子目录一起复制过来的,可以直接兼容。
  • _wiki目录是存在知识库的,目前用不太上,因此只保留了 template.md 文件,其余的文件全部删除了。
  • images目录是存放markdown需要链接的图片资源的,可以全部删除,然后以后上传自己需要的图片即可,在markdown文章里通过相对路径的方式引用之。
  • 友链:是在pages目录下的links.md,引用的数据在_data目录下。
  • 关于:是在pages目录下的about.md,引用的数据在_data目录下。
  • 404:是在pages目录下的404.md,可以根据个人喜好修改。

解析域名

如果没有购买域名,直接使用bigsinger.github.io也是可以访问的,如果有域名的话可以进行解析。例如我的域名:https://zhupite.com/,解析过程可以参考:GitHub Pages博客网站绑定阿里云域名

添加评论系统

参见为GitHubPages博客添加评论系统 — 朱皮特的烂笔头

添加Google AdSense

如果想在博客里添加谷歌广告,需要做下修改。

  1. 需要把 _includes/header.html **文件中的 **AdSense代码 替换为自己的,就是替换类似这一段代码:
<script data-ad-client="ca-pub-0000000000" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  1. 替换 ads.txt 文件中pub后面的内容为自己的。

添加Google Analytics

登录 Google Analytics, 在后台点击:管理-账号-媒体资源-跟踪信息-跟踪代码,找到跟踪ID,类似:UA-123456789-1,复制出来,修改 _config.yml 文件中 analytics_id 的值为上面的跟踪ID即可。

添加百度统计

_includes\footer.html 后面添加百度统计代码。

链接提交搜索引擎

链接提交搜索引擎,以便搜索引擎快速收录网站,主要把域名链接提交到百度和谷歌。

早期的模板

如何使用

从这里gaohaoyang.github.io下载模板,稍作修改。

非常感谢作者Gaohaoyang提供的这么好用的模板,修改的内容非常少,就连分类都不需要自己手动配置了,完全根据发的MD博客内容自动获取,非常方便。

如何配置

  • 修改_config.yml文件,对照着修改即可,非常简单。
  • 修改index.html中的博客显示的主标题和副标题。
  • 替换一个你喜欢的favicon.ico图标,当然不修改也没关系。
  • page目录下的页面是要显示在博客顶部的,可以自行修改。主要是归档,标签,分类,关于,除关于的自我介绍需要修改外,其他基本上不需要修改。

最后再提一下,这个模板会自动根据博客内容里指定的分类来管理分类,所以不需要手动配置分类了,方便!

如何发布博客

  • 在_posts目录下写MD文件,可以创建子目录,子目录的名称与上面配置的文章分类不冲突,可以随意取名。长期编写博客的话建议还是分门别类组织好,以免文件太多不好管理。
  • MD文件有一个格式,必须以日期开头,类似:2001-01-01-readme.md
  • 本地写好.md文件,文件最好不要使用中文命名,以免不好做外链分享。MD文件内容开头填好以下字段:
layout: 	post
category:	"web"
title:		"这里写标题"
tags:		[web,blog]

最简的写法:

layout: 	post
category:	"web"
title:		"这里写标题"

复杂点的写法:

layout: 	post
category:	"web"
title:		"这里写标题"
tags:		[web,blog]
date:		2017-02-27

如果有date字段,那么会用内容的时间,不过不建议这么做!

  • 为了让博客显示MD的目录,在上面内容之后正文之前加上这段内容:
	- 目录
	{:toc}
  • 编写好后SVN提交,比Git提交方便太多,推荐!
  • GitHub Pages会在收到提交后,会把文章编译成静态网页,编译使用的字段如上。
  • 刷新网站,可以理解看到效果。
  • 如果MD文件中的格式有误,GitHub会给一个警告,然后按内容修改后重新提交即可。

TODO

以下可以参考,但是不建议直接用,因为要修改的地方太多,部署太麻烦,而且容易失败,但是里面的模块可以借鉴参考:

阅读量访问量统计

不知道什么时候网站的阅读量访问量统计就没了,后来查看代码知道是用了Busuanzi的统计代码,js链接失效导致的,网上找到了解决办法,只要替换

https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js

https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

即可。

参考资料

文档信息

Search

    Table of Contents