How to use the new github.dev personal website generator

github.dev is a new community project by GitHub that lives on the .dev TLD. With it, you can fork, customize and deploy a personal site that shows your GitHub bio and contributions, powered by the GitHub API, GitHub Pages, and Jekyll.

Here’s my page: dzello.github.io.

Personally, I like this project because it gives developers an alternative way to showcase their coding talents and interests, beyond just their GitHub profile page, which some developers in the community have raised good questions about.
If you already know how to fork a repo and use the command line, I can show you how to get your own github.dev instance up and running in about 10 minutes.

Get started

Point a browser window to the github/personal-website repository.

Click the Fork button to make a copy of the repository in your account
Go to the Settings tab and rename the repository to {username}.github.io, substituting {username} for your GitHub username

Repositories named {username}.github.io do something really unique on GitHub. Their contents (specifically the _site folder) will automatically be deployed to a GitHub Pages URL and become available as a browsable website at this address:
https://{username}.github.io/

This is unfortunately not on the new github.dev domain itself, but I do hope the project’s name implies a plan for that 🤓.
Before the site appears, however, you need to push at least one commit to the repo after renaming it. We’ll do that in the following steps.

Run locally

As a prerequisite, install Ruby if you don’t have it already.
First, clone your new repository.
git clone git@github.com:{username}/{username}.github.io.git

Next, cd into the repository and install Jekyll and dependencies.
cd {username}.github.io
gem install jekyll bundler
bundle install

Now you’re ready to start up the site.
bundle exec jekyll serve

Browse to http://localhost:4000 and you should see a page with your name, profile photo and public repositories. This data is already present thanks to the github-metadata Jekyll plugin and the GitHub pages gem.

Customization

No further customization is required (feel free to skip down to #deployment), but do I recommend at least changing your interests so that your page accurately reflects who you are.

Your interests

By default, github.dev assumes you are interested in CSS, Web Design, and Sass. But what if you prefer PostCSS or are not actually a devsigner? Don’t worry, it’s easy to change.

Open up _config.yml with your favorite text editor and find the topics section. Make changes to the YAML to add, update and remove topics. Here’s how you would add the awesome topic for example:
topics:
– name: awesome
web_url: https://github.com/topics/awesome
image_url: https://raw.githubusercontent.com/github/explore/c304601f028774885ef27f72e6fe2d331729d8bc/topics/awesome/awesome.png

Visit the GitHub topics page to see what other interests you can add.
After you make changes to _config.yml, you will need to stop Jekyll and restart it before they appear. Changes to other files, however, should just require a page refresh.

Show popular repos first (optional)

By default, repositories are sorted alphabetically. If instead you want your most-starred repos to be shown instead, you can make a change to the _includes/projects.html file.