How to create a portfolio website for free?
Tags: beginners, webdev, career, tutorial
Published: 2022-06-26 10:55:45

As an aspiring developer or designer 😎 you'll have to **showcase your great projects** for hiring managers & recruiters through your portfolio. In today's article I'll show you how to create **your very own portfolio** and publish it **FOR FREE**! 🤩

> Have a look at **[my own Portfolio website](https://jihedkdiss.netlify.app)** to get an idea of what yours will look like after you complete the tutorial! 😉

---

## Design your portfolio website
In the first step you'll have to either design your website **from scratch** or **edit a template**. Feel free to work with any technology you'd like and any libraries you want. _Be creative!_ 👨‍💻

> Tip: Many websites out there provide free templates for any kind of website. You'll find a hand-made list at the end. _If you're curious_, I used [HTML5UP](https://html5up.net/) for [my website](https://jihedkdiss.netlify.app). 🌟

![Multiverse template by html5up.net](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxdpifqfdui1zcg3tv6p.jpeg)

In this process, you'll have to gather your **open source projects**, clients case studies and any other works you've done that involve your professional skills. Make sure to write a little description of each project and insert a link to it if it's a website or **GitHub repository**. Your portfolio is also the best place to put links to all your social media accounts and give an insight of your education, career and social life. 🤓

> Tip: _Best work comes first!_ No need to fill it up with meaningless projects. **Recruiters prefer quality over quantity**.

---

## Host your website
After you're done with coding your website (which takes usually 3-5 days) it's time to get it online! You have many option in this step, you can for example upload it to GitHub and get a GitHub pages link, simply. 🤷🏻‍♂️

> Tip: Name your GitHub repository **username.github.io** and use your repository as host. 💫

![Netlify Dashboard](https://d33wubrfki0l68.cloudfront.net/1c26b9b6a3aadae43d5b9eb43eafad07c45aaa18/58fd5/v3/img/blog/stripe-netlify-dashboard.png)

Personally, I recommend [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/) for hosting & deployment. [My own portfolio](https://jihedkdiss.netlify.app) is hosted on **Netlify**.

### Why to choose Netlify 🎯

- It provides VERY FAST deployment _(Really. It's very fast!)_

- 100 GB of traffic monthly for free _(That's more than enough for a personal website)_

-  Loading speeds are great thanks to their CDN. ⚡️

> Tip: Netlify also provides **FREE SSL Certificates** 🔒 for your website provided by Let's Encrypt. It takes a couple minutes to see the green lock on your website and it doesn't need configuration at all.

---

## Get a free domain name! 💲
The final step _(and maybe the most interesting)_ to creating your amazing portfolio website is setting your domain name!
For this step we'll use the famous **[Freenom](https://www.freenom.com)**, a **free domain provider** that allows you to choose from a range of free domains: **.tk .ml .ga .cf** etc...

![Freenom Dashboard](https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2022/03/freenom-review-2020-1.png)

> Tip: This step is better explained with a video. Here is the best tutorial out there, fast and straight to the point. **Make sure to follow step-by-step.**

{% embed https://www.youtube.com/watch?v=3Uopc4AFjOY %}

---

## Link Netlify with your new domain name ✔️

The steps to link your domain and host are pretty simple:

1. **Add a custom domain** to your site on <u>Netlify dashboard</u>.
2. Go add Netlify's **nameservers** to your domain name on <u>freenom's dashboard</u>.
3. Click **Verify DNS Configuration** on the bottom of the page to launch the auto SSL Configuration. 🔒
4. Wait a couple minutes (up to 10 minutes) and come back, you'll see that **your website is live** with a green lock!
5. Congrats king/queen you did it! 👑

> Tip: You can follow this step-by-step video tutorial if you encounter any problem or need further clarifications.

{% embed https://www.youtube.com/watch?v=ikxE0bIgac0 %}

---

## Conclusion
These are the steps you need to follow in order to get your portfolio website up and running. Thanks for your time and I hope to see all your portfolios in the comments section. Support me by sharing this article and following me on social media:
[GitHub](github.com/jihedkdiss) / [LinkedIn](linkedin.com/in/jihedkdiss) / [Twitter](twitter.com/jiokdiss) / [Facebook](facebook.com/jiokdiss)

> Fun fact: This is my first post here I hope you guys love it :)

---
 
### Free templates for your websites 🆓

- **[html5up.net](https://html5up.net/)** HTML5 Templates that are fully responsive and easy to customize.
- **[ThemeFisher](https://themefisher.com/free-bootstrap-templates)** Free Bootstrap Templates for a variety of uses.
- **[BootstrapMade](https://bootstrapmade.com/bootstrap-portfolio-templates/)** Website templates for creative agency, design and photography.