> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

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

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/01.jpg)

> 最近狠下心把域名买了下来，终于把一直想弄的[个人网站](https://www.pudge1996.com/)正式放上了互联网。一路摸索过来，其实也没多难。

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

域名 —— 建议在 [Namesilo(aff)](https://www.namesilo.com/?rid=a13a698xg) 购买，提供免费 WHOIS 隐私保护，而且使用优惠码 zs1np 可获得1美刀的优惠。

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

Neltify 账号 —— 我们会通过 [Netlify](https://app.netlify.com/) 托管 Github 中的文件以及绑定域名。

## 开始

首先用 Github 账号注册好 [Netlify](https://app.netlify.com/) 之后点击 “New site from git” 开始：

![Netlify 控制台截图：顶部导航含 Sites、DNS zones 等选项，右上角有 "New site from Git" 按钮，页面中央显示已有站点 www.pudge1996.com，通过 GitHub 部署，3 小时前更新。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/02.png)

点击最左边的 “Github” 按钮，从 Github 中导入：

![Netlify 新建站点页面截图，显示 "Continuous Deployment" 步骤一，提供 GitHub、GitLab、Bitbucket 三个 Git 提供商按钮供选择连接，当前进度条停留在第一步 "Connect to Git provider"。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/03.png)

然后选择相应的的仓库：

![Netlify 创建新站点第二步界面，显示 "Pick a repository" 阶段，列出 GitHub 用户 Pudge1996 的三个仓库：Portfolio、pudge1996.github.com 和 Pudge1996.github.io，供用户选择要部署的仓库。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/04.png)

点击 “Deploy site” 按钮：

![Netlify 创建新站点第三步「Build options, and deploy!」的配置界面，显示部署仓库为 Pudge1996/Portfolio，分支选择 master，Build command 和 Publish directory 留空，底部有绿色「Deploy site」按钮待点击。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/05.png)

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

![Netlify 网站控制面板截图，显示站点 quizzical-hoover-c333ac 已成功部署并发布，绿色链接 https://quizzical-hoover-c333ac.netlify.com 可访问，右下角 Domain settings 按钮用于下一步绑定自定义域名。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/06.png)

进入 Domain settings 页面，点击 “Add custom domain” 按钮：

![Netlify 域名管理页面截图：Custom domains 区块显示默认子域名 quizzical-hoover-c333ac.netlify.com，下方有 "Add custom domain" 按钮用于绑定自定义域名](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/07.png)

输入自己的域名：

![Netlify 添加自定义域名的弹窗截图，输入框中已填入 www.Pudge1996.com，下方有绿色的 Save 按钮和 Cancel 按钮](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/08.png)

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

![Netlify 自定义域名配置界面，显示三条域名记录：默认子域名 quizzical-hoover-c333ac.netlify.com，主域名 www.pudge1997.com 和重定向域名 pudge1997.com，后两者均显示 "Check DNS configuration" 警告，提示需要配置 DNS。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/09.png)

开始进行 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 服务。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/10.png)

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

![Netlify DNS 配置弹窗，显示需要将域名的 Nameservers 替换为四个地址：dns1.p02.nsone.net、dns2.p02.nsone.net、dns3.p02.nsone.net、dns4.p02.nsone.net，并提示更改可能需要最长 24 小时生效。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/11.png)

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

![Namesilo 域名控制面板中的 NameServers 设置界面，显示已将原有名称服务器替换为 Netlify 提供的四个地址：dns1 至 dns4.p08.nsone.net](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/12.png)

![Namesilo 域名控制面板的 NameServer 配置页面，已填入 Netlify 提供的四个 DNS 地址（dns1 至 dns4.p08.nsone.net），原有 NameServer 已替换，点击 SUBMIT 按钮提交生效。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/13.png)

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

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

![GitHub Desktop 截图，显示 Portfolio 仓库处于 master 分支，已提交 "Fav" 更改，0 个本地变更文件，右上角 "Push origin" 按钮显示有 1 个提交待推送至远端。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/14.png)

## 开启 HTTPS

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

![Netlify SSL/TLS 证书配置界面，提示需先验证 DNS 配置才能启用 HTTPS，底部提供 "Verify DNS configuration" 和"Provide your own certificate" 两个操作按钮](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-02-7013eddc413c/15.png)