朱皮特的烂笔头

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

2001/01/01 web 共 3756 字，约 11 分钟

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

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

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

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

现在的模板

2020年12月3日更新

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

基础配置

  • 创建一个用来作为博客网站的GitHub仓库，例如我的zhupite.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，可以根据个人喜好修改。

解析域名

如果没有购买域名，直接使用zhupite.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 后面添加百度统计代码。

链接提交搜索引擎

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

添加文章分类

直接在 _posts 目录下新建分类名称的文件夹，然后在写MD格式的文章时，注意使用新的分类名称即可：category: "cocos"

早期的模板

如何使用

从这里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