在 GitHub 页面上托管作品集网站并添加自定义域名

2025-06-07

在 GitHub 页面上托管作品集网站并添加自定义域名

我的 GitHub 主页上托管了我的个人作品集网站,已经有一段时间了。但我已经一年半没更新了。我需要上传一些过去两三年里做过的业余项目,也需要更新我目前的工作。

我的个人作品集网站是https://nabendu82.github.io/,由 GitHub 提供。我还计划添加一个最近购买的自定义域名。

通过 GitHub 页面托管静态网站非常容易,您可以在我在 youtube 上找到的这个精彩视频中找到说明。

现在,我的 GitHub 上已经有我的投资组合网站。我会在本地克隆它,然后开始更新网站。

克隆克隆

然后,我会在我的代码编辑器(例如 VS Code)中打开代码。VS Code 中有一个很棒的插件叫Live Server,它允许你修改 HTML 文件中的任何内容并立即显示出来。如果没有这个插件,每次修改代码后,你都必须在浏览器中打开 HTML 文件并刷新。

因此,我在index.html内单击鼠标右键,然后单击“使用实时服务器打开”选项。

这将在http://127.0.0.1:5500/index.html打开我的本地网站

本地站点本地站点

我添加了关于新工作的详细信息,并更改了副业项目。我提交并推送到我的 GitHub。网站瞬间就更新了。

更新网站更新网站

现在,是时候添加自定义域名了。为此,我找到了另一个很棒的 YouTube 视频。

我已经从 namecheap 购买了域名。因此,我将前往它的控制面板并点击“管理”

管理管理

然后我们进入“高级 DNS”选项卡。这些将是默认值。

默认值默认值

现在,编辑 CNAME 记录并提供 GitHub 网站。我的网站是nabendu82.github.io

然后点击绿色的小勾号。

Github CNAMEGithub CNAME

接下来,我们需要为 GitHub 自定义域名添加四个A 记录。IP 地址如下。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

一项记录一项记录

接下来,进入你的 github 项目设置并添加自定义域。

自定义域自定义域

现在,如果你回到代码,你会发现GitHub 添加了CNAME文件。对我来说,它是https://github.com/nabendu82/nabendu82.github.io

别名记录别名记录

如果没有创建,则需要手动创建一个。然后添加您的自定义域名。对我来说,这是自动完成的。

自定义域自定义域

现在,该检查我的域名nabendu.me了。当我访问它时,浏览器弹出一个很大的“不安全”警告。

不安全不安全

我们收到上述警告是因为该网站尚未启用 https。因此,我需要再次前往“设置”,勾选相应的复选框以确保其安全。

安全 HTTPS安全 HTTPS

现在,当我访问https://nabendu.me/时,我将被带到安全网站,没有任何警告。

没有错误没有错误

希望你喜欢我的作品集网站。欢迎访问我的网站,并利用本文来搭建你精彩的作品集网站。

文章来源:https://dev.to/nabendu82/host-portfolio-site-on-github-pages-and-add-custom-domain-5d27
PREV
网格与弹性框
NEXT
使用 Stackbit、GatsbyJS 和 DEV -1 创建博客网站