Qingquan-Li / blog

My Blog
https://Qingquan-Li.github.io/blog/
132 stars 16 forks source link

GitHub Pages #12

Open Qingquan-Li opened 7 years ago

Qingquan-Li commented 7 years ago

本文参考并结合和以下2个链接,总结出快速搭建出 GitHub Pages 的方案:


GitHub Page 包括两种类型的静态站点(pages),本文将分别介绍这两种类型 pages 的制作

  1. 项目类型的 pages,对于每一个项目,你可能都要建立一个网站来介绍和宣传你的项目,在 GitHub 上,你只需要把你的静态页面内容 push 到这个项目的 gh-pages 分支(gh-pages 分支需要新建),然后通过 http(s)://username(orgname).github.io/projectname 就可以直接访问,简单快捷。
  2. 用户(或组织)类型的pages,只需在用户或组织名下,创建一个名为 "username(orgname).github.io" 的repository 后,将静态站点 push 到 master 分支(默认分支),就可以通过域 username(orgname).github.io 访问。

另外还可以通过绑定域名,通过你绑定的域名来访问你的站点。


一、项目类型的 pages:

1.1 新建一个仓库,下面以我的 https://github.com/FatliTalk/website_demo演示项目为例

新建一个仓库


1.2 新建 gh-pages 分支,注意小写

这里写图片描述


1.3 创建一个名为 index.html 文件,文件里面的内容可以自由发挥

①创建一个名为 index.html 文件 创建一个名为 index.html 文件1

②在 index.html 中填写你要在 page 站点显示的内容 创建一个名为 index.html 文件2


1.4 访问站点

访问站点


至此,你已经可以用最快捷简单的方式新建了一个静态站点。


1.5 另外,除了新建 inde.html 文件以访问,你还可以选择 GitHub 提供的主题模板。注意:如果选择主题模板后要删除原来创建的inde.html 文件,才可以正确访问

①点击 Setting 选择主题1

②页面滚动下拉,找到 Choose a theme 选择主题2

③选择喜欢的模板 选择主题3

④修改 README.md 文件,修改内容将会在站点中显示,见⑤图 选择主题4

⑤访问 https://FatliTalk.github.io/website_demo ,显示效果 选择主题5



二、用户(或组织)类型的pages:

既然你已经知道如何建立项目类型的 pages,建立用户类型的的 pages 其实大同小异,这里不再重复一遍。不同点在于:



三、绑定域名,通过绑定的域名来访问你的站点

这第三部分为拓展部分,没有注册域名或者对此不感兴趣的同学可以忽略这部分


3.1 创建 CNAME 文件,注意大写,CNAME 的意思是 change name ,即把你原来 GitHub Pages 的站点名称 改为你要绑定的域名,所以CNAME 文件内容是你要绑定的已注册的域名,如图

绑定域名


3.2 域名解析,指向 GitHub 提供的 ip :192.30.252.153192.30.252.154 ,等几分钟 DNS 扩散后,即可通过你注册的域名指向你的 GitHub Pages 站点。例如通过域名 fatlitalk.com 指向 https://fatlitalk.github.io

域名指向GitHub ip

3.3 GitHub Pages上的自定义域获得对HTTPS的支持:域名解析,指向 GitHub 提供的(新的) ip : 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 然后,在对应的 GitHub 仓库中依次选择 Settings > Enforce HTTPS 域名指向GitHub新ip

https


——END