HTML、CSS 和 JS 还不够（特别是如果你打算成为一名独立开发者）

两年前，当我以初级前端开发人员的身份加入时，我非常兴奋，终于可以开始制作出色的项目，并很快建立自己的网站并将其展示给所有人，用户会喜欢并进一步分享它们。

但实际上这很令人失望，我发现我所做的只是关闭 GitHub 问题并推送代码，然后一些资深人员会审核并合并。这种情况持续了几个月，我始终无法全面了解正在发生的事情：我们的 Web 应用运行得如何，客户如何使用它，他们喜欢我最近添加的功能还是讨厌它，很多问题曾经萦绕在我的脑海里。

于是我开始利用下班后的空闲时间做东西，只是想做点东西，让每个人都能用得上。我知道怎么在电脑上（我是说本地）用 JS 和框架做网站，但之后会怎么样呢？我从来不知道。我浪费了很多时间，因为我根本不知道从哪里开始。虽然有教程教怎么建，但从来没教过怎么用这些项目，这太糟糕了！

以下是我认为从零开始将项目托管到互联网所必须学习的内容的列表。

1. 域名

域名是最常见的，但了解如何使用它们、什么是 TXT 记录、CNAME、A 记录、名称服务器等很重要。

我们都知道如何发布到 Netlify 和 Vercel（Zeit）等，但您还需要知道如何连接我们在 godaddy 和 namecheap 上购买的域名。

最常见的方法是将 Zeit/Netlify 域名服务器添加到 GoDaddy/Namecheap 账户。DNS 记录是指向主机的链接，您可以将其连接到 GoDaddy 账户并添加，这样您的主机就可以完全访问您的域名。

您还可以使用 CNAME 或 A 记录将您的域名连接到您的主机。

以下是Netlify和Vercel的官方示例，解释了如何在他们的平台上执行此操作。

2. SSL 证书

现在所有浏览器都强制要求通过 HTTPS 提供您的网站数据，因此了解如何执行此操作和使用它非常重要（除非您想要“不安全”徽章）。

SSL 证书是包含一些公钥的小文件，就像将公司或实体绑定到域名一样，但您不能自己这样做，它应该由第三方实体签名，即使您可以自行签名 SSL 证书，但浏览器会标记这一点，您将再次获得不安全的徽章。

同意，Netlify、Zeit 等静态站点无需任何设置即可提供此功能，当您构建更大的项目时，知道如何添加此功能可能会派上用场。

它们以前是付费的，但为了给互联网更多的自由并使其变得更好，一些社区和公司已经开始免费提供它们。

一些流行的 SSL/加密提供商包括

• Cloudflare
• LetsEncrypt - ZeroSSL（生成 Letsencrypt 证书的工具）

Cloudflare 有一篇出色的文章，解释了 SSL 证书及其使用方法。

3. REST API、后端、数据库和身份验证等

虽然如果你只想处理前端部分，这可能不是强制性的，但我仍然觉得学习这些概念和提高你的水平是必要且非常重要的。

• Rest API

我指的不仅仅是用 JavaScript 在浏览器中调用 API。学习如何创建 Rest API 也很重要。这将帮助你更好地理解系统设计和软件架构。学习如何在 API 中分页、查询和排序数据，绝对会让你成为更优秀的开发者。

首先制作静态 API，只需从任何后端语言（如 Node 或 Python）提供一些 json，并尝试处理错误、分页和排序等。

• 后端和数据库

我百分之百肯定，在你的第一个自由职业项目中，你一定会意识到某个后端部分需要编写代码，而你不得不咨询其他人。如果你能自己写，那该有多棒啊，不是吗？

因为仅有前端部分是不够的，所以所有项目都是两者的混合体。你要么需要发送电子邮件，要么需要连接第三方服务，要么需要运行 cron 任务，要么需要将数据保存到数据库等等。

如今，由于 Node 的存在，编写服务器端代码变得更加容易，您可以编写优秀的 js 代码。

数据库也是一个重要的概念，有时你需要保存数据或获取动态数据。最简单的选择是 Mongo DB，它与 Node 和 Mongoose 配合得非常好。

Glitch.com + MongoDB 是一个很棒的学习方法，可以作为测试的后端。

• 身份验证策略

了解不同形式的客户端和服务器身份验证的工作原理。其中包括本地身份验证/JWT、oAuth 2.0、用户会话等。

4.Linux，SSH

这是初学者容易忽略的最重要的事情之一。大多数企业和成熟的初创公司并不依赖 Netlify 或 Zeit 等。他们将代码放在自己的云服务器上，托管在 AWS、GCP、Digital Ocean 和 Heroku 等服务上，你知道这些服务器运行在什么平台上吗？Linux。所以，请不要再使用 Windows 作为你的编码环境了。服务器和运维部分并非只有高级开发人员才能处理，学习这些知识对以后的学习大有裨益。

学习执行文件操作的命令，例如压缩文件、解压文件、搜索文件grep、在终端上编辑代码，因为没有任何 GUI 或 VScode 可以帮助您，因此学习 VIM、Nano 等将会节省您的时间，git 命令等。

SSH 是另一个需要学习的重要知识。为了连接这些服务器，最流行的方式是 SSH（安全外壳）。

有多种方式可以连接到它们，例如

1. 用户名/密码组合。
2. SSH 密钥
3. PEM 文件（主要由 AWS 使用）

5. 服务器、Nginx、端口代理

正如我上面提到的，大多数企业和初创公司都会将自己的数字云服务托管在云服务提供商那里，即使是前端项目也是如此。我的公司使用 AWS 来托管我们的网站。

我知道公司不会直接把服务器的访问权限给还在学习的人，但你知道吗？现在服务器很便宜，Heroku 甚至免费提供一台。

学习这方面的最佳方式是购买一台 Digital Ocean Droplet。它非常便宜，一台 Linux 机器每月只需 5 美元。你可以用它来搭建后端、添加 MongoDB、获取存储空间等等。

这是我的Digital Ocean 推荐链接，注册即可获得价值 100 美元的积分。

7.WordPress

这或许是一个不太受欢迎的观点，但你无法否认WordPress在互联网上占据了超过25%的份额，它确实如此受欢迎。我接的很多自由职业项目都是用WordPress做的。它可能感觉有些过时，但它经过了实践检验，是目前最简单、最成熟的CMS之一。

与这些较新的现代 Headless CMS 相比，使用 Wordpress 有很多优势。

1. 对于非技术人员来说更容易。
2. 内容作家了解 wordpress，我甚至看到我的内容作家朋友在她的简历的技能部分添加了Wordpress 。
3. 非常适合 SEO，像 Yoast 和 AIO seo 这样的插件是开箱即用实现大多数 SEO 功能的最简单方法。
4. 插件生态系统，WordPress 拥有令人惊叹的插件库。事实上，Yoast迄今为止的下载量已超过2 亿次🤯🤯，它现在是一家拥有 100 多名员工、年收入 1200 万美元的公司。

我并不是说要从核心上学习 wordpress 并制作高级主题和插件，只是对它的工作原理有一个概述，我相信它会对你有很大帮助。

8. SEO、数字营销、谷歌分析、文案撰写

我见过开发人员制作出令人惊叹的项目，但却无法正确推广它们或将其出售给合适的人。

因此，了解 Google 的基本工作原理、其季度算法更新、如何对网页进行排名、关键字分析、搜索控制台等非常重要。

• 搜索引擎优化

很多人以为 SEO 就是在 head 标签中添加元数据，但 SEO 远不止于此。它还涵盖了诸如聚焦关键词、结构化数据、丰富的卡片、微数据、反向链接、页面排名策略等等。

大多数人都忽略了 SEO 成本低廉且对自然流量非常有利这一事实，而是直接跳到付费广告。

要记住的一件事是，SEO 是一场长期游戏，注重质量而不是数量，它很慢并且不会立即带来结果，但相信我，它是值得的。

• 数字营销

只需了解它的工作原理，与从事这方面工作的朋友坐下来聊聊，或者观看精彩的 YouTube 视频即可。它会给你带来一些你可能从未意识到的见解，例如，你是否知道，即使用户搜索你的产品时，谷歌也允许竞争对手的广告出现在你的品牌名称中？

我不会教你学习完整的营销知识。只需学习 Google/Facebook 跟踪像素、再营销的基础知识，以及添加跟踪像素的原因、如何添加等等。

• 谷歌分析

这些工具的价值远超预期，但人们却从未充分发挥它的潜力。我见过很多开发者只是在他们的网站上添加了 GA 脚本就走人了。醒醒吧，它还有更多用途。你可以

1. 跟踪点击、视频播放事件、滚动事件等，甚至为这些事件分配值以将它们分开以用于报告。
2. 定义用户目标，并赋予其货币价值。你可以对目标进行逆向工程，了解销售情况，并据此做出决策。
3. 创建自定义受众群体
4. 创建用户流漏斗
5. 创建自定义仪表板
6. 获取报告的电子邮件。管理员 > 自定义警报 > 创建警报。

• 提高文案写作水平

您的项目可能很好，您已经花了数周/数月的时间进行开发，您最终在 producthunt 上发布了它并希望获得一些很棒的反响，但是您的英雄标题错误，难以理解，这肯定会让用户感到困惑，使他/她离开您的网站而不去探索该网站（这在营销中称为流失）。

有些事情我们可能已经清楚了，但您需要从普通用户的角度来思考。

抛开自尊，看看优秀品牌的做法，并尝试效仿。撰写每个人都能理解的文案。撰写能够留下良好印象、让用户欲罢不能的文案。

哇，这篇文章已经很长了，对吧！我还想补充一些东西，比如如何实现 Gsuite/Outlook、CDN、处理客户端、设计工具、提供项目估算以及项目收费标准。

如果您也对它们感兴趣，请告诉我。

PS，请在 Twitter 上关注我以获取更多更新。

图标和插图
封面图片 - https://stories.freepik.com/
Iconsby flaticon.com