使用Github Pages部署静态网页

马谦马谦马谦 云相关评论718字数 1928阅读6分25秒阅读模式

一、关于Github Pages

github pages是github提供的静态文件托管服务,支持部署仓库内的静态页面文件,特别适合hexojekyll以及gitbook等应用部署网站使用。Github Pages有以下几个优点:

  1. 完全免费
  2. 支持自定义域名
  3. 支持HTTPS
  4. 免备案

其实国内像gitee.comcoding.net也都是提供Pages服务的,但是经过几年的使用感受来说,这两家相对于github还略有不足。主要体现在:

  1. coding在几年前是免费的,也支持自定义域名和HTTPS,无需备案,当时甚至支持对php动态程序的托管。如果coding一直是这种情况,我肯定毫无疑问选择coding,但是coding在17年底18年初和腾讯合作之后,功能就被阉割了。几个功能不是开会员才能使用,就是服务器得收钱。特别是在推广的Web IDE用起来完全没有之前清爽,感觉很笨重。因此后面在改版之后基本就没用过了(当时是在coding部署的hexo博客,改版后导致我后面直接连hexo都没用了T_T)。
  2. gitee也是近两年才大力改善Pages的功能,以前是不支持自定义域名的,部署之后得用用户名.gitee.com/仓库名/来访问,HTTPS功能更是没有(因为太挫了所以gitee基本不用)。现在是支持了自定义域名,但是要开通会员才能自定义域名,每年99(直接放弃)。

对比来看,github还算比较良心的,这也是为什么会选择github来托管的原因。但是github pages也有功能是不足的地方:

  1. 不支持分支部署,只支持部署master分支或者master分支下的docs目录。而上面两家国内托管机构支持多分支部署。
  2. 不支持目录部署,例如希望通过book.xxxx.com/a/和book.xxxx.com/b/分别部署两个仓库,在github pages中是不支持的。只能是通过多个自定义域名来区分,如a.book.xxxx.com和b.book.xxxx.com。

二、设置github pages

2.1 部署静态页面

pages的设置在setting页面中:

使用Github Pages部署静态网页-图片1

点击后,一直往下拖就可以看到pages设置:

使用Github Pages部署静态网页-图片2

pages目前只支持对master分支或者master的docs目录添加静态页面托管,要想托管页面,必须把文件放到master主目录或者docs目录下。而对于大多数应用(如gitbook)来说,主目录一般都是源码文件,因此建议把生成的静态文件放到docs目录下。当代码库中存在docs目录时,第二个选项会自动亮起。

使用Github Pages部署静态网页-图片3

配好后就可以使用username.gitee.io/projectname来访问静态页面了。

2.2 添加自定义域名

默认情况下,部署完成后,访问的URL为username.gitee.io/projectname,github支持自定义域名来重定向这个页面。

配置方法:Custom domain栏目中输入自定义的域名,点击Save即可。

我这里绑定的域名是html.book.maqian.io

使用Github Pages部署静态网页-图片4

配置好后,页面会提示:

现在要做的就是把域名添加指向到github pages的服务地址,有两种方法:

  1. 添加一条CNAME记录,指向username.github.io。可以参考Quick start: Setting up a custom domainCustom domain redirects for GitHub Pages sites
  2. 添加A记录,指向github服务器的IP地址,IP地址要在Troubleshooting custom domains找到。

正常情况下建议使用CNAME解析来指向github,因为域名都有套CDN,访问速度优于指向IP地址。

更多相关信息可参考Using a custom domain with GitHub Pages

添加CNAME解析

CNAME解析在DNS服务商处添加,因为打算把*.book.maqian.io都作为自定义域名,因此添加了以下CNAME解析:

使用Github Pages部署静态网页-图片5

加好后,确认本机可以解析:

然后访问网站,部署的页面就出来了:

使用Github Pages部署静态网页-图片6

2.3 强制https

github pages支持添加https,会自动申请Let's encrypt的证书,勾选上Enforce HTTPS选项就可以了:

使用Github Pages部署静态网页-图片7

选框无法被勾选的时候,先清空Custom domain里面的内容,点击Save,然后再勾选上Enforce HTTPS,填入自定义域名。

看到以下信息的时候,说明https证书已经在申请过程中了,耐心等待一段时间:

使用Github Pages部署静态网页-图片8

申请完成之后,勾选上选框:

使用Github Pages部署静态网页-图片9

再次访问就是https的了:

使用Github Pages部署静态网页-图片10

 最后更新:2019-9-14
马谦马谦马谦
  • 本文由 马谦马谦马谦 发表于 2018年4月11日17:21:51
  • 转载请务必保留本文链接:https://www.dyxmq.cn/cloud/deploy-static-html-file-with-github-pages.html
  • github
typecho重置密码的办法 云相关

typecho重置密码的办法

进入到数据库,过滤出当前用户的信息: select uid, name, password from typecho_users where name = 'xxxx'; 修改第三列的密码为e10ad...
wordpress知更鸟主题添加菜单图标 Wordpress

wordpress知更鸟主题添加菜单图标

知更鸟主题5.2及之前的版本使用的图标库为font awesome,5.2之后的版本使用阿里图标库的图标。相对来说,选择阿里图标库更好一些,它的图标更全且有国内cdn,访问速度更快。 添加后的效果: ...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证