许多开发人员要么拥有个人网站，要么希望拥有一个。 虽然有很多很棒的选择可以在没有任何编码技能的情况下构建一个漂亮的网站，但我们是软件开发人员，所以我们想展示我们的技能并从头开始构建一些东西。 编写网站代码是一回事，您可能会在 1-2 天内完成。但是，一旦您的网站上线，您就需要对其进行维护以确保其可用、最新且安全。 因此，在下文中，我们将了解如何通过 10 个简单的步骤以最少的努力建立和维护个人网站。因为，虽然我们可能喜欢编码，但我们也喜欢远离计算机的时间。 🌳🤸🍝 我将以我最近在 React 中重建的网站为例。您可以在我的 中找到源代码。 GitHub 存储库 以下提示和技巧假设一个超级简单的静态网站，它只包含一个前端部分。但是，您可以轻松地将这些概念扩展到更复杂的项目，包括后端、数据库或其他基础设施。 我们不会详细介绍所提到的任何技术，而是提供高级概述以使其与技术无关。 1. 设置存储库 选择 GitHub 或 GitLab 等开发平台，并设置一个新的空存储库。确保包含许可证并添加自述文件，以便社区知道他们可以使用您的代码做什么。 2.选择一个JS框架 选择一个 JavaScript 框架或库，例如 React、Vue 或 Svelte 来构建您的网站。或者不要，如果您想尝试的话，请使用 Vanilla HTML 和 JavaScript。 在选择要选择的框架时，最重要的是它应该是您喜欢使用的东西。 这是 网站，您可以使用任何您喜欢的工具。你可以选择你已经知道和喜欢的东西，或者尝试一些你一直好奇的全新的东西。 您的 我用 Vue.js 建立了我的第一个个人主页。大约一年后，我用 React 重新构建了它，因为我想获得更多的 React 实践经验并尝试一些 React 库。 使用 JS 框架的构建工具生成一些样板代码，并在本地主机上获得一个简单的 Hello World 样式示例。 3.选择一个UI组件库 此步骤是可选的，但由于我们在这里讨论的是尽量减少工作量，因此我建议在您的项目中包含一个 UI 组件库，例如 Material UI 或 Bootstrap。我为我的网站选择了 Chakra UI。 这些库带有一组 UI 组件以及用于布局和样式的实用程序，可让您快速构建。 确保选择一个文档齐全的组件库，你会发现它在视觉上很吸引人，它包含许多组件，并且可以轻松定制。要自定义网站上图书馆的外观，使用字体和配色方案会很有趣。 🎨 4. 构建超级简单的东西 考虑一下您想在主页上显示的信息片段，然后继续使用 UI 组件库中的组件构建一些内容。不要想太多。 现在的主要目标是让一些东西快速上线，正如伏尔泰已经知道的那样，完美是好的敌人。 如果您对在您的网站上显示的内容有很多话要说和很多想法，那就太好了！继续构建，但首先要为如何组织您的内容制定计划 - 考虑路由、不同的视图、部分、布局、导航等。 但如果你和我一样，你可能会问自己，在这一点上，把什么放在你的主页上，为什么你应该建立一个，因为谁会关心？！ 😳 你的感受是完全正确的，但让我告诉你，你不需要任何人的许可或花哨的内容就可以在线展示。 保持超级简单，只分享一些关于您自己的事情，您可以轻松地与访问者分享（可能是任何可以访问互联网的人 - 请记住这一点）。 对于我的网站，我将它保持在极简状态，包括一张关于我自己的照片和标语、我的技术堆栈列表、一些我喜欢的东西以及一些书籍推荐。 📚 我还包含了我的 LinkedIn 和 GitHub 的链接。 在为您的网站构建 UI 时，请确保它适合移动设备。大多数 UI 组件库都包含用于响应式设计的网格系统，因此从一开始就可以很容易地让您的网站响应式。在不同的屏幕尺寸和设备上对其进行测试，以确保所有交互在移动设备上也能正常运行。 5. 添加一些有趣的东西 在第 4 步中，我们构建了一些超级简单的东西，但简单不应该意味着无聊。那么现在，让我们开始互动吧。 🚀 试着想出一些简单的方法来使访问您的网站更加有趣和有趣。这可能包括动画、用户交互或配色方案更改等内容。不过不要重新发明轮子。 如果您知道要做什么，很可能已经有一个 npm 包可以做到这一点。 我为导航栏添加了一个滚动动画，一个在暗模式和亮模式之间切换的按钮，过渡效果很好，还有一个图标按钮，它可以使用 。 反应五彩纸屑 就是这样，您已经为自己建立了一个网站！ 🥳 接下来我们看看如何部署和维护它。 6.部署 关于如何完全免费地将您的网站部署到互联网，有很多选择，例如 Netlify、Vercel 或 GitHub Pages。 确切的步骤将取决于您选择的提供商，因此请按照指南进行操作，直到您的网站在某个 URL 下可用。 我选择了 Netlify，发现它的设置非常容易。 作为可选步骤，您可能决定购买自定义域名并将其与提供商的 DNS 连接以替换您获得的任意 URL。您不必这样做，但我发现自定义域名很不错，而且购买域名的费用不应超过 10 美元/年。 在设置您的网站时，您可能还必须检查您所在国家/地区的法律要求。根据您居住或托管网站的地点以及您从访问者那里收集的数据类型，您可能必须包括法律声明或隐私政策等内容。 7. 设置 CI/CD 现在您的网站已经在 Internet 上运行，您希望确保您不会在未来的提交中不小心破坏它。您还希望自动部署最新版本的 分支。 main 您的开发平台可能已经内置了 CI/CD 工具，例如 GitHub Actions 或 GitLab CI/CD。 我正在使用 GitHub Actions，因为我的存储库位于 GitHub 上。 对于持续集成，您可以为每个合并请求和每次合并到 分支设置一些自动检查。这可能包括诸如 linting&formatting 或单元测试之类的检查。 main 还有很多可用的模板，例如，我使用预构建的 GitHub Action 来发现 CodeQL 的漏洞。 对于持续部署，您可以设置自己的部署脚本，该脚本在所有检查完成后在每次推送到 时运行。但根据您在第 6 步中选择的托管服务提供商，您可能不需要执行任何操作。 main 例如，Netlify 与 GitHub 集成得很好，因此 分支可以自动部署。 main 8. 使用 Dependabot 让你的依赖保持最新 我们建立了一个网站，我们让它上线了，现在我们只想冷静一下。但是 JS 生态系统发展很快，它的漏洞也是如此。 我们希望确保我们的依赖项是最新的以确保我们的应用程序安全，但是 npm 依赖项管理可能很痛苦，而且我们当然不想每天检查更新。 幸运的是，有一个名为 Dependabot 的出色小工具可以为我们处理所有这些事情。 🤖 Dependabot 是 GitHub 创建的自动依赖更新工具。现在还有一个适用于 GitLab 的版本。 您所要做的就是添加一个 文件，当您使用的包的新版本可用时，GitHub 将自动创建合并请求。您可以在 YAML 文件中配置 Dependabot，例如设置 PR 的受让人和打开 PR 的最大数量。 dependabot.yml 由于我们在第 7 步中为 PR 设置了一些自动检查，这些将与每个 Dependabot PR 一起运行，并且我们可以确保新版本不会破坏我们的网站。 在存储库安全设置中，您还可以配置 dependabot 来提醒您有关依赖项中的任何漏洞。 9.检查可访问性问题 可访问性是一个如此奇怪的话题——它非常重要，但经常被忽视，尽管在提高网站的可访问性方面有很多唾手可得的成果。 如果你使用 JS 框架和 UI 组件库，你的可访问性分数应该不会很糟糕。它可能仍然可以改进，特别是如果您包含自定义字体或配色方案。 您可以在 Chrome 开发者工具中运行类似 Lighthouse 的工具来发现潜在的改进。 Lighthouse 将为您生成报告并提出更改建议以提高可访问性。 这些建议通常很容易实现，例如增加字体大小、更改文本和背景之间的对比度，或者重新排列 DOM 中 HTML 元素的顺序。 Lighthouse 还可以生成性能、最佳实践和 SEO 报告。 🆒 10. 运行一个 Cron 作业来 Ping 你的网站 在我的网站上线后，我有一种冲动，每天至少检查一次它是否还在那里。 🕵️♀️ 起初，每次看到我的网站仍然可用，我都很高兴，但很快就变得无聊了。 为确保在您的网站因任何原因出现故障时自动收到通知，您可以设置一个 cron 作业，定期简单地 ping 您网站的 URL。 如果您的项目包含后端和数据库，您还可以设置一些基本的冒烟测试，这些测试会在您的 API 上执行例如一些 请求。 GET 就我而言，我只是设置了另一个 GitHub Action，它每天运行一次并 ping 我的页面。根据您认为适合您的主页和您期望的流量类型来增加频率。 结论 我们完成了！至少现在。 对我来说，我的网站首先是一个游乐场，可以用来尝试我感兴趣的技术，所以我喜欢偶尔修改它。我鼓励您定期重新访问您网站的代码，并从中获得乐趣。 💃 我希望本指南能让您了解构建和维护个人主页是多么容易。您可能会在 1-2 天内构建一些简单的东西（如果您像我一样，再多花两天时间来获得正确的 CSS 布局 🙄）。 可以在 2 小时内完成部署您的网站并添加一些自动化功能以使维护变得轻而易举。 期待看到您将构建的所有令人惊叹的网站！ 🤗
