5

How to create a portfolio website for free?

 1 year ago
source link: https://dev.to/jihedkdiss/how-to-create-a-portfolio-website-for-free-4d0a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK