背景:

  我的腾讯云服务器是之前利用学生身份(有优惠)买的,现在快到期了,而且服务器上面只有一个引导页(静态页面)还有用,别的项目都没有用了。所以就想找一种不花钱买服务器就可以访问到我的引导页的方法。然后突然间想到了之前小伙伴说过hexo写博客非常方便而且是托管到github上的,我就想能不能用类似的方法把自己的静态页面也托管到github上。

效果:

  page.zhuchenglin.cn

前提:

  这个方法只能用来部署静态页面,而且是可以公开的代码,所以私有项目一定不要图省钱这样部署。

部署步骤:

  1. 如果没有github的伙伴注册一个github账号
  2. 在github上创建一个公开的项目(注意,如果创建私有的项目,并且能从外面访问到html,这是需要收费的! $7/月)
  3. 在Settings里的Options里有 GitHub Pages 选项,选择master branch ,下面的Choose a theme 选不选都行,之后再Custom domain 里面填上自己的二级域名
  4. 将这个项目克隆到本地,在这个项目里面完成自己的静态页面,然后提交并推送到远程
  5. 这时候你可以使用 github账号.github.io/项目名/页面.html 来访问你的页面
  6. 进入你的域名管理后台(阿里云或其他的),开一个CNAME类型的二级域名解析到 github账号.github.io,注意:二级域名要和步骤3中的二级域名保持一致

如果正常的话,这个页面现在就可以通过自己设置的二级域名访问了。

注意:

  1. 上面步骤3完成后,项目里会多一个CNAME文件(如果步骤3中进行了Choose a theme会多一个_config.yml文件),这个CNAME文件是用来控制域名的,只能有一个域名,如果有多个,多余的将无效。如果自己的二级域名变的话,可以直接修改这个文件的内容。
  2. 私有代码一定不要这样部署,或者付费部署也可以
  3. 这种方法只能部署静态开源页面,不能部署含有后端语言的代码

如需转载请注明出处 : https://www.cnblogs.com/zhuchenglin/p/11574840.html

将静态页面部署到github.io的更多相关文章

  1. 使用Gitalk实现静态页面评论的功能

    使用静态页面的理由 本人在Github上使用github.io部署了一个静态主页,地址是http://aopstudio.github.io,用于存放一些笔记文件.虽然静态页面功能少,自动化程度低,不 ...

  2. HEXO与Github.io搭建个人博客

    HEXO与Github.io搭建个人博客 HEXO搭建    HEXO是基于Node.JS的一款简单快速的博客框架,能够支持多线程,支持markdown,可以将生成的静态网页发布到github.io以 ...

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

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

  4. 利用VS Code在Azure上构建部署静态页面

    0x00 前言 前一段时间,我找到了Jendrik Illner的个人网站.除了那里的精彩文章,网站的主题也吸引了我的注意力,而且我发现该网站的主题采用了Hugo的Academic主题. 然后,我认为 ...

  5. 使用Git Bash远程添加分支和简单部署你的静态页面

    新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...

  6. Hexo搭建 github.io 静态博客使用指南

    What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...

  7. github发布静态页面

    github发布静态页面:https://wangc1993.github.io/2019/01/07/2/

  8. 如何将你的github仓库部署到github pages(github.io博客)

    详细的git教程:http://www.cnblogs.com/tugenhua0707/p/4050072.html#!comments 作为教程,很重要的一点就是要最大化的傻瓜化,本文将从新建一个 ...

  9. 在CentOS 上搭建nginx来部署静态页面网站

    在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...

随机推荐

  1. CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  2. js中关于带数字类型参数传参丢失首位数字0问题

    最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...

  3. LeetCode刷题191218

    好多天没有更新了,今天有空,刷一道. 算法第5题 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: ...

  4. 使用动态SQL处理table_name作为输入参数的存储过程(MySQL)

    关于mysql如何创建和使用存储过程,参考笔记<MySQL存储过程和函数创建>以及官网:https://dev.mysql.com/doc/refman/5.7/en/create-pro ...

  5. alluxio 信息索引

    最近要使用到 alluxio,发现网上还是有一些文档很是不错,现在通过这篇文章进行索引一下,进行备忘: https://edgedef.com/2017/08/17/alluxio-%E5%B0%8F ...

  6. react生命周期函数的应用-----1性能优化 2发ajax请求

    知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...

  7. doc 如何在指定的位置打印字符和颜色

    编程:在屏幕中间分别显示绿色,绿底红色,白底蓝色的字符串weclome to masm! B8000H~BFFFFH共32KB 的空间,为80*25彩色字符模式的显示缓冲区. 在80*25彩色字符模式 ...

  8. vue安装遇到的5个报错小结

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...

  9. pip安装插件报错。

    报错: Cannot unpack file C:\Windows\TEMP\pip-unpack-4mbfczpj\simple (downloaded from C:\Windows\TEMP\p ...

  10. SpringBoot:CORS处理跨域请求的三种方式

    一.跨域背景 1.1 何为跨域? Url的一般格式: 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 示例: https://www.dustyblog.cn:8080/say/Hel ...