网站发布新手之旅

2018 年 9 月，我刚开始学习网络开发几个月。 我相信许多新开发人员都面临着这样的挑战，不仅要学习基本技能，还要跟上快速发展的行业。 正当我逐渐能够构建一个简单的网站时，我开始意识到这仅仅是第一步。

打开存储在我的笔记本电脑上的几个 HTML 页面，感觉距离能够对别人说“嘿，看看我的网站，它已经上线了！”还有很长的路要走。

但我做到了！最棒的是，它并没有像最初感觉的那样可怕、困难或昂贵。

这一切都始于我给 Chris 发了一封电子邮件，他用它写了一篇很棒的文章，用通俗易懂的语言解释了所有内容。

那时，我还没有完全编码的网站——只是一个基本网站的想法，我用它来边学边做。我利用网站的持续进展来推动自己学习如何更快地发布一个网站。但我相信你也可以用一个只写着“Hello, world！”的 HTML 文档来完成整个过程。

我使用 Gatsby 构建了我的网站，这是一个由 React 提供支持的静态网站生成器。 以模块化的方式使用这些工具构建网站对我来说感觉很自然。 可重用部件的概念是我在作为实体产品设计师和机械设计工程师的职业生涯中所熟悉的。 这意味着你可以像乐高一样分阶段构建，一块一块地搭建，直到最终拥有一个可以邀请朋友参观的巨型城堡！

这不是指南。 这是我将网站从笔记本电脑发布到互联网上的个人经历。 希望它能给你一些希望，即使是那些没有接受过正规网络开发培训，并且只做了 12 个月的人也能做到！

域名注册商

在我购买域名之前，这似乎是一件非常严肃的事情。 拥有域名意味着对其负责。 人们会访问该地址，并最终看到你发布的内容。

我不知道每个人是否都有相同的经历，但我花了几周时间决定域名，然后才最终决定。 这几乎成为我一段时间以来的执念，我在网上搜索首字母缩略词生成器，试图想出一些聪明的方法，花了很多时间在 dictionary.com 上寻找酷炫的同义词。 最后，我选择了我的名字和我的职业：joshlong.design。 每次在地址栏中看到我的名字，我都会微微一笑。

自从阅读了 Chris 的文章之后，我实际上从两个不同的提供商那里购买了两个域名：一个 .com 和一个 .design。 我意识到我违背了 Chris 的建议，没有将域名集中在一个注册商处，但我需要四处看看，以便为我的 .design 域名找到一个好价钱。 我只拥有两个域名——其中一个我还没有任何计划——所以跟踪我购买了哪些域名并不是一项任务。 事实上，我不记得上次登录并管理我每天都在使用的域名是什么时候了！

购买域名就像任何其他在线购物交易一样简单。 没什么特别大或可怕的。 我通过 Namecheap 购买了我的 .com，通过 Google Domains 购买了我的 .design，这两个过程非常相似。 他们只需要我的姓名、地址和付款信息。 非常标准的东西！

我不记得 Google 试图向我出售大量额外套餐。 他们似乎很乐意我仅仅购买一个域名，尽管他们确实为我提供了免费的 WHOIS 保护，我欣然接受了，因为我不想让我的联系方式公开，供那些好奇的人随意获取。 然而，正如 Chris 预计的那样，我通过的另一个注册商非常努力地试图向我出售一些额外的东西，比如托管、电子邮件、VPN（无论这是什么！）和 SSL 证书。

我没有购买任何这些额外的东西。 我已经有了托管计划，你可以使用 Gmail 中的别名来“伪造”一个 [电子邮件保护] 电子邮件地址。 我真的不知道为什么我会需要一个 VPN，而且我将要使用的托管通过 Let's Encrypt 为我提供了免费的 SSL 证书。 所以，请给我域名就可以了！

托管

正如 Chris 所说，选择主机比选择和购买域名要棘手一些。 但最终，我用来构建网站的网络技术引导我走上了特定的方向。

我的网站是用 Gatsby 构建的，这意味着它直接输出静态资产，基本上是 HTML 和 JavaScript 文件。 这意味着我并不需要提供服务器的主机（我用最超级智能的权威声音说），尤其是对于带有 MySQL 数据库和 Apache 服务器的 WordPress，6 核 @ 3.6 Ghz，4GB 内存，5TB 带宽，5 IP 地址和 500GB SSD 存储等等。

所有这些术语都超出了我的理解范围。 我只想将我的文件上传到互联网，然后访问我的域名，查看它们都被编译并闪闪发光。 应该很简单吧？

事实证明，它确实很简单。 由于最近围绕 Netlify 的炒作很多，我想试一试。

Netlify 是 Gatsby 推荐的。 他们有非常好的文档，对于我的使用来说，我觉得我可以在他们提供的免费层内轻松地使用。 事实上，目前我每月只使用了免费层提供的总带宽的 0.08%。 赢了！虽然这可能意味着我没有做足够的努力来吸引人们访问我的网站…

关于 GitHub 的简短说明：我不是专家，也不了解它所包含的任何礼仪。 我所做的就是注册，创建一个新仓库，并按照他们给出的说明操作。 之后，每次我对网站进行更改，我都会使用代码编辑器 (VS Code) 中的按钮来提交并推送我的更改。 它可以工作，但我不知道这是否是正确或最佳的实践方式！ 不过，我现在开始了解如何在命令行中使用 Git。 开始时，我完全不知道如何操作，但我仍然设法完成了——你也可以做到！

回到 Netlify。

我注册了一个帐户（无需提供信用卡信息），并通过告诉它网站存储在哪个 GitHub 仓库来向 Netlify 添加了一个新网站。 当你连接了你的仓库后，你可以观看 Netlify 部署你的网站。

在我将网站部署到 Netlify 给你的随机生成的 URL 之后，我按照他们的说明将我在其他地方注册的域名添加进去。 他们让它变得如此简单！

我假设不同的主机说明会不同，但基本上，Netlify 给了我一些服务器地址，然后我必须回到我的域名注册商处将它们输入。 这些地址被称为名称服务器，所以注意这个词！

在我将 Netlify 名称服务器输入到 Google Domains 之后，Google 知道了在哪里寻找发送给那些在浏览器地址栏中输入我的域名的人。 我所要做的就是等待一些互联网魔法在后台发生。 对我来说，这大约花了三个小时，但我听说可能需要 10 分钟到 24 小时。

完成之后，我可以将我闪闪发光的全新域名输入到地址栏中，然后——就这样——我看到了自己的网站，它已上线托管在互联网上！

内容管理系统

内容管理系统 (CMS) 的世界非常广阔，令人困惑，但如果你愿意，它也可能与你完全无关。 当我意识到你不必担心它时，我感到非常解放。 这是我待办事项清单中的一件小事。

我的 Gatsby 网站文章和页面（我的内容）只是一个 markdown 文件目录，我的 CMS 就是我的文本编辑器。 Chris 和 Dave 在最近的一期 ShopTalk Show 中谈到了这个想法。

因为我想为不同类型的帖子和页面建立一个标准结构，所以我最终开始使用 NetlifyCMS，它是一个开源的 CMS，可以非常快地包含在你的网站中。（Chris 最近也为他的 confer-reference 网站 制作了一个关于 NetlifyCMS 的视频……你看出来了吗？！）现在，只要我有网络连接，就可以从世界任何地方直接从我的网站创建博客帖子和草稿！

资产托管 (CDNs)

内容交付网络 (CDN)，正如 Chris 在他的文章中解释的那样，基本上是在互联网上的某个地方，你将网站运行所需的 HTML、CSS、图像等文件存储在那里。当你的网站需要这些文件时，它会访问 CDN 并获取网站使用所需的文件。

据我所知，使用 CDN 是一个好习惯，而且由于我做出的托管决策，这不是我需要担心的事情——它由 Netlify 作为标准免费提供！

Netlify 有自己的 CDN，用于存储你网站的所有文件。当有人访问你的网站时，Netlify 会访问其 CDN 并获取文件。它非常快，让你的网站导航起来更加流畅。

这是一段漫长的旅程，但你可以做到！

在我开始将我的网站上线的旅程之前，我曾试图说服自己，拥有本地网站就可以了，因为我的职业生涯不在网页开发领域。之所以这样想，是因为这条路感觉会很困难、漫长且昂贵。

事实上，它既不困难、也不漫长，也不昂贵！如果你在域名上找到优惠，你可以以 0.99 英镑（约合美国 1.25 美元）或更低的成本将网站上线。域名是我唯一的支出，因为我选择的托管、资产管理和内容管理路径是免费的。

在非常基础的层面上，这条路径看起来是这样的...

Code > Buy Domain > Find/Buy Hosting > Update Nameservers > Upload Code > Live!

如果你碰巧使用同一个供应商来购买你的域名和托管，你可以跳过名称服务器步骤。（Netlify 也销售域名！）

任何人都可以将他们的网站上线，这绝对是可能的。你需要遵循一个流程，但如果你花时间，它会相对直接。将你制作的东西展示给人们，这是一种非常美妙的感觉，老实说，我以为自己永远无法做到。但它确实在所有人的能力范围内！

在这个过程中（以及数千次 Google 搜索），我真正敬佩的一件事是，网络社区中每个人都愿意合作和帮助，接受我以及我的问题，当我尝试学习我的工作时。我希望在我的行业中也能更常见地看到这种现象。

我很想听听其他人将他们的第一个网站上线的经历。你们的陷阱和胜利是什么？它和一开始看起来一样可怕吗？