github pages部署静态网页

如果你的项目只是一个静态网站,就没有必要再去整什么服务器,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 ,上传项目是覆盖即可

时间: 2024-08-27 03:54:12

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

用github部署静态网页

用 GitHub 来部署静态网页 ??????这个教程主要适用于直接创建仓库.想从github上直接上手的同学可以参照以上教程部署静态网页. 我想分享给大家的是,如何将已经创建了仓库并且有master分支的项目部署为静态网页. 自动生成页面 1.点击settings 自动生成页面 仓库名和访问二级域名一致. 跳转到这个页面,直接忽视,点击最后面的按钮. 随意选择,提交. 现在我们已经生成了gh-pages分支. gh-pages分支内容. * 本地向分支推送代码* 进入目标文件夹 查看分支 $

Ubuntu14.04+Jekyll+Github Pages搭建静态博客

官方教程http://jekyllrb.com/docs/installation/ 1. Jekyll简介 简单: 无需数据库.无需评论功能,不需要不断更新版本,只需要关心博客内容. 静态: 只用 Markdown (或 Textile).Liquid.HTML & CSS 就可以构建可部署的静态网站. 博客形态: 自定义地址.分类.页面.博客内容 以及 自定义的布局设计 都是系统中的一等公民. Jekyll详细介绍 2. Github Pages简介 Github Pages是Github提

github pages搭建静态的网站

hexo是一个快速打造个人博客的框架,生成纯净太的html代码,不需要编译,浏览器直接解析,非常酷! hexo中文文档 http://hexo.io/zh-cn/docs/ 生成静态网站之后,可以上传到github,利用githubPage打造自己的网站,可以自定义域名. github pages https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/ 有问题的可以:

使用github提供的静态网页些简历

1.在redhat7环境下使用的git工具,所以先布置生存环境.安装git,在此之前应为是新装的redhat7,所以要把yum源配置上,参看以下网页.<redhat7 配置163 yum源 http://blog.csdn.net/kof101101/article/details/51926722> 2.安装好git工具后就可以写github的简历了.参考以下网页<在Github上部署自己的简历 https://segmentfault.com/a/1190000006820290&g

在Docker容器中部署静态网页的方法教程

步骤:1.创建映射端口的交互式容器docker run -p 80 --name web -i -t daocloud.io/ubuntu /bin/bash2.安装Nginxapt-get install -y nginx 3.安装文本编辑器vimapt-get install -y vim4.创建静态页面 mkdir -p /var/www/html cd /var/www/html vim index.html 使用i切换到插入模式 在index.html中写入以下内容: <html>

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

Vue 项目部署到GitHub Pages并同步到Gitee Pages

前言:相信很多前端开发者都拥有自己的vue项目,若想把自己的项目做成网站分享给大家看,最常用的就是利用Github提供的GitHub Pages服务和Gitee提供的Gitee Pages服务.其中,Github是国外网站,Gitee是国内网站(访问速度较快).本文给大家介绍的是如何将 vue-cli 3.0+项目部署到github pages 并同步到 gitee Pages上. 一.服务说明与注意事项 在你的github项目设置的GitHub Pages项,有这么一句话: GitHub Pa

Github pages博客搭建与域名绑定

Github Page github page是由用户编写的托管在github上的静态网页,为了搭建一个个人博客,我们可以租用一个云服务器然后部署我们的博客项目,常见的比如wordpress,像wp这样的博客系统需要用到服务器后台的数据库,所以是动态的,github page相对于云服务器来说,不能提供数据库服务,所以资源都是静态存放在github上的,但是是免费的,而且速度也还可以,相对来说很稳定. Hexo 什么是Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Mar

github pages &amp; Jekyll

首先,一本好书:http://git-scm.com/book/zh/v1,据说看了前4章这本书就会用github大部分功能了 然后进入主题 原文地址:http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 作者: 阮一峰 日期: 2012年8月25日 喜欢写Blog的人,会经历三个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一