How to Build & Launch your Portfolio Site

1 Dec 2020 · 5 min read

Why should you have your own portfolio? Because why not!

Portfolios are awesome! Is there any easier way for us developers to convert our personalities into a bunch of HTML, CSS & Javascript? You can write blogs, rant about anything, give your projects a professional showcase. And not to forget the optimization of your online presence — which is golden for any job-seeker, freelancer, or an indiehacker.

This piece is but a humble guide on how to set up your portfolio with a minimum amount of work. This is how I did it, and anyone who wants the same & has basic HTML & CSS skills — be my guest for the ride. 🚀

Step 1: Building a website

Option A: Code up your static site

The easiest way to get started is a static site — plain HTML, CSS & minimal JS/jQuery. You can tweak some of the freely available templates. Or, if you really want to show off your skills, create something original & truly yours.

For layouts & design inspiration, look around the personal websites of amazing people out there in the community. The idea is to keep the website simple & aesthetic — with minimal effort. Show your personal site/blog keeps popping up on Hacker News frequently and can be a great source of inspiration.

Option B: Use static site generators

If you don’t want the hassle of coding entire HTML pages, the other choice is a static site generator like Hugo, Jekyll, or Gatsby. They have a simple learning curve & amazing documentation, and provide a wide variety of themes to customize.

Personal note: I built my first site with Hugo — up and running in just a few minutes. But dropped it later, as the confinement of themes just didn’t feel right to me.

Once you’re satisfied with your website design, it’s time to go live!

Step 2: Deploying the site

If you’ve used any back-end frameworks while building the website (which I haven’t), you can deploy the server with Heroku, AWS, or Google Cloud for practically free.

But if it’s just HTML & CSS, Netlify, GitHub Pages, or Firebase are the easiest way to go. I’ve used all three in the past, and it’s a matter of minutes before your site is alive.

Though you can choose your site name here (if available, of course), the only compromise is the custom suffix you’re going to get in the URL. The next section is about avoiding that.

(Optional) Buying a domain name

Well, nothing beats having a .com behind your name, does it? 😎

Even if you’re not lucky (with a common name), you can easily get your name’s domain at dirt-cheap prices (as low as $10–12). If yourname.com is taken, the Beast Search Mode on namecheap.com (don’t go on the name, it’s really cool) can suggest the next best available options in a similar price range.

There’s been a lot of debate on using your real name vs. a pseudo-name as your domain. In my opinion it’s best to go with your original name, as it’s one’s first identity & people are more likely to search you by your name — unless your pseudo-name is more famous online (ahem… PewDiePie).

So now your portfolio is up & shining — it’s done, right? But wait: you type your name in Google search & your portfolio isn’t even on the last result of the last page. All you can see is your (and namesakes’) profiles on other platforms & a bunch of things you signed into a few years back.

What the hell happened? What was the point of a tree falling in the forest if no one’s there to listen to its sound!

Step 3: Making your site visible to the world

Here are a few well-proven tips to increase your SEO:

Google search works on backlinks. The more branded sources pointing to your site, the higher its rank. So add your amazing site to all of your social media profiles.
Content is the key. Keep adding content to your site — blogs/videos/photographs — and post it on platforms with a wider audience, pointing back to your site, to let Google’s crawler know your site exists.
Another tip: give your website URL as meta-content in every image or file. E.g. <img src="img.jpg" alt="www.aayush4vedi.com"> ( ͡° ͜ʖ ͡°)

Keep doing this and let’s hope you’ll see your site in the top Google search results in a few weeks.

← All blogs