转载

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

在尝试过用 GitHub 部署静态 HTML 网页后，觉得其实挺容易的，这里简单说说如何用 GitHub 来完成部署。

1.首先我新建了一个版本库作为 demo，然后点击 settings

2.选择 GitHub Pages 的 Automatic page generator

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

3.这里填一些基本信息，也可以默认

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

4.这里的google分析可以不填，我们先把咱们的页面跑起来，点击 Continue to layouts

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

5.这里github给你提供了一些模板，这里我选了第一个模板，点击 Publish page

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

6.发布成功，这里是我们的代码

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

7.点击 settings ，访问刚刚发布的静态页面链接

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

8.成功看到刚刚我们选择的模板

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

9.自定义你的页面，我把它的模板也删了，自己写了简单 index.html

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>html5</title>     <style type="text/css">     .theme{       display: block;       width: 200px;       font-size: 30px;       margin: 100px auto;     }     </style> </head> <body> <div class="theme">   Hello, world. </div>  </body> </html>

10. add -> commit -> push

这里要注意一下，我是直接新建的库，然后发布的，所以，没有master分支，只有 gh-pages分支 ，github只会将你的 gh-pages分支 部署上去，不会动你的其他分支的东西。所以，我们要将改动提交到gh-pages分支上，再push。

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git branch * gh-pages  qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git commit -a -m "first commit" [gh-pages cc8c864] first commit  1 file changed, 23 insertions(+), 65 deletions(-)  rewrite index.html (98%)  qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git push origin gh-pages Counting objects: 3, done. Delta compression using up to 4 threads. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 523 bytes | 0 bytes/s, done. Total 3 (delta 0), reused 0 (delta 0) To git@github.com:qianjiahao/HowToDeployHTML.git    3d6ebe7..cc8c864  gh-pages -> gh-pages

11.提交成功，我们看看咱们的网页，熟悉的 Hello,world

用 GitHub 来部署静态网页 ꒰･◡･๑꒱

12.到此为止，差不多讲完了，这个是 demo的地址

13.再说点，它帮我们生成的目录结构其实不太好，咱们可以自己定义自己的目录结构，之前的一个项目目录结构是这样的

14.要注意的是：

它会认准你的index.html页面，当做初始界面，我试过将它的index.html放入我的目录结构中，后来我部署发布后，github又自动给我生成了一个index.html页面，这个问题当时没有发现，导致出现了更新无效等奇葩的情况，疑惑了半天。还有params.json这个配置文件要留着，它会配置github给你生成的模板信息。

15.如果是将已有的（静态）项目部署上线，建议自己修改目录结构，改改更健康꒰･◡･๑꒱

16.github推荐使用 google analytics ，在登录之后点击 管理 的 跟踪信息 ，会看到它给你提供的id和code，把code粘贴到你的代码里，就可以了

用 GitHub 来部署静态网页 ꒰･◡･๑꒱