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缓存,一般还需要再等待一会(一般十分钟,或许更长时间)才能生效,如下图成功显示👇
最后
站点绑定的域名已经更换,访问请到👉 这里
🎈🎈🎈
🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉
🎁 欢迎大家评论交流, 蟹蟹😊
推荐阅读
react-naive工作原理
在react中,virtual dom 就像一个中间层,介于开发者描述的视图与实际在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面,开发者必须操作浏览器的Dom,这个操作代价昂贵,过度操作dom会给性能带来影...
甜点cc阅读 79
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2.1k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 21阅读 1.6k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...
九旬赞 13阅读 1.6k
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 17阅读 1.5k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。