DEV Community

Cover image for How to create a portfolio website for free?
Jihed Kdiss
Jihed Kdiss

Posted on • Updated on

How to create a portfolio website for free?

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 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 for my website. ๐ŸŒŸ

Multiverse template by html5up.net

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

Personally, I recommend Netlify or Vercel for hosting & deployment. My own portfolio 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, a free domain provider that allows you to choose from a range of free domains: .tk .ml .ga .cf etc...

Freenom Dashboard

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.


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 Netlify dashboard.
  2. Go add Netlify's nameservers to your domain name on freenom's dashboard.
  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.


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 / LinkedIn / Twitter / Facebook

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


Free templates for your websites ๐Ÿ†“

  • html5up.net HTML5 Templates that are fully responsive and easy to customize.
  • ThemeFisher Free Bootstrap Templates for a variety of uses.
  • BootstrapMade Website templates for creative agency, design and photography.

Top comments (25)

Collapse
 
mahmoudessam profile image
Mahmoud EL-kariouny

Thanks for sharing ๐Ÿ‘ ๐Ÿ˜Š

Collapse
 
randellbrianknight profile image
Randell Brian Knight

This is very useful for anyone unfamiliar with personal website creation. I also appreciate the amount of free stuff that is available. Thanks for sharing, Jihed Kdiss

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

I never made a portfolio I don't know if I ever will, but it's so affordable like this ๐Ÿ˜…

Collapse
 
hpouyanmehr profile image
Hosein Pouyanmehr • Edited

Hi,
Nice post and thank you for sharing. I've a free Next.js template for portfolios which you can find the explanation about it here

Collapse
 
jihedkdiss profile image
Jihed Kdiss

It's a very clean and neat design buddy I love it and the photoshoots are great as well. I'm wondering what technology did you use for the contact form?

Collapse
 
hpouyanmehr profile image
Hosein Pouyanmehr

Thanks, that's nice of you.
I've used MUI as the UI library, and the contact form is based on MUI Button and TextField components. For managing the form inputs, I've used Formik, and it can be connected to an existing email for receiving form feedback with nodemailer.

Collapse
 
mcanam profile image
mcanam

Nice post ๐Ÿ™Œ but i can't access your portfolio site ๐Ÿ˜ฅ

Collapse
 
jihedkdiss profile image
Jihed Kdiss

It's available here jihedkdiss.ml/ try again and let me know if you have any problems :D

Collapse
 
mcanam profile image
mcanam • Edited

still can't ๐Ÿ˜ฅ the server IP Address could not be found.

Thread Thread
 
jihedkdiss profile image
Jihed Kdiss

No problem mate there's always a solution. Since it's a single page I took a screenshot of the whole page using my browser and here's the link ibb.co/d29yrh9

Thread Thread
 
mcanam profile image
mcanam

wow cool, thank you. i wanna make this one ๐Ÿ˜†

Collapse
 
shrihari profile image
Shrihari Mohan

shrihari-portfolio.vercel.app/ Here is my portfolio , and if you guys want it you can use this as the template. ( Template link in the bottom of about)

Collapse
 
jihedkdiss profile image
Jihed Kdiss

Good job mate the design is lovely and the loading bar especially is creative i like it so much! I have a question how did you integrate the blogs from dev.to into the blogs section?

Collapse
 
shrihari profile image
Shrihari Mohan

Dev to provides api s which can be used for that.

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Here's my portfolio website created with React Js and TailwindCss
portfolio-shubham-tiwari.netlify.app

Collapse
 
jihedkdiss profile image
Jihed Kdiss

I gave it a look and it's so good-looking and professional! The design is just amazing keep going bro. Consider grabbing a free domain from the tutorial ;)

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you

Collapse
 
rauldipeas profile image
Raul Dipeas

You can host on surge.sh too, very easy to remind domain.
rauldipeas.surge.sh

Collapse
 
jihedkdiss profile image
Jihed Kdiss

Great suggestion Raul! And your portfolio looks very creative keep up :D

Collapse
 
rauldipeas profile image
Raul Dipeas

It's just a hotsite, but thank You for the comment, I'll try to improve it soon!

Collapse
 
rauldipeas profile image
Raul Dipeas

Oh, I forget to mention that I used a HTML5Up template too.
html5up.net/aerial

Collapse
 
andrewbaisden profile image
Andrew Baisden

Some good resources here.

Collapse
 
jihedkdiss profile image
Jihed Kdiss

Wanna see your portfolios guys!

Collapse
 
j471n profile image
Jatin Sharma

You can visit mine here

Collapse
 
jihedkdiss profile image
Jihed Kdiss

Yours is absolutely the BEST I can't deny that. It's just amazing with all the extensions and useful tricks (dark mode, spotify, statistics...) keep up the good work buddy <3