如何在五分钟内快速在github上创建属于自己的html5静态博客

个人博客：alvincr.com，本文地址：https://alvincr.com/2021/01/github-pages/

 

部分图片转存失败，可以访问我的博客，效果更好。

1 背景知识

如果我的文章步骤有写的不清楚的地方，可以参考下面官网，所有内容都有规范标准的详细解答。

官网地址：https://github.com/

教程地址：https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/creating-a-github-pages-site

首先要注册github账号，注册地址 按照流程注册就行了。

1 什么是github pages

GitHub Pages是静态站点托管服务，可直接从GitHub上的存储库中获取HTML，CSS和JavaScript文件，还可以选择在构建过程中运行这些文件并发布网站。可以将站点托管在GitHub的github.io域或自己的自定义域上。

GitHub Pages网站的发布源是存储网站源文件的分支和文件夹。如果存储库中存在默认发布源，则GitHub Pages将自动从该源发布网站。用户和组织站点的默认发布源是存储库的默认分支的根。项目站点的默认发布源是gh-pages分支的根。

因此使用github pages就能够在github的服务器上创建自己的博客，我相信它的服务器比我使用的服务器好很多倍，当然有多少能分配到个人另说。

2 创建存储库

在创建站点之前，必须在GitHub上具有站点的存储库，存储库又称Repository，在本文中简称repo，repo相当于公司总部，总公司由github进行掌控，旗下控制着很多子公司，这些子公司归个人所有。个人可以从总公司获取资料，也可以研发出资料后分享给总公司。因此相联系的用户端都可向服务器上推送（push）和拉取（pull）资源（代码），以便于更新服务器中的代码版本或者从服务器上下载代码到本地进行使用。

2 创建新的github博客

1 新建repo

关于repo知识参考附录

注册完成之后登陆在网页上输入：https://github.com/ ，进入官网界面（也可以直接进入个人界面，但是创建方法就不一样了）

左上角选择新建repositories（储存库），

2 注意事项

（1）名字必须使用<username>.github.io的形式才可以，其中<username>替换成你的github账户名，我这里使用的就是alvincr.github.io

（2）可以看到我在2号处使用知识共享协议，具体选择可以看个人，也可以不选择，选择方法可以看我的选择协议教程

3 设置GIthub Pages

找到setting选项卡，下拉到最下面会有github pages选项。

在“ GitHub页面”下，使用“无”或“分支”下拉菜单，然后选择一个发布源。

 

图片转存失败

 

（可选）使用下拉菜单为您的发布源选择一个文件夹。

点击保存。

4 选择主题

这里选择的主题可以下载出来，也可以不下载。

3使用GitHub客户端设置

1 克隆仓库

快捷键ctrl+shift+o

选择要克隆的库，然后克隆到本地。

2 清理文件

只保留.git文件，其它全部删除

3 下载创建模板

可以使用2.4中的模板，也可以自己下载新模板，当然也可以手写整个网页，个人博客alvincr.com本文最后将会放上我挑选出的几个模板，

http://jekyllthemes.org/

https://html5up.net/

4 上传模板

下载完后解压到克隆文件夹中

在GitHub桌面版中就能够看到有所变化，图中1,2处随意填写内容。（例如alvincr.com）,点击commit to mian进行提交

5 推送至github

点击Push origin，右上角显示推送进度，等待完成即可。

图片转存失败

 

6 推送效果

未推送成功会显示：

推送成功将会成功进入主题界面，显示效果如下：

4 问题

1 选择主题后无法进入博客

输入alvincr.github.io就看到以下404界面，显示这里没有GitHub Pages网站，如果您要发布它，请阅读完整的文档，以了解如何为您的存储库，组织或用户帐户设置GitHub Pages。

一开始我就遇到了这个问题，直到我按照官网教程完全操作完毕后也是404界面，想着也许是因为服务器延迟，再创建一个等一下吧，结果当我用alvincasper.github.io进行创建的时候就没有这个问题。直接就能够访问。

此外我又重新创建alvincr.github.io仍然无效，因此认为使用github创建博客时必须使用用户名，使用其它名称无效。

不过这样下结论太过草率，因此我重新申请一个账号，再进行尝试两种名称建立博客，看看会不会成功。

2 重新创建账号

缘由：问题1

重新建号尝试发现能够建立alvincasper.github.io，然而这个alvincasper.github.io已经被我另一个账号所使用了，因此可以完全确定，在github创建博客只能够用用户名进行创建，其它名称都不行。

3 GitHub Pages当前被禁用

由于我一开始使用的账号是我很早就创建的账号，因此没出现这个新创建账号的问题。

不过如果你在本文第二步（创建新的github博客）的注意事项过程中，添加了README等等其它文件应该不会出现这种情况

问题解决方法如下：

点击红色箭头位置，创建一个新目录

 

图片转存失败

 

+

点击下图1所示（edit new file）随意输入内容，然后点击3 提交文件即可解决。

效果图：