如果你的项目只是一个静态网站,就没有必要再去整什么服务器,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. knockout中viewmodel跟子model相互调用

    用knockout写前端复杂js逻辑的确很方便,而且html界面也很清爽. 在ko中对于复杂的业务逻辑我会给viewmodel创建一些子model对象,但是viewmodel跟子model怎样相互调用 ...

  2. 通过 U 盘启动重装 macOS 系统

    重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...

  3. 【2017-05-02】winform弹出警告框是否进行增删改操作、记事本制作、对话框控件和输出输入流

    一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮, ...

  4. 一天精通MongoDB数据库

    什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...

  5. Map遍历四种常用方法

    Map常用四种遍历方式 一: Map<String,String> map = new HashMap<String,String>(); for(String key:map ...

  6. Quartz (二) 和Spring整合

    先给个场景:每五分钟扫描并关闭7天未付款的订单 1.quartz pom.xml依赖 <dependencies> <dependency> <groupId>or ...

  7. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  8. IOS(一) 基础控件的介绍以及使用

    IOS的界面的制作,相对于Android来说 简洁了很多,虽然创建布局的方式都是两种(代码创建.布局文件) 但是Android中的xml布局文件在某些方面也属于代码创建,因为自己使用到得每一个属性 都 ...

  9. 利用DNS AAAA记录和IPv6地址传输后门

    0x00 前言 在本文中,我想解释如何在DNS流量中利用IPv6地址(AAAA)记录传输Payload.在我之前的文章中,我解释了如何利用DNS和PTR记录,现在我们将讨论AAAA记录. 本文分为两部 ...

  10. vim 和grep 正则表达式相似和区别

    正则表达式由两种基本字符类型组成:原义(正常)文本字符和元字符.元字符使正则表达式具有处理能力.所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(即位于元字符前面的字符 ...