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.

1. Click the Fork button to make a copy of the repository in your account
2. 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 [e-mail]:{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.

<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>

The important part is the sort: 'watchers_count' and reverse. There are other fields you can display or sort by too, see the documentation for the github-metadata jekyll plugin. You can also limit the total number of repositories shown, which I am doing above with limit: 6.

🔦 Dark mode (optional)

In _config.yml, you can set style: dark. This will make your visitors' faces glow less while they are reading your site at night.

The customization section of the README contains several more ways to really make your site your own. You can even add a blog, too.

Deployment

Each time you push new commits to GitHub, your site will be built and deployed to https://{username.github.io}/. At least one git push is required before the site is deployed for the first time.

Assuming you made some changes to your interests in the _config.yml file, here's what you should do.

Add and commit your changes:

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

Then push them up to GitHub:

git push

Wait a few minutes and your site should be live at https://{username}.github.io/. 🎉

You can confirm this in the environment tab on the GitHub repo:

Troubleshooting: if for some reason the site doesn't load after a few minutes, try the URL https://{username}.github.io/index.html instead. If that works, there may have been a caching issue, and you'll just need to wait a bit before you can access the site without the index.html.

Congratulations!

Are you excited about your new site? ✨ Drop in a comment below and let's see it! Tell us about any customizations that you made that others might want to try too.

That's it for the tutorial. If you want to see more sites and community projects making their home on the new .dev domain, check out awesome-dot-dev ⭐.

Comments

[ItsASine (Kayla)]

Some other fun edits I made to mine:

• Jekyll plugins! I added comments to blog posts and an RSS feed to the blog so it can be pulled into dev.to (now to actually start a blog...)
• Making stars and forks actually links. When I forked, at least, the icons were links for styling but went nowhere.

        {% if repository.stargazers_count %}
        <a href="{{ repository.html_url }}/stargazers" class="d-inline-block link-gray mr-4">
            <i class="far fa-star"></i> {{ repository.stargazers_count }}
        </a>
        {% endif %}
        {% if repository.forks_count %}
        <a href="{{ repository.html_url }}/network/members" class="d-inline-block link-gray mr-4">
            <i class="fas fa-code-branch"></i> {{ repository.forks_count }}
        </a>
        {% endif %}

• Switching icons to fontawesome over octoicons. That way I can easily add links to other profiles on the sidebar (like DEV!). It is bloaty, but I want all those pretty icons.
• Limit shown projects based on... a lot of filters, to be honest. I only wanted to show active and non-forked repos. I put a dying rose emoji in the description of dead repos already, so that was an easy filter. I'm iffy on filtering out code puzzles, too, but it seemed like a good idea since that's not really "original" work.

  {% assign public_repositories = site.github.public_repositories | where:'fork', false | sort: 'stargazers_count' | reverse %}
  {% for repository in public_repositories limit: 12 %}
    {% unless repository.description contains "🥀" %}
    {% unless repository.description contains "🎲" %}
    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
      {% include repo-card.html %}
    </div>
  {% endunless %}
  {% endunless %}
  {% endfor %}

My codebase is here if anyone wants to poke around my stuff:

ItsASine / itsasine.github.io

Canonical source of technical blog posts

Get started building your personal website

Showcase your software development skills

This repository gives you the code you'll need to kickstart a personal website that showcases your work as a software developer. And when you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.

Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.

It's all possible using the combination of Jekyll (for building your website), GitHub Pages (for hosting your website), and GitHub's API (for automatically populating your website with content).

Installation

Fork the github/personal-website repo

You'll be making your own copy of the "personal website starter" repository so you have your own project to customize. A…

View on GitHub

[Josh Dzielak 🔆]

Awesome additions 🎉 I hadn't noticed before that the stars and forks didn't have links properly set, I've added your code and now mine do too. Thank you!

[GazHay]

Although out of the scope of this article, you will have to add your ssh key to github to allow the clone. You may even have to create ssh key-pairs for that.

Also, the gems didn't build on my pixelbook, didn't have time to figure out why.

[Ben Halpern]

This could make a good standalone #help post.

[Nicolás M. Pardo]

Any help there? I'm getting a blank page with no info but the topics that were already in the template

[Al Romano]

Ok, what is a "devsigner"... And why do I feel you could make a whole post on just the backstory of this term.

As a frontend developer I can't tell if it's funny or I should be #triggered.

:D

[Josh Dzielak 🔆]

Haha, great question! I think it was at Algolia when I first heard the term. We had a guy who was a designer and illustrator by background but had gotten very good at front end coding, enough where he could make his project ideas come to life end-to-end. He called himself a devsigner, and since then I've seen some other people doing it too.

I'm sure there is more backstory here though widely speaking, so many titles out there 😛

[Luke Inglis]

Usually devsigned/devsigner has a more negative (though not usually too negative) connotation than that. Usually it refers to a page or app or feature &c which has not been fleshed out by an actual designer and for which a developer has done their best to make it look good. Obviously the results depend on the design chops of the dev

[Al Romano]

+1.

This was my thought when I saw it.

[Ben Halpern]

I haven’t fully examined this yet, but I think there should be an option to include your DEV link somewhere here.

If anyone wants to look into this project and make a PR to add that, it would be awesome!!

[Patrick Woods]

I just walked through this to make mine: patrickjwoods.github.io Excited to see what everyone else creates!

[Kyle]

I'm curious if it's possible to display your merged pull requests using Github Dev?

[Josh Dzielak 🔆]

It looks like you could accomplish it with the v3 REST API using the search functionality to filter by user and merged status.

help.github.com/en/articles/search...

Once you had the right query, you could add that into GitHub Dev as another API call and display it on the UI.

[Kyle]

Yeah, I was looking at that earlier. I assume API calls are hidden in the jekyll-github-metadata plugin, so I'd have to find another way to make API calls. Don't want to setup a server, though. AJAX, maybe?