Preetam Nath

Publishing your first website using Gatsby.js and Netflify

Setting up a website in the year 2019 is no big deal. But if you're like me, it is a huge deal. It's my very first website on the internet!

I know, I'm late to the party, it's 2019. But I'm here now, and that's what matters.

I decided that my first post on this blog should be about how I setup everything that allowed me to write and publish this post (I'm a fan of meta stuff).

If you're an absolute beginner like me who only had a basic idea of HTML, CSS and JS before building this website, this guide is perfect for you. I have included links to EVERY resource that I consumed in order to build PreetamNath.com and this blog.

Let's begin!

Topics Covered


  1. Why I built this
  2. Basics of HTML, CSS, JavaScript
  3. React
  4. Gatsby & GraphQL
  5. CMS
  6. Github & Netlify
  7. Domain
  8. What's next

Why I built this

I quit my job recently to start a software company. The goal is to build micro SaaS products that allow me to build a sustainable lifestyle while having the freedom to explore more opportunities.

Micro SaaS is a term coined by Tyler Tringas who built Storemapper and now runs Earnest Capital, a fund for bootstrappers.

Here's a quick gist

  • extreme focus on a small niche with a potential market size of 100 to 1000 paying customers
  • pick a small problem and solve it really well
  • affordably priced SaaS between $10/mo to $100/mow

The only problem was, I didn't know how to code!

While no code seems to provide an alternative path, I knew that to implement my ideas quickly, build a solution that is fast and reliable, I needed the power of code.

Thankfully, I didn't start on this journey alone. My business partner Sankalp perfectly complements my skills - he's a brilliant backend turned fullstack developer, and I'm a marketer-designer-product manager.

Unfortunately, after figuring out the initial questions of "who to target", "which problem to solve", "how to solve it", everything that comes afterwards depends on two things

  1. Effectiveness of Marketing
  2. Speed of Development

In the early stages, Speed of Development is the biggest bottleneck to getting more customers - as your product matures and becomes more feature rich, it is able to serve a larger % of the audience that considers using it.

Hence it became clear to me - I had to learn how to code in order to increase our speed of development.

Now this isn't the first time I had this thought. I've wanted to learn how to code since the beginning of 2018. After multiple failed attempts, this current attempt is the furthest I've ever gone.

And I think the reason may be that I have the right motivation to get it done this time. Starting this month, I will work on a production app for the first time, and the excitement to build and learn alone is driving me.

I couldn't directly start learning to code on the production app, I had to start somewhere. This domain had been lying around idle for 2 years. I thought creating my personal blog using React would be the perfect starting point.

Basics of HTML, CSS, JavaScript

I mentioned that I've wanted to learn to code since 2018. Back then, I did manage to learn the basics of HTML, CSS and JavaScript.

There's so many high-quality courses you can find online, many of accessible for free, you literally have no excuse not to start learning.

Here are some courses that helped me get up to speed:

React

A few reasons to go for React.js

  • It has a huge and growing community
  • It's performant
  • I love the component-driven development style, it's very easy to think about it conceptually

In 2018, I had tried a few courses on Udemy to learn React. None of them got me anywhere. In fact, they made me start fearing React and I thought I wouldn't really be able to proceed any further.

About a month ago, I came across a React.js tutorial on freeCodeCamp's YouTube channel. The instructor Bob Ziroll is one of the finest teachers I've ever come across. By following his course, in just a few days, I understood all the basic concepts of React well enough to start writing my own code.

I highly recommend you take the interactive version of this course over at Scrimba. Scrimba gives you a live editor environment, and the tutorial happens on that environment. Which means, at any time during the tutorial, you can pause the video and play around with the code yourself.

Scrimba

I think Scrimba is a brilliant product built for teaching coding online. I hope they gain more traction in the future.

Gatsby and GraphQL

The decision to learn Gatsby started when I learnt about static site generators.

Excited about how these frameworks made it easy to build static sites (landing pages, blogs), I started searching for a framework to learn. Since I had already learnt the basics of ReactJs, I tried looking for a React based static site generator.

Gatsby

After reading a few posts on HackerNews about how people set up their blogs, checking out Gatsby's excellent documentation, plugins, and starters, it was a no-brainer to get started with Gatsby.js

I searched for a tutorial on YouTube and was very happy to find a comprehensive course on freeCodeCamp's channel, aptly titled The Great Gatsby Bootcamp.

The same tutorial will also introduce you to GraphQL, which can be described simply as syntax that describes how to ask for data. There are many ways to load data from an API into React components, GraphQL happens to be a powerful method created by Facebook engineers, and is officially supported by the Gatsby framework.

Andrew Mead is a fantastic teacher just like Bob Ziroll. In no time, I consumed the 4 hour course and had my first website running.

CMS

Setting up a website is great, but how do you write and publish blog posts on it? For that, you need a CMS, aka Content Management System.

This blog uses Markdown as a CMS since it was simple to begin with. But you could easily connect a CMS like Contentful or Prismic. The free plans are generous enough to accommodate starters like myself.

The same course by Andrew Mead covers how to use Markdown as a CMS, or Contentful as a CMS.

If you choose to go with Markdown, here's a cheatsheet to help you get started. I used an online markdown editor to write the post and preview it simultaneously, made my work easier.

Github & Netlify

If you've followed along so far and done the courses, you will a codebase on your computer that you need to upload online. Github is one of the best ways to do that, but you can also Gitlab or Bitbucket.

The same course by Andrew Mead also covers how to publish your website using Netlify, all for the low cost of FREE. You can also read Netlify's own guide on deploying to Netlify.

Netfify's GUI was a breeze to use. In a matter of 5 minutes, I was able to connect my Github repo, publish my website, connect my domain, configure CNAME and alias, and I was done!

Did I mention Netlify brings one-click SSL / HTTPS to your domain using LetsEncrypt? It's a breeze to set it up.

It keeps getting better. After making changes to your codebase in your local environment, all you have to do is push your code to the connected Github repo, and Netlify will automatically deploy the latest build.

Domain

Like I mentioned before, I've been sitting on this domain (preetamnath.com) since 2 years. But if you don't have a domain already, it's very simple and inexpensive to purchase one from Google Domains or Namecheap.

In case you are about to buy a new domain, I advise you to steer clear of GoDaddy. The number of threads on the internet against GoDaddy for stealing domains and scamming their customers should be enough of a red flag.

I recommend buying your full name, or a short hand version if you prefer that. Paul Jarvis is an excellent example, his website is pjrvs.com. Pretty cool eh?

What's next

When Sankalp and I started on this journey to build a profitable online business, we didn't anticipate that we would through organic exploration land at building apps for Shopify.

Shopify is platform that allows anyone to create an ecommerce store within minutes. IMO it's the ultimate no-code tool for ecommerce shops as of today. It's also got a thriving app marketplace and Shopify themselves are very welcoming and friendly to developers.

2 months ago, we built a very basic app called WhatsApp Live Chat Button in order to learn about the ecosystem, understand how app development works, how customer acquisition works, and also we hoped to organically find problems worth solving.

Fast forward to today, we have learnt tremendously across all facets. I plan to write about these learnings in future blog posts. And we are brimming with excitement about all the ideas and possibilities for the future. I will be sharing more about this in future posts.

I hope to contribute to the codebase of my future app from Day 1. I can't wait to get started!


Preetam Nath profile picture

Hi, I'm Preetam. Thanks for reading :) I would love to hear your thoughts. Say 👋 on Twitter