使用 Netlify 托管个人网站 详细步骤

李瑞东 发布于
封面图

最近狠下心把域名买了下来,终于把一直想弄的个人网站正式放上了互联网。一路摸索过来,其实也没多难。

通过 Netlify 托管个人网站需要准备材料:

域名 —— 建议在 Namesilo(aff) 购买,提供免费 WHOIS 隐私保护,而且使用优惠码 zs1np 可获得1美刀的优惠。

Github Repositories —— 在仓库中准备好网站的文件

Neltify 账号 —— 我们会通过 Netlify 托管 Github 中的文件以及绑定域名。

开始

首先用 Github 账号注册好 Netlify 之后点击 “New site from git” 开始:

Netlify 控制台截图:顶部导航含 Sites、DNS zones 等选项,右上角有 "New site from Git" 按钮,页面中央显示已有站点 www.pudge1996.com,通过 GitHub 部署,3 小时前更新。

点击最左边的 “Github” 按钮,从 Github 中导入:

Netlify 新建站点页面截图,显示 "Continuous Deployment" 步骤一,提供 GitHub、GitLab、Bitbucket 三个 Git 提供商按钮供选择连接,当前进度条停留在第一步 "Connect to Git provider"。

然后选择相应的的仓库:

Netlify 创建新站点第二步界面,显示 "Pick a repository" 阶段,列出 GitHub 用户 Pudge1996 的三个仓库:Portfolio、pudge1996.github.com 和 Pudge1996.github.io,供用户选择要部署的仓库。

点击 “Deploy site” 按钮:

Netlify 创建新站点第三步「Build options, and deploy!」的配置界面,显示部署仓库为 Pudge1996/Portfolio,分支选择 master,Build command 和 Publish directory 留空,底部有绿色「Deploy site」按钮待点击。

之后来到网站的控制面板,现在我们的网页已经可以在网上浏览了(点击上方绿色的网址),下一步我们要绑定域名,点击 “Domain settings”:

Netlify 网站控制面板截图,显示站点 quizzical-hoover-c333ac 已成功部署并发布,绿色链接 https://quizzical-hoover-c333ac.netlify.com 可访问,右下角 Domain settings 按钮用于下一步绑定自定义域名。

进入 Domain settings 页面,点击 “Add custom domain” 按钮:

Netlify 域名管理页面截图:Custom domains 区块显示默认子域名 quizzical-hoover-c333ac.netlify.com,下方有 "Add custom domain" 按钮用于绑定自定义域名

输入自己的域名:

Netlify 添加自定义域名的弹窗截图,输入框中已填入 www.Pudge1996.com,下方有绿色的 Save 按钮和 Cancel 按钮

点击 “Save” 之后,系统已经自动为你添加有 A 和 CNAME 的记录:

Netlify 自定义域名配置界面,显示三条域名记录:默认子域名 quizzical-hoover-c333ac.netlify.com,主域名 www.pudge1997.com 和重定向域名 pudge1997.com,后两者均显示 "Check DNS configuration" 警告,提示需要配置 DNS。

开始进行 DNS 配置。开一个域名的 “Check DNS configuration”,点击下方的 “Set up Netlify DNS for …”,使用他们的 DNS 服务。

Netlify DNS 配置弹窗,显示需将 www CNAME 记录指向 quizzical-hoover-c333ac.netlify.com,并提供 "Set up Netlify DNS for pudge1997.com" 的快捷入口以启用 Netlify 托管 DNS 服务。

然后按照提示复制这四个地址,

Netlify DNS 配置弹窗,显示需要将域名的 Nameservers 替换为四个地址:dns1.p02.nsone.net、dns2.p02.nsone.net、dns3.p02.nsone.net、dns4.p02.nsone.net,并提示更改可能需要最长 24 小时生效。

在 Namesilo 的 NameServers 上点击 Change,把原有的删除,替换成 Netlify 提供的地址

Namesilo 域名控制面板中的 NameServers 设置界面,显示已将原有名称服务器替换为 Netlify 提供的四个地址:dns1 至 dns4.p08.nsone.net
Namesilo 域名控制面板的 NameServer 配置页面,已填入 Netlify 提供的四个 DNS 地址(dns1 至 dns4.p08.nsone.net),原有 NameServer 已替换,点击 SUBMIT 按钮提交生效。

至此使用 Netlify 托管个人网站已经完成,这些更改很快就会生效。到时候就可以直接用我们的域名访问网站了。

然后我们可以愉快地通过 Github 来更新网站内容了!

GitHub Desktop 截图,显示 Portfolio 仓库处于 master 分支,已提交 "Fav" 更改,0 个本地变更文件,右上角 "Push origin" 按钮显示有 1 个提交待推送至远端。

开启 HTTPS

Netlify 还提供一件开启 HTTPS 功能,用的是免费的 Let’s Encrypt 证书,DNS 生效后下面的按钮会变成绿色,点击根据提示会帮你开启 HTTPS,非常方便。

Netlify SSL/TLS 证书配置界面,提示需先验证 DNS 配置才能启用 HTTPS,底部提供 "Verify DNS configuration" 和"Provide your own certificate" 两个操作按钮
🎉 你觉得这篇文章怎样?
我在这里留下了联系方式。如果觉得这篇文章还不错,欢迎分享给朋友!
联系作者
复制链接
© 李瑞东 2017-2026