用 GitHub 来部署静态网页

jopen 10年前

原文  http://segmentfault.com/a/1190000002765287


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

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

用 GitHub 来部署静态网页

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.再说点,它帮我们生成的目录结构其实不太好,咱们可以自己定义自己的目录结构,之前的一个 项目 目录结构是这样的

用 GitHub 来部署静态网页

14.要注意的是:

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

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

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

用 GitHub 来部署静态网页

17.它会帮你自动的做分析和统计

用 GitHub 来部署静态网页

</div> </div>