In my last post, I took you through how to set up Gatsby with some tips on navigating some snags in their tutorial. Today, we’re going to look at an easier way to create a Gatsby site, especially if you have only basic knowledge of HTML / CSS / JS. We’ll also look at a very simple language called Markup to edit your content and some simple styling.

THE EASIER WAY TO MAKE A GATSBY SITE
When I discovered this part after finishing their Style tutorial, I was ever so happy I didn’t have to go through the other seven parts before I could make my first site! They are amazing resources that I will definitely dig into more deeply as I become more familiar with Gatsby, but for now, I’m ready to get something up a little faster without so much coding up front.

Templates! Music to my ears!

As a technical writer, I’m more focused on the content than the style anyway, so it’s wonderful to have something I don’t have to create and style from scratch. Get a head start on your static site by choosing a template from the Gatsby Starter Library. The CLI command is at the bottom of each templates’ page, but you can also directly clone it from GitHub or try it out in the CodeSandbox too! See each of these options under the template preview:

From here, you have all the files and design and everything else you need! Now you can focus just on the content! In the src/pages directory you’ll find other folders, each with it’s own Markdown file. For example: src/pages/about/index.md. Each of these index.md files can be opened and edited in a simple text editor, or (as I just gleefully discovered) directly in GitHub! What!

Markdown is far easier than JS, CSS, or even HTML. Again, it enables you to focus on content rather than messing with code to ensure it’s appearing correctly on all the browsers and all the devices. Such a relief! I’m much more of a writer than a website designer, so I’m thrilled Gatsby does that part for you.

SO MANY ERRORS!
When I first tried to compile my initial changes, I got a compile error in ./src/components/all.sass, so I Google what that meant, and I found that it’s sometimes necessary to install other plug-ins on a Gatsby Help Page, and apparently this sass plug in is one of those when working with templates.

Sadly, that didn’t work for me, and it was already in the gatsby-config.js file, as instructed on their help page. I tried the next solution by installing the sass on node: npm install node-sass

There appears to be a long list of packages to install for these pages to work properly, so … not as simple as I thought! You can find many answers to common issues on Gatsby’s troubleshooting page.

DEPLOYING YOUR SITE
If you don’t have your own server, you can deploy your site through GitHub pages! Right under the template there are two links: one for a Sandbox and the other for Netify, as shown in the template preview near the top of this post. Simply click on Netify, and it will take you through an easy setup wizard to connect your new site to GitHub pages.

That GitHub repo will walk you through the next steps:

Now you’ve got your very own Gatsby site!

It appears that the really Great thing about this Gatsby is that one has the power to get deep into the design if that’s your or your team’s thing, but it’s also possible to just focus on the content, which is perfect for a technical writer like me.

Here is my repo playground for static sites, so you can watch them evolve over the next few weeks as I continue to edit those simple .md pages into something fun.

Next, I’ll test out Jekyll, then compare the two!