使用 github pages快速部署自己的静态网页

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

选择 github pages 的理由

  1. 使用零成本: github pages 集成在 github 中, 直接和代码管理绑定在一起, 随着代码更新自动重新部署, 使用非常方便.
  2. 免费: 免费提供 http://username.github.io 的域名, 免费的静态网站服务器.
  3. 无数量限制: github pages 没有使用的数量限制, 每一个 github repository 都可以部署为一个静态网站.

首先我们介绍一下部署最基础的静态网页, 最终的效果是展示出一个 Hello, github pages :) 页面.文章来源地址https://www.yii666.com/article/756175.html

一、新建一个github项目

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

使用 github pages快速部署自己的静态网页

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

使用 github pages快速部署自己的静态网页

2 为 repository 开启 github page 选项

如图, 我们选中 Setting tab网址:yii666.com<网址:yii666.com

使用 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://ssthouse.github.io/github-pages-demo/

现在貌似有点区别,需要进入 /main.html(假设主页是main.html)

续:知道了,默认的主界面是 index.html

其他的:

添加自己的域名

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

使用 github pages快速部署自己的静态网页

保存后如下:

使用 github pages快速部署自己的静态网页

这里绑定的二级域名 rank.rogn.top,如果你想绑定到一级域名,将主机记录处留空即可(注意,可能会与已有的冲突,需要先删除)文章来源地址:https://www.yii666.com/article/756175.html

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

你会发现在该仓库下生成了一个 CNAME 文件,里面就是你刚才保存的域名;文章地址https://www.yii666.com/article/756175.html

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

参考链接:

1. 快速搭建静态网页 https://zhuanlan.zhihu.com/p/38480155

2. 添加域名解析 https://www.jianshu.com/p/93c939fc939a

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png