Create your own personal website quickly with Gatsby

Vamsi Krishna — Tue, 01 Oct 2019 15:30:25 +0000

Note: This has been published on my personal blog built using same steps which was hosted @ https://vamsikrish.me/

As a developer, we all want to have neat portfolio that we can showcase to our potential employers and increase our chances of success.

Plenty of job openings also have an optional field to provide our own portfolio links/website links/blog links which is optional in most of the cases but provides a chance to differentiate our application from others.

So, Let's quickly look at how we can stand-up our own website quickly using Gatsby. Specifically, I'll show how to spinup your own blog and you can use the same steps with a different template to build your own.

Environment Set-Up

Make sure you have the following already installed on your system as a pre-requisites:

Node.JS
Git

Now Let's install gatsby-cli, the main tool to work with gatsby. You can install gatsby-cli using the following command :

npm install -g gatsby-cli

This will install the gatsby-cli as a global command on your system so you can use it from anywhere on your system.

Let's create a new site.

gatsby new your-site-name

This will create a folder with your-site-name, initialise a git repository and fetch the default template and set all the things up for you. This is a barebones site from which you can fully customize everything.

But we can override the default template and use other templates too using the following command:

gatsby new your-site-name template-url

I'll be using one which I used to build my personal blog. You can also pick one from the starter templates from Here

gatsby new your-site-name https://github.com/gatsbyjs/gatsby-starter-blog

Once this is done, we can navigate into our new folder using

cd your-site-name

Now, we can run the dev server which gatsby provides to see the site and make changes to the code and see those changes live reload.

gatsby develop

This will start the dev server by default at localhost:8000 if that port isnt available it will pick the next available port and you can see at which location the server is running on the terminal.

Now if you navigate to that url and you can see your personal blog up and running.

Well, it is currently not so personal yet you need to edit the name and other info from those to your own.

Add your own posts - Navigate to content/blog folder and remove exisiting content and create your own posts in the same format.
Edit the Bio - Navigate to gatsby-config.js file and change the values to your own

Once you're done with all the changes you can stop the dev server by pressing Ctrl+C (Windows) and build the production build using

gatsby build

Now this will produce the optimised production output in the public folder which you can store in a server to publish to the internet.

Now you can publish your site for free using many ways like netlify, github pages etc but I'll show how to host this static site using Cloud Platform AWS since I'm into learning AWS( and maybe Azure also) these days.

If you want to learn more about gatsby you can watch Andrew Mead Free Course on Youtube GatsbyJS - The Great Gatsby Bootcamp

P.S : I haven't watched it yet since I am not much into front-end development that is why I have made minimal changes to this blog also. But I have taken his other course on Node.JS and is seriously impressed, so recommending his other course.

P.S : Dan Abramov also created his personal blog using Gatsby using the same starter template and added a cool night mode toggle and it is open-source so your start from there too. Maybe I'll update mine just to get that night mode. 🤩

DEV Community: Vamsi Krishna

Create your own personal website quickly with Gatsby

Environment Set-Up