无需离开 IDE 即可部署您的第一个网站

我为什么要建造它

我构建了一个 VS Code 扩展，将代码部署到 GitHub Pages。

我一直想构建一个 VS Code 扩展，但一直没有找到合适的理由或时间。现在我在 GitHub 的 DevRel 工作，终于有机会实现了！微软 VS Code 团队举办了一个简历网站研讨会，参与者可以将用 HTML 和 CSS 构建的简历部署到 GitHub Pages。

我与 VS Code 团队合作创建了一个 VS Code 扩展，使您无需离开 IDE 即可将静态网页（Jekyll 或 HTML）快速部署到 GitHub Pages。

我最喜欢的两件事是产生积极的影响和尝试我从未使用过的技术！

工作原理

用户体验和工作流程仍有改进空间。不过，对于我使用自己构建的扩展程序将代码部署到 GitHub Pages 的初始迭代，您可以采取以下步骤：

• 创建一个仓库。在下面的截图中，我创建了一个名为ghpages-into-the-spiderverse 的仓库。

• 至少创建一个 index.html 文件。你也可以添加 CSS 和 JavaScript。在本篇博文中，我将创建一个 HTML 文件。我创建了一个名为 index.html 的文件，其中包含一个 h1 元素，其中包含电影《蜘蛛侠：蜘蛛宇宙》中的一句台词以及一张电影中的图片。

• 别忘了提交你的文件。下面的截图显示我点击了“提交新文件”按钮，提交了我新创建的 index.html 文件。

• 安装名为“部署到 GitHub Pages”的 VS Code 扩展。为了找到该扩展，我点击了 Visual Studio Code 中的扩展图标，并搜索“部署到 GitHub Pages”。我点击了该扩展的“安装”。

• 打开搜索栏搜索新文件。您可以通过以下方法进行操作：
  • 使用“前往文件”，位于“前往”菜单下
  • 在 Windows 上使用此键盘快捷键 Ctrl+p 或 Ctrl+e
  • 在 macOS 上使用此键盘快捷键 Cmd ⌘+p
  • 在 Linux 上使用此键盘快捷键 Ctrl+p 或 Ctrl+e

• 在搜索栏中输入“>”来触发扩展程序。如果一切正常，你应该会看到“部署到 GitHub Pages”字样，如下图所示。

• 一旦您选择“部署到 GitHub 页面”，您将收到登录 GitHub 的提示。

• 完成身份验证过程后，您的 IDE 将显示一个下拉列表，其中包含您最近创建的十个存储库。在屏幕截图中，我的“ghpages-into-the-spiderverse”存储库位于列表顶部。

• 选择仓库“ghpages-into-the-spiderverse”后，会出现一条提示消息，提示我将仓库发布到 GitHub Pages。点击“发布”按钮确认要将仓库部署到 GitHub Pages。

• 该提示框将会更新，提示您您的网站将在几分钟后上线。

• 检查 Actions 日志以了解进度。GitHub Pages 使用 Action 来构建和部署网站。如果您看到所有绿色复选标记（如下图所示），则表示您的网站已上线！

• 点击你网站的 URL，查看你托管在 GitHub Pages 上的新静态网站。我的网站链接如下：https://blackgirlbytes.github.io/ghpages-into-the-spiderverse/

我是如何建造它的

我在这里写了有关我的 VS Code 扩展的剖析。

开放贡献

说实话，我在开发这个扩展上投入的时间并没有达到我的预期。它还有改进的空间。我欢迎大家贡献代码，帮助我改进 README 文件、优化工作流程等等。欢迎在这个仓库中提交 issue 和 pull request：https://github.com/blackgirlbytes/vscodeextension-deploy-to-gh-pages

在下面的评论中告诉我您最喜欢的 VS Code 扩展！