我为什么建造它

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

我一直想构建一个 VS 代码扩展，但我从来没有理由或足够的时间。现在我在 GitHub 的 DevRel 工作，我终于有机会这样做了！Microsoft VS Code 团队举办了一个简历网站研讨会，参与者将使用 HTML 和 CSS 构建的简历部署到 GitHub Pages。

我与 VS Code 团队合作创建了一个 VS Code 扩展，使您能够在不离开 IDE 的情况下将静态网页（Jekyll 或 HTML）快速部署到 GitHub Pages。

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

这个怎么运作

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

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

    image-20220430194329273

  • 至少**创建一个 index.html 文件。**您也可以添加 CSS 和 JavaScript。对于这篇博文，我将创建一个 HTML 文件。我创建了一个名为 index.html 的文件，其中包含一个 h1 元素，其中包括电影 Spiderman: Intro to Spiderverse 的引言和电影中的图像。

    image-20220501192702836

  • **不要忘记提交您的文件。**下面的截图表明我点击了“提交新文件”按钮来提交我新创建的 index.html 文件。

    image-20220501192720231

  • 安装名为“Deploy to GitHub Pages”**的 VS Code 扩展。**为了找到扩展，我单击了 Visual Studio Code 中的扩展图标并搜索“Deploy to GitHub Pages”。我为那个特定的扩展按下了安装。

    image-20220501192749219

  • 打开搜索栏以搜索新文件。您可以通过以下方法做到这一点：

    • 使用转到菜单下的转到文件

    • 在 Windows 上使用此键盘快捷键 Ctrl+p 或 Ctrl+e

    • 在 macOS Cmd 上使用此键盘快捷键 ⌘+p

    • 在 Linux 上使用此键盘快捷键 Ctrl+p 或 Ctrl+e

      image-20220501192813124

  • 通过在搜索栏中**键入“>”来触发扩展。**如果它正常工作，您应该会看到“部署到 GitHub Pages”字样，如下图所示。

image-20220501192829032

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

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

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

image-20220501192924712

  • Toast 将更新一条消息，表明您的网站将在几分钟后上线。

    image-20220501192943687

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

    image-20220501193012157

  • **单击您网站的 URL，**然后查看托管在 GitHub Pages 上的新静态站点。你可以在这个链接找到我的网站：https ://blackgirlbytes.github.io/ghpages-into-the-spiderverse/