Build custom (developer) portfolio website in minutes

For new software developer students and professionals, building a personal portfolio website has become an essential tool for sharing their expertise in an accessible, attractive and highly customizable format. Unlike résumés, personal website allows you to be more creative and configurable with what you want to share with your future employer or to share your knowledge in the form of blogs.

Some websites, such as Hashnode and Medium, are specifically designed for building and hosting website/blogs on their platforms. However, they provide limited customization around their default template, which turns out to be more or less similar to their other users. This is undesirable for someone who has an eye for detail and likes to have freedom of endless customization.

Therefore in this blog, I will walk you through a 2-part end-to-end guide from setting up to the building, customizing, and developing your own personal website from scratch. This setup is highly recommended for developers with little or no knowledge of HTML/CSS/JavaScript programming. Finally, this guide is not limited to a software developer but can also be used by professionals like artists, small businesses, professors, researchers, etc.

Summary of the Part-1 guide —

1. Creating a Github account with gh-pages repo
2. Getting and setting your own domain
3. Mapping your custom domain to Github Pages

Experienced users, feel free to jump ahead at any step. For beginner, I highly recommend following step by step.

1. Creating a Github account with gh-pages repo

In this step, you’ll head over to Github and create a free account. Once logged in, create a new repository and name it your_username.github.io. On the top bar, click Settings, then on the sidebar, click Pages. Click Choose a theme and select one of the sample themes followed by Commit changes. This should create a simple static single-page template on your gh-pages domain. To confirm, enter your your_username.github.io and see if you’e able to see your selected template. Don’t worry about the content yet; I will guide you on how to get a better template with beautiful customizations.

2. Getting and setting your own domain

This is the only step in this entire guide where you will be required to spend a few bucks on getting your new friendly domain name (web address). If you already have one or would like to continue with the free GitHub-pages domain, skip to step 3.

The first step in registering your domain is to signup on GoDaddy. Use their search bar to find a nice and simple domain name for your new website. I recommend getting a .com domain with a two-year subscription as they are cheaper with some offers. If you’re fortunate, you might be able to apply a promo code from coupon websites (such as retailmenot or coupons.com) at the checkout step. Once you have purchased your domain name, head over to the next step.

3. Mapping your custom domain to Github Pages

Select your domain in the GoDaddy dashboard → Click manage domain → Scroll down to the bottom of the page → Click manage DNS (refer image). Now add the following entries to your DNS —

• In the Type A row update the IP address to: 185.199.108.153 (this point your GoDaddy domain to Github’s HTTPS server)
• Add a CNAME row with Name www and value as your gh-pages domain username.github.io
• At the bottom click the “ADD” button and make 3 more Type “A” rows with following IP addresses: 185.199.109.153, 185.199.110.153, 185.199.111.153

Important Step: Go back to your github repo and create a new file named CNAME with content as your GoDaddy domain name, followed by commit changes.

To enforce HTTPS on your new domain, go to your gh-pages repo Pages settings, and check Enforce HTTPS. This will add the nice and trustful HTTPS to your domain by default. Although to secure it further, I would recommend adding a cloudflare protection, which is available for free for a single account use. However, you’ll need to fiddle with the DNS to make it work (let me know if you’d like a separate blog on this).

With this, you should be able to open your gh-pages template website with your custom domain (instead of .github.io). If you’re facing any issues, please let me know in the comment section and I’ll try my best to help you.

Otherwise, let’s head over to Part-2, where I’ll walk you through necessary basics of Jekyll and adding a custom portfolio/blog theme to your awesome personal website!