admin

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

admin 分享 2022-10-19 425浏览 0

看见很多大神在Github Pages上部署Demo,感觉效果还不错,刚才自己也试了一下,发现其实并不难!

选择 github pages 的理由

  1. 使用零成本: github pages 集成在 github 中, 直接和代码管理绑定在一起, 随着代码更新自动重新部署, 使用非常方便.

  2. 免费: 免费提供  的域名, 免费的静态网站服务器.

  3. 无数量限制: github pages 没有使用的数量限制, 每一个 github repository 都可以部署为一个静态网站.

首先我们介绍一下部署最基础的静态网页, 最终的效果是展示出一个 Hello, github pages :) 页面.

一、新建一个github项目

前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

确认完成后会看到如下页面:

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

 2 为 repository 开启 github page 选项

如图, 我们选中 Setting tab

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

往下滚动, 找到 Github Pages 选项, 将 Source 改为 master branch, 最后点击 Save 按钮

如果为 master branch显示为灰色而无法点击,你需要先给该仓库随便添加一个文件

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

最后我们会得到一个链接, 通过这个链接, 待会我们就能通过这个链接访问到该项目的 github pages 页面.

3 代码 clone 到本地, 并创建几个基本文件

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

再将自己的代码写好

4 将代码更新到 github 仓库

cd github-pages-demo
git add .
git commit -m "Add simple code"git push

5. 查看效果

Demo地址:https://dengqinzhi.github.io/

默认的主界面是 index.html

其他的:

添加自己的域名

我用的阿里云的域名服务,按如下格式添加:

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

 保存后如下:

使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名

这里绑定的二级域名 rank.rogn.top,如果你想绑定到一级域名,将主机记录处留空即可(注意,可能会与已有的冲突,需要先删除)

然后在github仓库的 Settings 找到 Custom  domain,填入你的域名(如  rank.rogn.top);

你会发现在该仓库下生成了一个 CNAME 文件,里面就是你刚才保存的域名;

等几秒就能通过你的这个域名访问了。


版权声明:
    “邓先生工作室”文章为自撰和网摘为一体,网摘文章及图片版权归原作者所有,转载本文请注明出处,请勿用于商务用途。如有侵犯您的权益,请及时联系toneydeng@qq.com予以删除!
发表评论