如何使用新的 github.dev 个人网站生成器

开始构建您的个人网站

github.dev是 GitHub 的一个新社区项目，位于.dev 顶级域名上。通过它，你可以 fork、自定义和部署一个个人网站，展示你的 GitHub 简介和贡献，该项目由GitHub API、GitHub Pages和Jekyll提供支持。

这是我的页面：dzello.github.io。

我个人很喜欢这个项目，因为它为开发人员提供了一种展示其编码才能和兴趣的另一种方式，而不仅仅是他们的 GitHub 个人资料页面，社区中的一些开发人员对此提出了很好的问题。

如果您已经知道如何 fork 一个 repo 并使用命令行，我可以向您展示如何在大约 10 分钟内启动并运行您自己的 github.dev 实例。

开始

将浏览器窗口指向github/personal-website存储库。

1. 单击 Fork 按钮即可复制您帐户中的存储库
2. 转到“设置”选项卡并将存储库重命名为{username}.github.io，替换{username}为你的 GitHub 用户名

名为 的仓库{username}.github.io在 GitHub 上确实有一些独特的功能。它们的内容（特别是 _site 文件夹）将自动部署到 GitHub Pages URL，并可在此地址作为可浏览的网站使用：

https://{username}.github.io/

不幸的是，这不在新的 github.dev 域本身上，但我确实希望项目的名称暗示了这一计划🤓。

不过，在网站显示之前，你需要在重命名仓库后至少推送一次提交。我们将在以下步骤中执行此操作。

本地运行

作为先决条件，如果您还没有安装Ruby，请安装它。

首先，克隆您的新存储库。

git clone git@github.com:{username}/{username}.github.io.git

接下来，cd进入存储库并安装 Jekyll 和依赖项。

cd {username}.github.io
gem install jekyll bundler
bundle install

现在您已准备好启动该站点。

bundle exec jekyll serve

浏览http://localhost:4000，你应该会看到一个页面，其中包含你的姓名、头像和公共仓库。得益于github-metadata Jekyll 插件和GitHub pages gem ，这些数据已经存在。

定制

无需进一步定制（请随意跳至#deployment），但我建议至少改变您的兴趣，以便您的页面准确反映您的身份。

您的兴趣

默认情况下，github.dev 假设您对 CSS、Web 设计和 Sass 感兴趣。但是，如果您更喜欢 PostCSS，或者您实际上并非开发者签名者，该怎么办？别担心，更改很容易。

_config.yml使用您常用的文本编辑器打开并找到该topics部分。修改 YAML 文件以添加、更新和删除主题。例如，您可以这样添加awesome 主题：

topics:
  - name: awesome
    web_url: https://github.com/topics/awesome
    image_url: https://raw.githubusercontent.com/github/explore/c304601f028774885ef27f72e6fe2d331729d8bc/topics/awesome/awesome.png

访问GitHub 主题页面，查看您可以添加的其他兴趣。

对 进行更改后_config.yml，您需要停止 Jekyll 并重新启动它才能生效。对其他文件的更改只需刷新页面即可。

首先显示热门存储库（可选）

默认情况下，仓库按字母顺序排序。如果您希望显示星级最高的仓库，可以修改该_includes/projects.html文件。

<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
  {% assign sorted_repositories = site.github.public_repositories | sort: 'watchers_count' | reverse %}
  {% for repository in sorted_repositories limit:6 %}
    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
      {% include repo-card.html %}
    </div>
  {% endfor %}
</div>

重点是sort: 'watchers_count'和reverse。还有其他字段可以显示或排序，请参阅github-metadata jekyll 插件的文档。你还可以限制显示的仓库总数，我上面就是用 来实现的limit: 6。

🔦黑暗模式（可选）

在 中_config.yml，您可以设置style: dark。这将使访问者在夜间浏览您的网站时，脸部不再发光。

README 的自定义部分包含更多方法，让您真正打造属于自己的网站。您甚至可以添加博客。

部署

每次您向 GitHub 推送新的提交时，您的网站都会被构建并部署到。网站首次部署前https://{username.github.io}/至少需要 一个。git push

假设您对文件中的兴趣做了一些更改_config.yml，您应该执行以下操作。

添加并提交您的更改：

git add _config.yml
git commit -m 'Updated my interests'

然后将它们推送到 GitHub：

git push

等待几分钟，您的网站就会上线https://{username}.github.io/。🎉

您可以在 GitHub 仓库的环境选项卡中确认这一点：

故障排除：如果网站几分钟后仍无法加载，请尝试使用原网址https://{username}.github.io/index.html。如果成功，则可能是缓存问题，您只需稍等片刻即可在不使用 的情况下访问网站index.html。

恭喜！

你对你的新网站感到兴奋吗？✨ 在下面留言，让我们一起看看！告诉我们你做了哪些自定义设置，让其他人也想尝试一下。

本教程就到这里。如果您想看到更多网站和社区项目入驻新的 .dev 域名，请查看awesome-dot-dev ⭐。