看见很多大神在Github Pages上部署Demo,感觉效果还不错,刚才自己也试了一下,发现其实并不难!
选择 github pages 的理由
使用零成本: github pages 集成在 github 中, 直接和代码管理绑定在一起, 随着代码更新自动重新部署, 使用非常方便.
免费: 免费提供 http://username.github.io 的域名, 免费的静态网站服务器.
无数量限制: github pages 没有使用的数量限制, 每一个 github repository 都可以部署为一个静态网站.
首先我们介绍一下部署最基础的静态网页, 最终的效果是展示出一个 Hello, github pages :)
页面.
一、新建一个github项目
前往 github 官网, 点击 New repository
创建新项目. 填入项目基本信息, 点击 Create Repository
确认.
确认完成后会看到如下页面:
2 为 repository 开启 github page 选项
如图, 我们选中 Setting tab
往下滚动, 找到 Github Pages 选项, 将 Source 改为 master branch
, 最后点击 Save
按钮
如果为 master branch
显示为灰色而无法点击,你需要先给该仓库随便添加一个文件
最后我们会得到一个链接, 通过这个链接, 待会我们就能通过这个链接访问到该项目的 github pages 页面.
3 代码 clone 到本地, 并创建几个基本文件
再将自己的代码写好
4 将代码更新到 github 仓库
cd github-pages-demo git add . git commit -m "Add simple code"git push
5. 查看效果
Demo地址:https://dengqinzhi.github.io/
默认的主界面是 index.html
其他的:
添加自己的域名
我用的阿里云的域名服务,按如下格式添加:
保存后如下:
这里绑定的二级域名 rank.rogn.top,如果你想绑定到一级域名,将主机记录处留空即可(注意,可能会与已有的冲突,需要先删除)
然后在github仓库的 Settings 找到 Custom domain,填入你的域名(如 rank.rogn.top);
你会发现在该仓库下生成了一个 CNAME 文件,里面就是你刚才保存的域名;
等几秒就能通过你的这个域名访问了。
转载请注明:邓先生工作室 » 分享 » 使用github pages快速部署静态网页-支持不带仓库名访问、可自定义域名
发表评论