如果你的项目只是一个静态网站,就没有必要再去整什么服务器,github pages 提供了搭建静态网站的功能;

为什么使用Github Pages

1. 搭建简单而且免费;

2. 支持静态脚本;

3. 可以绑定你的域名;

4. DIY自由发挥,动手实践一些有意思的东西git,markdown,bootstrap,jekyll;

5. 理想写博环境,git+github+markdown+jekyll;

****不限流量、不限流量、不限流量,重要的事说三遍!!!****

下面是搭建简单实例:

一、展示项目搭建

1、先创建一个repository,项目名自定义,最好把readme创建一下,标明项目简介

2、进入setting设置

找到Launch automatic page generator ,单击

3、填写信息

单击 continue to layouts

在这里选择你要的模板,单击publish page,这样就发布成功了(这里可以随便选一个)

4、回到项目下,发现多了一个gh-pages分支,说明已经可以了

5、然后回到setting页面,就能看到发布的地址了

6、复制链接,在浏览器就可以访问了

我们看一下地址:http://jsonshare.github.io/github-pages

组成 http://+github用户名+github.io/+项目名

这种形式的项目,可以建很多个;

二、展示主页搭建

下面讲一下默认个人主页的设置

7、新建一个项目(项目名设置成:github用户名+github.io)

发布流程跟上边一致,这里省略

8、回到项目主页,会发现与上面的不同是发布文件在主干master下

8、再去下边看一下发布的地址

但是这种个人展示页,或网站展示页只能建一个,地址为 http://jsonshare.github.io

总结引用:

两种pages模式
1. User/Organization Pages 个人或公司站点
1) 使用自己的用户名,每个用户名下面只能建立一个
2) 资源命名必须符合这样的规则username/username.github.io或者username/username.github.com
3) 主干上内容被用来构建和发布页面
2. Project Pages 项目站点
1) gh-pages分支用于构建和发布;
2) 如果user/org pages使用了独立域名,那么托管在账户下的所有project pages将使用相同的域名进行重定向,除非project pages使用了自己的独立域名;
3) 如果没有使用独立域名,project pages将通过子路径的形式提供服务username.github.io/projectname;
4) 自定义404页面只能在独立域名下使用,否则会使用User Pages 404;

二、绑定域名,实现自动跳转

我用的是阿里云

1、域名云解析管理页面

选择解析,添加解析(选择CNAME,添加你的二级域名)

2、在项目路径新建CNAME文件

3、在CNAME文件下,写入你再云解析设置的二级域名

单击提交commmit,项目路径CNAME就有了

4、再去setting看一下发布的地址(自动解析成你设置的域名了)

ok,到此,你就可以直接访问二级域名

最后、最后、最后在说明一下:github pages 默认主页为index.html ,上传项目是覆盖即可

github pages部署静态网页的更多相关文章

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

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

  2. 用 GitHub 来部署静态网页 ꒰・◡・๑꒱

    http://segmentfault.com/a/1190000002765287 在尝试过用 GitHub 部署静态 HTML 网页后,觉得其实挺容易的,这里简单说说如何用 GitHub 来完成部 ...

  3. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

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

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

  5. Jekyll+GitHub Pages部署自己的静态Blog

    混了这么久,一直想拥有自己的博客,通过jekyll和GitHub Pages捣腾出了自己的博客(https://www.ichochy.com) 一.安装jekyll 首先有安装Ruby的开发环境 运 ...

  6. Github 上利用github pages 部署站点

    一:起始 准备项目,如果你在github上已有项目,则无需新建,如果你要新起一个项目,则需先在github上创建一个项目 本文以已创建好的 github/TestGitPage  为例. 二:设置gi ...

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

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

  8. 我在GitHub Pages托管静态博客啦~

    https://jinhengyu.github.io/

  9. GitHub Pages:静态站点托管服务(待补充)

    不管是 react 还是 vue 项目路由都必须使用 hash 方式,否则页面打不开,切记!!! 如果使用的是 vue-cli 3 创建项目,那么你要在根目录创建 vue.config.js 文件,并 ...

随机推荐

  1. SparkStreaming官方示例程序运行方式

    一.前置条件 安装NetCat(有“瑞士军刀”之称,简称nc),输入如下命令: yum install -y nc 二.方式一:直接运行官方Example 2.1 打开一个shell,输入命令:nc ...

  2. MyBatis-plus 代码自动生成器

    MyBatis-plus  代码自动生成器 1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId& ...

  3. 线下市场,选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...

  4. Typecho - MyTagCloud标签云插件

    一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...

  5. 什么是体数据可视化(Volume data visualization)?及体绘制的各种算法和技术的特点?

    该文对体数据进行综述,并介绍了体数据的各种算法和技术的特点. 前言 由于3D数据采集领域的高速发展,以及在具有交互式帧率的现代化工作站上执行高级可视化的可能性,体数据的重要性将继续迅速增长. 数据集可 ...

  6. time元素定义的格式

    time元素表示的是24小时中的某一个时刻或日期,表示时间时允许时差. time元素定义的格式如下: <time datetime="2016-6-15">2016年6 ...

  7. Python简要学习笔记

    1.搭建学习环境 推荐ActivePython,虽然此乃为商业产品,却是一个有自由软件版权保证的完善的Python开发环境,关键是文档以及相关模块的预设都非常齐备. ActivePython下载地址: ...

  8. 用react系列技术栈实现的demo整合系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

  9. vue视频学习笔记06

    video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...

  10. 关于php调用.net的web service 踩过的坑

    从前一阵开始,公司要和对方做web service对接.由于对方使用.net语言,而我方使用php.本来经理是要求我们也用.net写web service的服务端.而我上学时学的.net全忘了... ...