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

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

2.选择 GitHub Pages 的Automatic page generator

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

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

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

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

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

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

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

html5

.theme{

display: block;

width: 200px;

font-size: 30px;

margin: 100px auto;

}

Hello, world.

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

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

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

14.要注意的是:

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

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

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

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

自动部署静态html,手把手教你用 GitHub 来部署静态网页相关推荐

  1. 如何关闭华为自动杀进程_如何取消苹果自动续费?手把手教你关闭自动续费全步骤...

    如何取消苹果自动续费?一些手机应用的会员在充值时会默认自动续费,有些时候我们可能没看到默认勾选了这个选项,在收到账单才发现自己被扣了钱.想要关闭自动续费却不知道该怎么操作,今天小编就来教大家如何关闭苹 ...

  2. 如何取消苹果自动续费?手把手教你关闭自动续费全步骤

    如何取消苹果自动续费?一些手机应用的会员在充值时会默认自动续费,有些时候我们可能没看到默认勾选了这个选项,在收到账单才发现自己被扣了钱.想要关闭自动续费却不知道该怎么操作,今天小编就来教大家如何关闭苹 ...

  3. 手把手教你建github技术博客

    适合人群 喜欢写Blog的人 有一定的编程基础 爱折腾的人 熟练使用版本控制Git 了解使用Github 熟悉基本的MarkDown语法 环境准备 安装Git 下载 msysgit 并执行即可完成安装 ...

  4. 手把手教你建github技术博客by hexo

    适合人群 喜欢写Blog的人 有一定的编程基础 爱折腾的人 熟练使用版本控制Git 了解使用Github 熟悉基本的MarkDown语法 环境准备 安装Git 下载 msysgit 并执行即可完成安装 ...

  5. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  6. 开发板给电脑自动分配IP?手把手教部署零配置网络实现电脑与开发板直连

    关注.星标嵌入式客栈,精彩及时送达 [导读] 在做一个ZYNQ项目时,需要实现嵌入式Linux与Windows电脑直连.可能会有盆友会遇到类似的需求,所以整理分享一下. 问题描述 基于ZYNQ芯片设计 ...

  7. 【保姆级教程】手把手教你用github制作学术个人主页(学者必备)

    很多朋友到了本科生或者研究生或者博士生的高年级,有了制作个人主页的需求,今天这一期博客将以academicpages模板为例,手把手教你快速制作一个简洁能用的个人主页. 1.首先你需要拥有一个gith ...

  8. k8s ubuntu cni_手把手教你使用RKE快速部署K8S集群并部署Rancher HA

    作者:杨紫熹 原文链接: https://fs.tn/post/PmaL-uIiQ/ RKE全称为Rancher Kubernetes Engine,是一款经过CNCF认证的开源Kubernetes发 ...

  9. 计算机视觉研究院手把手教你深度学习的部署(手势识别,源码已开源)

    计算机视觉研究院专栏 作者:Edison_G 今天我们继续基于姿态估计的运动计数APP开发! 公众号ID|ComputerVisionGzq 学习群|扫码在主页获取加入方式 关注并星标 从此不迷路 计 ...

最新文章

  1. 爸爸和无我编程十条诫律
  2. 禁止解析某目录的php,限制访问user_agent,php相关配置
  3. Panabit安装测试小结
  4. opencv 人脸检测
  5. 【java.lang.UnsupportedClassVersionError】版本不一致出错
  6. 计算机网络对口题目,2011-2015计算机对口升学网络试题汇总.doc
  7. tensorflow--模型的保存和提取
  8. mysql mrr cost based,MySQL InnoDB MRR 优化
  9. Repeater 控件的嵌套使用
  10. cognos宏函数的使用prompt
  11. 探究:数字孪生是如何赋能智慧能源信息化领域系统发展的?
  12. 计算机网络(第六版)
  13. 支付宝报错 未设置签名参数
  14. 配置Linaro toolchain交叉编译工具
  15. html5手机远程控制电脑,教你怎么用手机远程控制电脑
  16. 观察 | 经济学诺奖的启示:金融科技的核心任务是什么?
  17. Unity2D小游戏——类似QQ堂的小 demo(炸弹人)
  18. 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include “pch.h“
  19. 继续教育计算机专业能学到东西吗,继续教育个人学习心得体会
  20. itextPDF操作PDF,获取PDF内容

热门文章

  1. 有哪些比较好的wince 播放器 支持硬解的
  2. MakeCert CAB压缩 Signcode
  3. 继电保护整定值计算软件_继电保护的整定计算.doc
  4. MySQL:常用的MySQL优化工具
  5. 浏览器Cookie大小、个数限制
  6. 安卓手机如果清楚微信内置浏览器cookie
  7. 深扒,用 6 部分讲完 Java 性能调优:多线程 + 设计模式 + 数据库
  8. 南方地区数据中心节能架构设计——以深圳地区为例
  9. 如何查看dll文件是32位还是64位
  10. 数据结构(串、数组和广义表)