Building your personal developer website with GitHub.Dev 👌

https://github.dev homepage

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

1. Getting Started 🚀

You do not need to do any installation before starting, a fork of GitHub’s open source personal website generator will do. Click here to do so🔥

Ensure that you’re forking the repository into your personal Github account.

2. Publish your Website ✨

We have just completed a major step, but it’ll be good to have a preview of our awesome website. Follow the steps in the images below.

i. Click on Settings
ii. Scroll down to GitHub Pages and Select Source to be Master Branch
Renaming website URL

3. Website Customizations 😍

We all love customizing things, no matter how little, every developer has a preference, so let’s go through some quick customizations you can make to your website. Open the _config.yaml file and make some changes.

i. Layout

To change your site from the default two-column layout, you can switch to a single column by changing layout from layout: sidebar to layout: stacked

ii. Style

Developers love black theme, if you would like to change from the white and grey background, change style from style: light to style: dark

iii. Projects

There are a lot of options to choose from for customizing your website’s project section, feel free to change the options for sort_by (how repositories are sorted either pushed orstars), limit (maximum number of repositories to be displayed), exclude (whether to hide forks or some repository projects)

iv. Topics

You’ll definitely like anyone checking out your websites to see what you’re interested, there is a topic sections for that. GitHub also has an awesome list of topics here ( which of course can be used for your topic name, web_url, image_url )

v. Social Media

Final customization we’ll be doing is adding up our social media handles to our page, this is quite easy to do since all you need is to replace the your_username value with your actual username for each social media.

Here’s my _config.yaml file in case you need to see it all 😀
My Personal Website (after customization)

4. Adding New Pages and Blog Posts 🆕

You are not limited to just the homepage, of course, you can add other pages and also blog posts. The need for developers to write articles cannot be overemphasized in this article, I hope this tweet from Farida inspires you to write more as developers:

i. Add New Page

On the root of your repository, create a file with .html or .md extension and filename of choice ( this would eventually be your page’s route e.g. contact.html would yield to <website.url>/contact). Also, add the following to the start of your file:

---
layout: default
---
My contact.html file
Website Contact Page

ii. Add New Blog Post

Create a new .md file extension in your repository's /_posts/ directory with a filename using the following format: (e.g. 2019–03–10-hello-world.md )

YEAR-MONTH-DAY-title.MARKUP
---
title: "Welcome to Github Website Generator!"
---

5. Custom Domain 🔗

To add a custom domain, we’ll have to head back to Settings (just like in Step 2). Scroll down to Custom Domain and enter your domain name.
NB: You’ll have to follow a few steps to configure your domain name DNS.

It’ll be nice to see more awesome personal websites owned by developers, do share your own personal website in the comments, and let me know if I missed any step, if something didn’t work out quite right for you or if this guide was helpful. Checkout my personal website here

Happy Coding! 🤓 💻 ☕

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Timothy

Timothy

Software / DevOps Engineer | Google Developer Expert for Cloud | https://www.codementor.io/@timtech4u