GitHub免费搭建个人网站

学习前端的人应该知道,开始学习前端时,心里想的肯定是我一定要给自己做一个的非常棒的网站,学完之后网站做好了,但是要怎么上线呢???

作为一个前端,拥有有自己的个人网站,算是迈出了前端道路的第一步!

本文目的

通过GitHub Pages免费快速的搭建个人网站,文章随长,其实非常简单,写的详细是为了能够让多数人都能够看得懂

建站常识

首先了解常识,建站三部曲:

  • 网站项目
  • 服务器
  • 域名

简单来说,就是我们要有一个域名,然后绑定服务器,再把网站上传到服务器上,这样就可以通过域名访问我们的网站了

网站项目就是你写的网站文件,这个如果不会的话请去学习前端 w3school传送门

服务器就是网络中为用户提供服务的专用设备。分为访问、文件、数据库、通信等不同功能的服务器。那么要怎样拥有一个服务器呢,(用钱就好了!!!),正规途径是在网上买一个服务器,看图

fuwuqi1.png

刚开始玩的话买一个空间小的相对便宜的就行,当然有钱请随意!!!

域名就是访问网站的网址,怎样获取域名,没错还是用钱,看图

yuming1.png

我的域名是在阿里云注册的,域名也是有区别的,后缀不一,长短不一,相对价钱就不一,如我的域名:

ljcljc.top

isboyjc.top

欢迎访问啊!不要问为什么两个都是.top的后缀,因为.top的域名最贵了,我最有钱,我最任性

域名注册好之后首先要进行实名认证,然后域名解析、绑定服务器,最后把网站上传服务器,进行网站备案,静候备案成功就可以了(:国内服务器需要备案,国外或香港服务器不用备案,但是相比国内服务器访问速度慢点,因为距离远嘛!)

这是一个网站上线的基本流程,当然以上不是本文重点,这些只是一些必备的常识,重点在下面

GitHub Pages建站

什么是GitHub Pages?

我就不照抄官方文档了,想了解请走传送门

GitHub Pages传送门

官方文档比较高大上,简单来说GitHub Pages就是一个服务器,但它是免费的!免费的!免费的!重要的事说三遍!它能提供给我们1G空间的存储,让你放东西,然后还可以请求到

当然GitHub Pages还有一些其他的东西,不过我们的宗旨是建站,其他不用了解

重点来了:

登录GitHub.com官网(全英的界面,英语不好的朋友请用谷歌翻译!)

github.PNG

登录后点击右上角的加号,进入new repository选项新建一个储存库,看到以下界面

ku.PNG

首先输入库名,仓库名字为固定格式

你的GitHub名.github.io

// 例:
// 我的GitHub名字为 isboyjc,所以库名为 isboyjc.github.io

中间还有个储存库说明,可以不写,储存库说明下有一个自动为你选上的Public选项,意思是公开此储存库(就是别人可以看到并下载你库中的内容,当然可以不公开,但是要收费7美金/月,这个完全没有必要,因为IT的精华就是开源!当然土豪请随意!)

最后点击绿色按钮提交创建,提交后如下图

create.PNG

点击README进行初始化README ,就是用markdown语法编写此储存库的具体说明或者说简单的展示,markdown语法十分简单,我也写了相应的markdown语法教程markdown和Typora--传送门,有兴趣可以了解一下,当然这里不写也是可以的,直接点击下面绿色按钮提交即可

anniu.PNG

再然后是如下界面:

end.PNG

上面图片红色框中依次翻译为:创建新文件、上传文件、查找文件、克隆或下载

点击Upload files上传文件

endd.PNG

点击choose your files选择文件上传,最后绿色按钮提交(注:上传的文件为你的网站文件,默认访问index.html文件所以你的网站首页一定要是index.html,css、js、img文件同html文件一同拖拽进去即可,网速慢的话上传速度较慢请耐心等待,上传失败请重新上传)

这时神奇的一幕就来了,如果你的操作没错,这时你就可以在浏览器输入你的GitHub名.github.io访问你的网站了(注:如果你的储存库下没有index.html文件,访问时会自动显示你的README.md文档)!!!如下:

https://isboyjc.github.io

这个名字有点长,我想通过自己购买的域名访问怎么办呢?

接着往下看

GitHub Pages域名绑定

首先是域名解析

进入你的域名控制台,我的域名是阿里云注册的,所以本文以阿里云为例,如下图

con1.PNG

点击解析进入解析添加解析,如下图

jiexi.PNG

记录类型

记录类型我们选择CNAME,别名记录,就是把一个域名完完全全设置为另外一个域名的别名

主机记录

主机记录就是域名前缀,常见用法有:

www:解析后的域名为www.aliyun.com

@:直接解析主域名 aliyun.com

*:泛解析,匹配其他所有域名 *.aliyun.com

mail:将域名解析为mail.aliyun.com,通常用于解析邮箱服务器

二级域名:如:abc.aliyun.com,填写abc

手机网站:如:m.aliyun.com,填写m

显性URL:不支持泛解析(泛解析:将所有子域名解析到同一地址)

举个例纸,我购买的域名是isboyjc.top我添加了两个域名解析,一个主机记录是@,一个主机记录是www,意思是让我的网站能够分别通过isboyjc.topwww.isboyjc.top访问到

解析路线

如果只有一个IP地址或CNAME域名,请务必选择【默认】

默认:必填!未匹配到智能解析线路时,返回【默认】线路设置结果

境外:向除中国大陆以外的其他国家和地区,返回设置的记录值

搜索引擎:向搜索引擎爬虫的DNS,返回设置的记录值

记录值

因为我们使用的是GitHub Pages服务器,所以记录值填写为之前的仓库名你的GitHub名字.github.io,如果是你自己购买的服务器,解析时记录值应该填写为你的服务器主机地址

TTL

TTL指的是域名解析的生命周期,简单来说它表示DNS服务器解析域名时记录在DNS服务器上的缓存时间

什么意思呢,来点题外话,先说下网站的访问流程,你的网站文件存储在数据服务器上,它会有一个IP地址,就像门牌号一样,我们在输入域名访问网站时,数据服务器是不认识你这个域名的,它只认识IP,你的域名会通过DNS服务器解析成IP值,通过这个门牌号(IP值)向数据服务器查找你的网站数据并给你返回到浏览器上

访问网站时,不会每次都到DNS服务器域名解析,而是第一次访问时才到DNS服务器进行解析,然后解析的结果会缓存到当地的递归DNS服务器(缓存服务器)上,当地的第二个用户访问网站时,递归服务器会直接返回解析结果,而不会再向DNS服务器请求解析,那多久之后递归服务器才会更新这个解析结果呢?这就是TTL来决定的

如果增大TTL值,可以节约域名解析时间,给网站访问加速 ,TTL值大多都是以秒为单位的,很多的默认值都是3600,也就是默认缓存1小时,这个值有点小了,难道会有人一个小时就改一次域名记录吗

如果减小TTL值,可以减少更换空间时的不可访问时间 ,如果TTL值大了,更换新的域名记录时因为TTL缓存的问题,结果可能是有的人可能访问到了新服务器,有的人访问走缓存会访问到了旧的服务器

那么TTL值多少才好呢?

总的来说,你要访问速度,TTL值就大一点,如果你近期想更换服务器或IP,为了更换后能尽量解析到新的IP上,TTL值就小一点,说的有点多了,好了,跳过这个话题,回到主题,本文介绍的是个人建站,一般个人网站建议设置TTL值为600,也就是10分钟是刚好的!

上面的东西弄完之后只剩最后一步啦!!!

在GitHub仓库页添加CNAME文件

cname.PNG

还是上传文件的这个页面,点击Create new file创建一个新文件,文件名为CNAME,注意是大写,文件内容写你解析的域名,例:

isboyjc.top

如果你还解析了www的域名,那么你就在文件中写两个域名,例:

isboyjc.top
www.isboyjc.top

然后点击提交

最后,在浏览器上输入你的域名访问一下吧!!!

累死我了,终于写完了!!!

本文仅是我自己的看法,如有错误,还请指出,不喜勿喷!

如果对您有用,请点击链接关注鼓励下!谢谢

原创文章,转载请注明出处!

投诉建议邮箱:214930661@qq.com

GitHub源码地址:https://github.com/isboyjc

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,924评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,781评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,813评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,264评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,273评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,383评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,800评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,482评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,673评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,240评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,802评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2 341