Finally decided to bite the bullet and create my own website. The plan is to document my journey as I work on my personal projects and write some articles, with the overall target of helping others along the way.
The main aim of this post is to give you a short run down on how I set up my website quickly using GatsbyJS and Netlify.
Gatsby is a static site generator based on React and powered by GraphQL.
But Gatsby is more than just a static site generator.
However, there is more! GatsbyJS has a rich number of plugins which are just Node.js packages that implement Gatsby APIs. These enable you to easily add functionality to your site, such as using markdown files for article posts and turning your website into a progressive web app (PWA).
All of these features make it easier to get your own website up and running fast. For me, it was these features and the fact that Gatsby uses React (something I want to learn) which made it an ideal option.
Netlify is a serverless hosting platform that works by building and deploying your static websites code from a Git repository (can be from Github, Gitlab or Bitbucket).
This means that Netlify does all the heavy lifting of building your website and distributing it. All you have to do is push your changes to your remote repo. This makes deploying a new version of your website fast, plus the initial setup for Netlify was effortless.
It has all the features you would want in a website deployment platform. You can:
There are also Netlify build plugins which can be used to add functionality. Something I haven't looked into using myself yet, but seems to have some interesting ones like caching between Gatsby builds to make it faster.
Why did I go for Netlify over GitHub Pages? Well..
I'm currently using the free starter tier on Netlify which gives you 100GB of bandwidth and 300 minutes of build minutes a month. So far it seems to be working well!
You'll need to have Node.js and Git installed on your machine to get started. Some Git knowledge is also required.
npm install gatsby
gatsby new my-website https://github.com/gatsbyjs/gatsby-starter-hello-world
There are a load of different starter templates you can go from. I went with the starter-hello-world version as I wanted to go step by step through the Gatsby tutorial to learn about Gatsby and its plugins.
Dev mode runs a server in the background for features like live reloading (seeing changes as you make them) and GraphiQL (IDE for GraphQL).
Now you can access your newly created website at http://localhost:8000/ or play around with GraphQL queries (via GraphiQL) at http://localhost:8000/__graphql.
This varies based on what Git repository hosting service you use. For GitHub, just create a new repository on their website and add that as your remote.
git remote add origin https://github.com/<username>/my-website.git
Last but not least, define your main branch and push.
git branch -M main && git push -u origin main
Once you've done all of this, Netlify will go and start building your site. Once completed, it'll automatically deploy it for you. There you have it, you now have your own website up and running!
If you want to see the same instructions with some pictures, Netlify has this great guide here.
P.S. You can use your own custom domain name with Netlify too, follow this guide for the steps.