http://segmentfault.com/a/1190000002765287

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

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。

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git
branch

* gh-pages

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git commit -a -m "first commit"

[gh-pages cc8c864] first commit1 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的地址

13.默认目录

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

14.要注意的是：

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

15.修改默认目录

如果是将已有的（静态）项目部署上线，建议自己修改目录结构

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

16.google analytics

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

17.分析和统计

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

完~

来源： <http://segmentfault.com/a/1190000002765287>

用 GitHub 来部署静态网页 ꒰･◡･๑꒱的更多相关文章

  1. github pages部署静态网页

    如果你的项目只是一个静态网站,就没有必要再去整什么服务器,github pages 提供了搭建静态网站的功能: 为什么使用Github Pages 1. 搭建简单而且免费: 2. 支持静态脚本: 3. ...

  2. 收纳箱1号 | GitHub Pages部署静态网页的一点私货

    Static site 总结各种各有的 static site generator Jekyll 其实是一个 static site generator. 如果你去 Google 这个,会发现有很多总 ...

  3. docker+nginx部署静态网页(html)

    我看了下网上都是部署单个.html页面的实例.所以今天试试多个.html文件的部署. 因为之前docker部署过vue.js打包的项目,所以按上次部署方式部署.结果还真行,只是这次部署的是小滴课堂上的 ...

  4. 用Github做一个静态网页(GithubPages)

    一.新建一个仓库(new). 二.命名Repository name为:(名字).github.io(一定要有.github.io). 三.勾选Initialize this repository w ...

  5. Nginx部署静态页

    简答说一下如何用Nginx部署静态网页,并绑定域名访问 1.通过FTP上传静态页到服务器指定目录 2.编写nginx的.conf文件 3.重启nginx 如图,这是centos上传文件路径 nginx ...

  6. 怎么在Eclipse上运行静态网页

    1. 前言 习惯用Eclipse开发动态网站,现在有一个静态网页(只有Html,Js,CSS代码,无后台Java代码)想跑一下,自己通过网上查询然后自己也研究捣鼓了一下,发现有三种方式可以发布静态网页 ...

  7. Windows安装node环境，部署静态网站

    1.进入官网,下载nodejs https://nodejs.org/zh-cn/ 2.安装nodejs win10怎么安装nodejs和npm https://jingyan.baidu.com/a ...

  8. 使用 github pages快速部署自己的静态网页

    看见很多大神在Github Pages上部署Demo,感觉效果还不错,刚才自己也试了一下,发现其实并不难! 选择 github pages 的理由 使用零成本: github pages 集成在 gi ...

  9. 将静态网页部署到git上访问

    1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/ ...

随机推荐

  1. [Js]Ajax

    一.什么是Ajax 不刷新的情况下读取数据或提交数据 (最早出现ajax:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博 特性:只能从服务器上去读取数据(所以我们需要配置自己的服 ...

  2. xml数据解析调研

    XML数据解析http://www.tuicool.com/articles/Nraau2(必用) http://www.cnblogs.com/pengyingh/articles/2342699. ...

  3. limit 百万级数据分页优化方法

    mysql教程 这个数据库教程绝对是适合dba级的高手去玩的,一般做一点1万 篇新闻的小型系统怎么写都可以,用xx框架可以实现快速开发.可是数据量到了10万,百万至千万,他的性能还能那么高吗? 一点小 ...

  4. android自定义控件实例(Linearlayout组合TextView和ImageView)

    2013-12-18 11:25:22 转载自: http://www.open-open.com/lib/view/open1328836804515.html 很多时候android常用的控件不能 ...

  5. ASP.NET 学习笔记

    1.ASP.NET 服务器控件是可被服务器理解的标签 有三种类型的服务器控件(所有服务器控件必须出现在 <form> 标签内,同时 <form> 标签必须包含 runat=&q ...

  6. linux内核编译

    1,进入内核源码树,如果是第一次编译,建议清理以下内核功能选择文件: make mrproper 2,删除前一次编译的残留文件: make clean 3,配置内核功能 make menuconfig ...

  7. 新发布GoldenGate 12c版本中的主要特性

        业界领先的实时数据集成工具GoldenGate现在可以帮助企业在传统数据库和云平台.大数据平台之间进行实时复制.新的OGG 12c支持更多的异构数据库和大数据平台,进一步提升可管理性和对混合云 ...

  8. Security Checklist （路由器安全checklist）

    Security Checklist Website by     Michael Horowitz  Home | Introduction | Router Bugs | Security Che ...

  9. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  10. Tomcat容器运行struts2+spring+mybatis架构的java web应用程序简单分析

    1.具体的环境为 MyEclipse 8.5以及自带的tomcat spring3.0.5 struts2.3.15.1 mybatis3.0.5 2.想弄明白的一些问题 tomcat集成spring ...