如何使用 GitHub Pages 预览 HTML

看到这个标题，有些同学可能会问：

为什么我要用GitHub Pages来预览HTML文件呢？我直接用浏览器打开不就完事了吗？

那作为全球最大的同性交友网站，GitHub会告诉你，来我这预览HTML有什么好处呢：

1. 使用GitHub Pages不仅可以预览网页，还可以帮我们托管网页，而且是完全免费的；
2. 支持静态脚本，而且自带主题可供我们选择；
3. 可以绑定自己的域名；
4. 除了预览之外，我们还可以托管自己的博客站，给自己搭建一个舒适的写博客的环境，不用折腾服务器、域名啥的。
5. 其他额外好处任君探索……

那接下来我们就来看看如何使用GitHub Pages实现一个简单的HTML网页的预览吧~

Step1 将本地的html代码仓库上传到Github

1.1 在GitHub上新建一个仓库

newrepo.png

这里我的仓库名为demo，然后直接点击创建仓库（什么也不要勾选）

1.2 上传仓库到GitHub

这里使用命令行将本地仓库push到GitHub的仓库中

cmd.png
cmd2.png

Step2 设置settings

demo仓库设置

• 进入Github的demo仓库中，点击右上方的settings

  
  settings.png

• 下拉至GitHub Pages，将Source改为master branch

  
  source.png

Step3 预览网页

• 等待页面刷新后，会自动生成一个网址

  
  ready.png

• 点击这个网址，就会看到我们的网页可以打开啦。快去跟你的小伙伴分享你做的网页吧~

  
  preview.png

后记

本文是简陋简化版的用GitHub Pages预览网页的操作指北，正规军操作指南请期待博主的后续文章，或者直接食用原汁原味的GitHub帮助文档。