All developers need an online portfolio to open up career opportunities. From what I’ve seen, it’s an effective way to help you stand out from other applicants. However, it can be overwhelming and costly to create one. Well, what if I told you it’s easier than you think, and that I did it for no cost at all? Here’s my step-by-step guide to get your online portfolio up and running!
As a developer, I’ve found that it’s essential to stand out from the crowd by showcasing your work with an online portfolio to back up your CV. I’ve maintained a portfolio like this for 3+ years, where I have a blog that I use to keep track of my learnings from online courses and conferences, as well as to share ideas and side-projects that I’ve built. It’s been a great way to not only promote myself, but also keep track of my career growth and build more meaningful professional relationships.
For the last four years, I have been hosting a site on Squarespace, a powerful drag-and-drop site builder with content management services and e-commerce capabilities. While Squarespace was easy to use and provided me with the tools to build a pretty site, it was expensive: I was paying roughly R3 000 annually, and not really using any advanced capabilities as my site was very much a static one. I needed to save some money, so I started thinking about how I could cut these annual costs.
The first solution I tried was hosting my own website using my Raspberry Pi. However, I hit a wall when my service provider wouldn’t assign me a static IP address. I didn’t have a Plan B, until I stumbled across an idea from the #100DaysOfCode challenge – a Twitter hashtag where a big community of developers share crazy tech stuff they’re doing. Many of them were using Netlify to host small sites for free, so I set out to explore how I could use this platform for my own online portfolio.
In this article, I’d like to share with you what I learned about Netlify, and why I think it’s an excellent platform for any developer looking to build an online portfolio – regardless of their financial situation. I’ll also walk you through the process I followed to create and host my portfolio using the platform. This will hopefully help you get to grips with it so you can build your own!
What is Netlify and why did I choose it?
Netlify is a powerful serverless platform with an intuitive git-based workflow, automated deployments, shareable previews, and much more. It has a free option that allows users to create small, low traffic websites, and simplifies the pipeline to get your site from code stage to going live.
There were many reasons why this platform stood out to me:
- It’s widely used by people I know: This was important to me because it’s always easier to trust a product or a service when it has ‘real people’ reviews. Knowing the people who had used it was an extra pull for me because I trust their opinions.
- It supports integration with GitHub: This was appealing because I enjoy using GitHub’s platform for my personal projects, especially when coding on my personal MacBook.
- It supports integration with serverless functions, among other things: This was exciting to me because I usually use Microsoft Azure, and I saw this as an opportunity to learn something new.
- It supports 100 free form submissions a month: This takes the complication out of the code I would have to write for my ‘Contact me’ page, and therefore help me get my site up and running quicker.
- It has premium scaled up options: This means that your site can scale with the demand if it grows to be more than an online portfolio.
- It allows you to link up your domain name to your site: This is incredibly awesome because Netlify allows you to do this on the free option as well, which really appealed to me because I wanted to cut my site’s running costs.
- It ensures your site is secure: Netlify is integrated with Let’s Encrypt, which automates adding an SSL certificate to your domain. This shows viewers that your site is secure and trustable.
Note: The free option does have limitations, but if you’re using it to build an online portfolio that mostly mimics a CV, I highly doubt you will ever hit their limits. See the full feature list and plans compared here.
Once I was sure that Netlify had all of the features I needed to set up and host my online portfolio, I launched into building it. Here is the step-by-step process I followed to get my portfolio up. I’ve included a visual guide to help make it easier for you to follow along if you’re keen to use the platform yourself.
A step-by-step guide to creating and hosting your site for free on Netlify
Before we get started, these are the details about the dev environment and tooling I used to get my site up and running. The instructions are based on this.
- Accounts I signed up for: Netlify and GitHub.
- Operating system: OSX. You can still follow these steps on a Windows machine, but the look and feel of some applications may differ.
- Software used: GitHub Desktop, Visual Studio Code and a web browser – I used Safari. Make sure this software is installed on your machine.
Note: If you are not familiar with GitHub and don’t know how to create a static website, step 1 - 3 give a quick overview on how to do so.
1. Create your repository
First, you will create your new repository on GitHub. You should do this because Netlify integrates directly with GitHub and auto-publishes when you change your code on your repository.
2. Access your repository on your computer
Now you will open up GitHub Desktop, click ‘Add’ and then click ‘Clone Repository’ to map it to your PC.
3. Set up the repository to be worked on
Next, open up Visual Studio Code and open the folder on your PC where you mapped your repository.
4. Find a template
Once you’ve done this, you’ll have to find a template to use. There are lots available on tooplate.com. The specific template that I used can be found here.
5. Get the template to Netlify
Now that we have a template, we need to take the contents of that template folder and copy it to our working directory – the folder we mapped our repository to.
Copy the contents, go back to Visual Studio Code, and you will see all the files appear. Feel free to edit them with your own copy or details.
When you’re done with this, go back to GitHub and click ‘Fetch origin’.
6. Set up your first Netlify site
Next, log in to Netlify and go to your ‘Team Overview’ page and click ‘New site from Git’.
On the next page, select ‘Github’, then click ‘Configure Netlify on GitHub’ and you will be navigated to GitHub.
7. Configure Netlify on GitHub and deploy
Once you’ve navigated to GitHub, you need to go through the configurations giving Netlify access to your repository and click ‘Save.’
After this, refresh your Netlify browser tab and select your repository.
Lastly, you will complete the configuration on Netlify’s portal and click ‘Deploy site’.
8. Customise the address (URL) of your site (optional)
You’ll see now that your site has been deployed but to an auto-generated address. You may want to customise that.
To do this, click ‘Site settings’, followed by ‘Change site name’. Change your site’s name and click ‘Save’.
You will now see your site’s address has been changed. I changed mine to ‘https://bens-cv-template.netlify.app.’
Note: If you have purchased a domain, then you can link your site to that domain by following the Step 2 prompts on Netlify. Once you’ve done this, Step 3 happens on Netlify’s side automatically because they connect your custom domain with a secure SSL certificate.
9. YOU’RE LIVE!
Well done, you have published your first Netlify site!
If you’d like to see what this process looks like visually, here’s a guide to show you what each step looks like with screenshots.
Pro tip: My blog is hosted by Hashnode, and their platform allows you to link it to your domain using a subdomain in your settings. This means that you get free content management capabilities for your blog and exposure to thousands of developers – if not more – by writing using their platform. The best part of that subdomain configuration is that your blog appears to be on your own site. Pretty cool!
I hope sharing my experience with you gives you the courage to put yourself out there by finally creating an online portfolio to share your incredible work with the world. Happy creating!
Rishal is a passionate developer at Hollard Insurance who works on frontend, integration and backend projects. He primarily codes using C# at work but he also enjoys dabbling with other trending languages, such as GoLang, to challenge himself. Outside of work, he likes to keep up with different tech communities and express himself creatively through code, photography and working on cars.
