本人也是第一次走完整个流程,github pages当然一直有使用,创建也很简单,并且网上教程也比较多;然后是关于自定义域名的问题,自己以前使用过国外的免费域名,然后是直接修改就ok了,然后这次使用了从腾讯云注册的域名,中间会麻烦一些,然后网上也没看到能够特别匹配的教程;最后就是cloudflare的免费CDN加速了,对于github pages的访问来说,CDN加速是非常必要的了。

一、创建GitHub pages

这里网上教程很多,就不过多介绍了

现在的GitHub pages和以前有一点不太一样,现在是在setting里面单独有一个pages的设置界面,然后可以在里面设置静态页面要访问的文件目录,创建过程比较简单,而且像我使用pages是用于个人博客的搭建,使用到了docsify(A magical documentation site generator.),它自己的文档里就有教如何进行部署的教程,像vuepress这些都会有教程文档,可以参考。

完成创建后,你会得到一个GitHub pages默认的域名,就像这样:用户名.github.io,像我的就是ceresopa.github.io

二、自定义域名

1. 域名注册

这里我选择的是腾讯云注册的域名,就10几块钱买了一年,还挺不错的,如果同样选择腾讯的域名注册的话可以和我进行一样的操作。

这里直接按照要求购买就可以,不过要提前进行实名后才可以进行购买,这里要注意一下。买完后它应该会提示你进行域名解析啥的,可以先不用管,之后再搞。

2. GitHub pages绑定自定义域名

现在可以到GitHub去绑定自己的域名,像下面这样。

不过,当保存save后,应该会出现下面的提示:

这里是因为还没有进行域名解析的原因,所以我们可以回到腾讯域名管理那里,去进行域名的解析,从而通过域名正常访问对应的服务器。

突然发现这里在DNSPOD进行域名解析的步骤貌似有点多余,因为之后DNS解析会迁移到cloudflare,会在那边再进行设置,不过如果是不需要使用cloudflare,可以看下这里在DNSPOD的解析步骤吧。

进入https://console.dnspod.cn/dns,在这个界面里可以选择你的域名,DNS解析>我的域名,然后选择快速添加解析,如下图所示:

点击之后就会出现下面的这个界面,选择网站解析>域名映射,然后填写你的GitHub pages的默认域名(用户名.github.io),最后点击确认就可以自动完成解析了。

完成以上的步骤后,就已经可以通过你自己的域名去访问你的静态网站了,像现在就可以通过http://yulegend.cn去访问我的个人博客了,不过此时还只能使用http进行访问,还不能够通过https进行访问,不过不急,我们在完成cloudflare的CDN加速的步骤中就可以完成https的设置。

三、cloudflare进行CDN加速

1. 注册cloudflare账号

点击https://dash.cloudflare.com/sign-up进行账号注册或登录

然后就会马上出现一个输入你自己域名的界面,输入完成域名后就会看到一个选择计划的界面,当然,这里果断免费,反正是自己用,而且白嫖就是爽。(ps:这里的过程忘记截图了)

2. 域名解析

再接着按着步骤应该就会到下面这样的界面,会让你添加DNS记录:

这里都选择A类型,可以参考下之前在腾讯的DNSPOD那里添加的解析,一条@(就是你的二级域名,就像yulegend.cn)的,另外一个就是www的,中间还会让你填写你服务器的ip,这里可以通过ping一下GitHub给的那个域名,就可以得到ip地址了,像我的就是

ping ceresopa.github.io

3. 更改DNS服务器至cloudflare

这里就需要回到腾讯云,将原来的DNS服务器(指向DNSPOD的)改为cloudflare。

进入你的域名管理,如下图:

然后在域名信息里面就可以看到修改你的DNS服务器,这里直接把原来的两个替换掉就好了,替换的内容在cloudflare的步骤里面其实有详细的说明(至于为什么没有截图,当然又是忘记截图了,绝望,好在cloudflare是有详细的步骤过程的。)

至此,就完成了到cloudflare的绑定,后面cloudflare就会提示你要不要使用ssl证书,开启http跳转https之类的,直接按照提示下一步下一步就完事了。

然后回到GitHub pages的设置界面:

就可以顺利的开启你的enforece https了,愉快而且快速地访问你的网站了,这里贴一下我自己的:https://yulegend.cn,目前还没什么笔记,以前很早就打算弄的,但最后都没搞下来,这一次一定坚持下来,都搞了这么多准备工作,不坚持下来着实说不太过去了。

四、总结

总的来说,步骤还并不算特别复杂,一开始没弄之前也是有点雨里雾里,以为会超级麻烦的,尤其是cloudflare部分,设置起来并不复杂。关键上就三个点吧,一个是域名解析,第二个就是ssl证书与开启https,最后就是关于CDN加速,这也是我们最关心的三个部分。

参考资料

https://monkeywie.cn/2020/08/20/fast-github-page-with-cloudflare/

https://www.pianshen.com/article/8089379345/

GitHub pages+自定义域名(腾讯云域名)+cloudflare加速的更多相关文章

  1. 腾讯云域名申请+ssl证书申请+springboot配置https

    阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...

  2. 网站配置https(腾讯云域名操作)

    我们都知道http协议是超文本传输协议,早期的网站使用的都是http,但是并不安全,数据在传输过程中容易被拦截篡改.所以后面有了https,也就是经过ssl加密的http协议.本文主要对网站配置htt ...

  3. 阿里云域名+ 腾讯云服务器 配置nginx

    1,实现目标,通过外网访问域名,能够通过nginx 实现反向代理,以及负载均衡 2,准备工具 阿里云注册的域名: aiyuesheng.com 腾讯云领取的云服务器:centos 7 xshell 6 ...

  4. Github Pages访问太慢?通过Netlify免费加速

    github pages vs netlify Github Pages为Github提供的一项静态站点托管服务,它直接从Github仓库获取静态文件进行发布,然后提供一个github.io的二级域名 ...

  5. Aeraki Mesh正式成为CNCF沙箱项目,腾讯云携伙伴加速服务网格成熟商用

    6月,由腾讯云主导,联合百度.灵雀云.腾讯音乐.滴滴.政采云等多家合作伙伴发起的服务网格开源项目 Aeraki Mesh 通过了全球顶级开源基金会云原生计算基金会(CNCF)技术监督委员会评定,正式成 ...

  6. 为添加了自定义域名的GitHub Pages添加SSL,启用强制HTTPS(小绿锁)

    直奔主题 为什么要使用https协议? 提高网站访问安全性,网络连接都是加密的 (PS:虽然SSL并不是无懈可击的,但是我们应该尽可能提高窃听成本). 目前越来越多的浏览器会判断当前站点支不支持htt ...

  7. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  8. 如何用腾讯云打造一款微视频APP

    版权声明:本文由腾讯云原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/196 来源:腾云阁 https://www.qclo ...

  9. 腾讯云cos对象在线显示

    问题 前端使用了一张cos的图片,但是无法显示图片,使用的是cdn的加速域名地址. 对比:使用服务器的直接域名是可以显示的. 两者地址直接访问时,一者在线显示,一者直接下载到本地. 原因: 使用默认提 ...

随机推荐

  1. 跨域:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

    https://blog.csdn.net/q646926099/article/details/79082204 使用Ajax跨域请求资源,Nginx作为代理,出现:The 'Access-Cont ...

  2. jQuery实现页面导航内容定位效果,并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  3. JAVA匹配html中所有img标签

    public static List<String> getImg(String htmlStr) { List<String> list = new ArrayList< ...

  4. 【LeetCode】485. Max Consecutive Ones 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 [LeetCo ...

  5. 【LeetCode】48. Rotate Image 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  6. 【LeetCode】162. Find Peak Element 解题报告(Python)

    [LeetCode]162. Find Peak Element 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/ ...

  7. [python]MergeTxt按列合并同一个文件下多个txt文件

    开发需求:应项目需要,要将记录成txt的实验数据进行按列合并(也即为不同文件上下合并),从而进行机器学习训练. 实验数据类似如此 模拟验证数据 1.txt *****1***** abcdefghij ...

  8. [JNI开发]使用javah命令生成.h的头文件

    第一步:进入对应的.java目录 javac xxx.java 生成对应的xxx.class文件 第二步:退回到/java目录 javah -classpath . -jni 包名.类名

  9. JSP的数据从数据库中获取导入type=date的input标签中

    jsp 页面最开始加上 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> & ...

  10. Spring企业级程序设计 • 【第4章 Spring持久化层和事务管理】

    全部章节   >>>> 本章目录 4.1 配置数据源资源 4.1.1 JdbcTemplate介绍 4.1.2通过ComboPooledDataSource创建数据源 4.1. ...