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.
Summary of the Part-1 guide —
- Creating a Github account with gh-pages repo
- Getting and setting your own domain
- 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
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
→ Scroll down to the bottom of the page
manage DNS (refer image).
Now add the following entries to your DNS —
- In the Type
Arow update the IP address to:
188.8.131.52(this point your GoDaddy domain to Github’s HTTPS server)
- Add a
CNAMErow with Name
wwwand value as your gh-pages domain
- At the bottom click the “ADD” button and make 3 more Type “A” rows with following IP addresses: 184.108.40.206, 220.127.116.11, 18.104.22.168
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!