Creating a GitHub Repository Showcase (3 Part Series)
Quickly create a personal website that showcases your work as a software developer.
This is a quick summary of how I built https://jhermann.github.io/about-me/ using GitHub's
personal-website Jekyll template. You can see the end result at that URL, or in the article's cover image, with a dark style applied.
After forking the personal-website template repository, I cloned it to my disk and installed a local copy of Jekyll.
For that, I called these commands in my working directory, installing everything into my home directory:
gem install --user-install jekyll bundler bundle config set path "$(ruby -r rubygems -e 'puts Gem.user_dir')" bundle install
Next I started the local web server like so:
bundle exec jekyll serve
The server is then available at
http://localhost:4000. For many changes, e.g. styling and layout ones, that server will rebuild the site almost instantly. However, some changes e.g. to
_config.yml will require a full restart by pressing Ctrl-C and repeating the above command.
Some of the data in the sidebar, including the avatar, was fetched from my GitHub account data. To complete the sidebar, I added social accounts to the configuration, as described in the README.
The content on the right side has two sections.
- The project list is also fetched from the API, I just had to set the
starssort order, define a limit on the number of cards, and add filter conditions to hide some repositories.
- The list of interests / topics I changed via the configuration, with a name, URL, and image for each entry. I created the images myself using
InkScape, so they nicely fit together.
Every time I push a change I previewed locally, the site gets rebuilt by GitHub. I had to enable that in “Settings › Options › GitHub Pages”, setting the source to the
For more customization, the Jekyll docs cover all the details not mentioned in the README.
Claim your page on DEV before someone else does
Level up every day