如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

拥有自己的个人网站,无可否认是能增加学习Web开发的动力的。

本笔记记录使用GitHub Page,免费搭建个人网站,以及如何链接自己的域名。

写在前面:什么是GitHub Pages

根据官网的定义:GitHub Pages是一种静态站点托管服务,旨在直接从GitHub仓库托管你的个人、组织或项目页面。

我们可以使用自己的电脑,或从IPS服务商那里购买云服务器来存储自己的网页文件。前者需要你不间断的高速连接,后者需要支付相应的费用。而GitHub的特点恰好弥补了这两者的缺点。

当然其也有所缺点,比如

  • 它只是个静态站点托管服务,不支持服务端代码,如PHP,Ruby或Python。
  • 有一定的使用限制,如GitHub Pages源存储库的建议限制为1GB,每月100GB带宽限制,公共性对网站安全的限制等等。
  • 以及似乎需要*?

但对于我这种搭建个人博客性质的网站来说还是满足的。

你可以使用Jekyll在线创建发布GitHub Pages网站,或者使用Git客户端在本地开发后发布。

 


下面开始介绍如何使用。

一、创建存储库

登录GitHub创建一个新的存储库,名字要求为username.github.io,其中username为你在GitHub上的用户名,否则无法正常工作。

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

 

二、克隆到本地

使用Git Bash将该repo克隆到本地自定文件夹内。

这一步骤可参考我:【Git】从零开始使用Git和GitHub工作(二)

 

三、创建一个html文件并push

在本地随意创建一个html文件,并push到GitHub。此时打开你的https://username.github.io还无法显示,原因如下:

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

你的网站必须从master分支发布,而且必须存在分支。

故你还需要:

  1. 在本地创建好分支,并push到GitHub
  2. 在GitHub上设置repo的sourse

如何设置master为source:

1、进入settings

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

2、选择master分支为source并保存

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

 

此时打开你的https://username.github.io,就会显示你创建的html文件。

如果没有设置master为source,将会显示你的README文件。

 


下面介绍如何绑定自己注册的域名

一、注册域名

注意:你可以选择各种注册域名服务商,我选择的是万网,下面的步骤也是基于阿里云域名服务进行。

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

 

二、解析域名

注册购买后,进入控制台-域名-域名列表-解析

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

进入后点击添加解析。

添加一个记录类型为CNAME,主机记录为@,解析线路默认,记录值为github的仓库名(也就是你的网址),TTL可选默认10分钟:

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

其中:

  • 记录类型下拉列表都有说明。若你需要你的网址有无www.都能跳转,可以再添加一个www主机记录。
  • 记录值即你要绑定的网址。
  • TTL表示DNS记录在附件在服务器上的缓存时间,后期可设置大一些。

三、在GitHub上添加CNAME文件

回到你的username.github.io仓库,创建一个CNAME文件,文件内容为你的username.github.io。

 

至此,你就可以通过输入你自己注册的域名进入你创建的网页啦~