基于GitHub搭建个人网站

6 篇文章 0 订阅
5 篇文章 1 订阅

基于GitHub搭建个人网站

基于GitHub搭建个人网站

个人站点

github

当你撸完一份自己的个人网站,然后想让别人去访问它,

怎么办?去买个服务器,也太贵了吧! 下面,利用GitHub来教你搞定!(不要钱的那种)


1.前期准备

  • gitHub账号一个

  • 源代码一份

  • 域名一个(可选)

  • 打包路径配置:一般为项目名称,自定义域名就是根目录了


2.GitHub配置

打开项目仓库

新版配置

进入Settings,找到Pages选项

在这里插入图片描述

  • source选择:deploy from branch

  • branch:选择 gh-pages,这里的 gh-pages 统一由 ci 生成,用于存放打包后的代码

添加之后,过几分钟刷新下,出现 Your site is live at https://wforguo.github.io/vue3-quick-start/ 即配置成功

在这里插入图片描述

如果说,访问是404,那就说明配置还未及时响应到,等几分钟就好了!


3. 域名解析配置

如果说你觉得GitHub提供的域名不好记,或者觉得不爽,

那你可以用自己申请的域名去指向GitHub提供的GitHub Pages链接

也就是做一个域名解析

在这里我的域名是在腾讯云申请的,并且备案过的(最好备案)

1.首先登陆到腾讯云

需要你自己申请账号和域名

登录之后进入到云产品云解析下面

云解析

2.添加域名解析到列表

在这里点击添加解析,添加你的域名到列表里面(我这里已经添加过了)

添加解析

点击你已经添加好的域名,与入到解析设置页面,

这里你能看到你所添加的所有的解析记录;

点击添加记录去添加一条解析解析记录

解析列表

弹出红色添加框,我们只需要去填写 主机记录记录类型记录值就可以,其它默认

添加解析记录

在这里主机记录记录类型记录值分别代表什么呢?

在你点击到对应的选项,输入框下面也有相应的说明

下面来解释下:

主机记录

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

主机记录:结果
www:解析后的域名为 www.forguo.com
@:直接解析主域名 forguo.com
*:泛解析,匹配其他所有域名 *.forguo.com
mail:将域名解析为 mail.forguo.com,通常用于解析邮箱服务器
二级域名:如:abc.forguo.com,填写abc
手机网站:如:m.forguo.com,填写m

在这里你可以根据自己的需求,解析成@、*或者二级域名

f2e.forguo.com 就属于二级域名

记录类型:

要将你的域名解析到何处,

将域名指向云服务器,请选择「A」

将域名指向另一个域名,请选择「CNAME」

建立邮箱请选择「MX」,根据邮箱服务商提供的MX记录填写。

在这里我们需要解析到一个域名,选择CNAME

记录类型:结果
A记录:地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录。
CNAME:如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录。
NS:域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录。
AAA:用来指定主机名(或域名)对应的IPv6地址(例如:ff06:0:0:0:0:0:0:c3)记录。
MX:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录。
记录值

填写一个域名,如:cloud.tencent.com

这里写的就是你在GitHub上面的链接,只需要 wforguo.github.io

不需要写全部 wforguo.github.io/f2e, 后面项目名称f2e省略不要

当你配置完成之后他会给你后面加个.,这个是没影响的


4.自定义域名添加

最后一步,我们只需要在GitHub的GitHub Pages中添加Custom domain即可,

填写你的域名,并保存即可;

如果你的域名有https证书,勾选 Enforce HTTPS就可以用https来访问了

自定义域名

添加完成,上面的提示也会改变

Your site is published at https://forguo.cn

点击就可以访问了,大功告成了。


ending…

  • 13
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值