How to Build & Launch your Portfolio Site 
Tags: portfolio, beginners, html, javascript
Published: 2020-12-01 21:37:20


### Why should you have your 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](https://www.indiehackers.com/start).

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. 🚀 

# Step1: Building A Website
### Option A: Code up your static site

The easiest way to get started is to use a static site - written in plain HTML, CSS & minimal JS/jquery. You can use tweak [some of the](https://www.free-css.com/template-categories/portfolio) freely available templates. Or if you really want to show off your skills - you can create something original & truly yours.

For layouts & design inspirations, you can also 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 on popping up on Hackernews frequently and can be a great source of inspiration.

Link: [frequent HN queries on portfolio showoffs](https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=ask%20pesonal%20website&sort=byPopularity&type=story)

### Option B: Use static site generators

If you don't want to go through the hassle of coding up entire HTML pages, the other choice is to use the static site generators like [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), or [Gatsby](https://www.gatsbyjs.com/). They have a simple learning curve & amazing documentation. And provide you a wide variety of themes to be customized accordingly.

> 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 felt right to me.

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

# Step2: 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](https://devcenter.heroku.com/articles/git), [AWS](https://aws.amazon.com/), [Google Cloud](https://cloud.google.com/) for practically free.
But if it's just html & css; [Netlify](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/), [Github Pages](https://www.pluralsight.com/guides/how-to-host-your-static-webpages-on-github-pages), or [Firebase](https://medium.com/@aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2) are the easiest way to go. I've used all three of them in past, and it's just a matter of minutes when your site will be alive using them.

Though you can choose your domain name here ( if available ofc ), but the only compromise is the custom suffix you're gonna get in URL. The next section is about avoiding that. 

# (Optional) Buying A Domain Name

 Well, there's 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](https://www.namecheap.com/) (don't go on the name, it's really cool) can suggest you the next best available options in similar price range.

There's been a lot of debate on using your real name/nickname vs pseudo-name as your domain name. 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 search of the last page. All you can see is your (and namesakes) profiles on other platforms & a bunch of things you've 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!

# Step3: Making Your Site Visible to the World 

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

* Google search works on backlinks.Means, the more branded sources pointing to your site, the higher is it's rank.So, add your amazing site in all of your social media profiles.
* Also content is the key here.So you should keep on writing more content to your site - like blogs/videos/photographs. And post them on the platforms with a wider audience, which point to your site- to let google's crawler know that your site exists.
* Another tip: Give your website url as meta-content in every image or file.Eg: 
```
<img src="img.jpg" alt="www.aayush4vedi.com">
```

( ͡° ͜ʖ ͡°) 


Keep doing this and let's hope you will see your site on the top google search result in few weeks.