Building your personal developer website with GitHub.Dev 👌
Kickstart a personal website that showcases your work as a software developer and helps you easily manage your technical articles.
Developers are oftentimes too busy writing codes that we barely spend the time to set up a personal website for ourselves.
This repository gives you the code you’ll need to kickstart a personal website that showcases your work as a software developer.
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🔥
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.
🕺 Your website should be published now at https://<username>.github.io/personal-website
You can also customize your website’s URL to https://<username>.github.io by renaming your Repository name to <username>.github.io (where <username> is your GitHub username).
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.
To change your site from the default two-column layout, you can switch to a single column by changing layout from
layout: sidebar to
Developers love black theme, if you would like to change from the white and grey background, change style from
style: light to
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
stars), limit (maximum number of repositories to be displayed), exclude (whether to hide forks or some repository projects)
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.
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:
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 )
Also, you’ll need to add the following to the start of your file ( there’s already a post file in the
/_posts/ so that could serve as a reference for your future posts. )
NB: This is necessary as your website is pre-configured to assign the
post layout to all of the posts in your
title: "Welcome to Github Website Generator!"
If you would like to learn more about Contents and Templates, feel free to jump to that section on the GitHub Personal Website Repository.
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.
In summary, you need to add the following DNS Records:
- Four “@” type A records that point to the GitHub IP addresses: 126.96.36.199 , 188.8.131.52 , 184.108.40.206 , 220.127.116.11
- One “www” CNAME record that points to your <username>.github.io
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! 🤓 💻 ☕