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

时间 2019-11-06

标签 github 部署静态网页栏目 Git 繁體版

原文原文链接

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

1.新建版本库

首先我们新建了一个版本库做为 demo，而后点击"settings"

2.`Automatic page generator`

咱们选择 "GitHub Pages" 的 "Automatic page generator"

3.自由配置信息

4.`Continue to layouts`

这里的google分析能够不填，我们先把页面跑起来，点击"Continue to layouts"

5.选择模板

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

6.注意分支

发布成功，这里是我们的"gh-pages分支"

7.访问页面

点击"settings"，访问刚刚发布的静态页面连接

8.查看部署结果

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。html

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`

12.demo

到此为止，差很少讲完了，这个是demo的地址html5

13.默认目录

它帮咱们生成的目录结构其实不太好，我们能够本身定义本身的目录结构，以前的一个项目目录结构是这样的git

14.要注意的是：

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

15.修改默认目录

若是是将已有的（静态）项目部署上线，建议本身修改目录结构json

改改更健康"꒰･◡･๑꒱"

16.`google analytics`

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

17.分析和统计

google analytics会帮你自动的作分析和统计spa