GitHub Pages 站点建设

1、简介

  • GitHub Pages 是通过 GitHub 托管和发布的公共网页,将纯文本转换为静态博客网站。
  • 您可以使用 GitHub Pages 来展示一些开源项目、博客甚或分享您的简历,有内存限制,可以绑定个人域名。
  • 启动和运行的最快方法是使用 Jekyll 主题选择器加载预置主题。 然后,您可以修改 GitHub Pages 的内容和样式。👉 文档

2、创建仓库

仓库名: <username>.github.io
username 是GitHub的用户名

3、创建站点

repo 下创建 index.md文件,随便写点东西保存。然后,点击 settings选项卡,单机左侧 Pages进行设置,如下图:

🔊 此时站点已经建成,可以访问 https://<username>.github.io/ 查看,如果已经有个人域名了,也可以绑定个人域名,继续往下看👇

4、仓库文件目录

5、绑定域名

我个人购买的一级域名是 i-xiao ,域名后缀是 space,专门给GitHub Pages 增加一个CNAME记录(blog),解析二级域名,绑定 <username>github.io 域名。

5.1、域名相关知识

  • www:主机名,i-xiao : 域名主体(一级域名),.space : 域名后缀
    注册一级域名的时候是需要付费的
  • 二级域名,是依附一级域名的存在而存在的,也就是说要是顶级域名消失了,二级域名也也会不复存在。反而来说,二级域名的网站不做了,主域名网站是不受影响的。
  • 一级域名、二级域名区别:
    DNS收录一级域名更快;还有就是解析速度,下一跳路由就不说了,找到目的主机之后,二级域名层级更深,需要多一层计算(其实这是我瞎写的🤣,猜测应该跟 nginx location匹配类似)

5.2、GitHub上配置自定义域名

进入 <username>github.io 仓库,进入设置页面,点击左边 Pages 选项卡,进行下面的配置。

6、配置域名映射

各记录类型使用目的

记录类型使用目的
A 记录将域名指向一个 IP 地址(外网地址)。
CNAME 记录将域名指向另一个域名,再由另一个域名提供 IP 地址(外网地址)。
MX 记录设置邮箱,让邮箱能收到邮件。
NS 记录将子域名交给其他 DNS 服务商解析。
AAAA 记录将域名指向一个 IPv6 地址。
SRV 记录用来标识某台服务器使用了某个服务,常见于微软系统的目录管理。
TXT 记录对域名进行标识和说明,绝大多数的 TXT 记录是用来做 SPF 记录(反垃圾邮件)。
隐、显性 URL 记录将一个域名指向另外一个已经存在的站点。

如下图

7、DNS检测

8、查看Pages

成功解析之后,还存在DNS缓存,一般还需要再等待一会(一般十分钟,或许更长时间)才能生效,如下图成功显示👇

最后

站点绑定的域名已经更换,访问请到👉 这里


🎈🎈🎈

🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉

🎁 欢迎大家评论交流, 蟹蟹😊

看见另一种可能

43 声望
2 粉丝
0 条评论
推荐阅读
react-naive工作原理
在react中,virtual dom 就像一个中间层,介于开发者描述的视图与实际在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面,开发者必须操作浏览器的Dom,这个操作代价昂贵,过度操作dom会给性能带来影...

甜点cc阅读 79

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.6k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图

看见另一种可能

43 声望
2 粉丝
宣传栏