Lessons Learned Building Gatsby Sites
I built two simple sites over the past few months in order to learn the basics of Gatsby. The first one (see https://gatsby-coding.netlify.com/) is really just a page, but even so it incorporates GraphQL to load both the menu and the projects. The other is for a therapist client (see https://www.barbaragelfandlcsw.com/ ) – I used one of my garden photos for the header. Note how the image lazy loads with a blur effect and then comes in to sharp view.
Why Gatsby?
In short, there are some great reasons to use Gatsby for a website. Gatsby loads fast. One has a nice lazy-loading of images with Gatsby image. A Gatsby site is easy to update by a developer via the code – this makes it easier to maintain. A happy developer means happier clients. And hosting for small sites is available for free via hosts such as Netlify.
Lower Your Expectations (at first)
If you are new to Gatsby, leave yourself plenty of time to learn before promising speedy turnaround to a client. Good news: there are lots of ways to set up a Gatsby site. Bad news: it may take a while to learn those different ways and to choose what works for the needs of the site.
Study the Code
One key file in your Gatsby set up is gatsby.config. One lesson learned: make sure to add your plugins to this file. For example, I wanted to use Styled Components. I have used this plugin before in some of my React apps. I added the styled components to my component files. Everything worked fine. Or so I thought. When I finally deployed the site to Netlify, I was confused by a sudden flash when the site loaded – the CSS did not load immediately. It turned out the fix was simple: add `gatsby-plugin-styled-components` to my gatsby-config. However, finding that solution was not so simple. Someone had had a similar problem; he gave me a name to the problem – FOUC (Flicker of Unstyled Content). Knowing that term helped me find the solution via search engine.
Gatsby is not WordPress nor is it Drupal
If you are used to working with WordPress themes, you will find you need to create from scratch (or at least find working code) for certain details of your site. For example, I spent time fine-tuning the mobile piece for the Gelfand site – I even use some React save state knowledge. Gatsby themes came about after I started the sites I built, but it will be a while before there will be a large amount of professional themes from which to choose. Even so, one will probably want to tailor those themes to specific needs. If you are accustomed to the fields, views, taxonomy, or permission capabilities of Drupal, you can 1) take the time to connect your site with a Drupal back end or 2) learn new ways to accomplish what you need to do or 3) use Drupal instead.
Ways to Create a Custom Twitter Card
When I first posted the Gelfand therapist site to Twitter, I got a rather boring card. No image appeared. I found some plugins that made fancy text cards, but what about an image? It turns out I just needed to add the image to a static folder on my site. Then I fixed my seo.js to load that image for a Twitter card. The Twitter card then worked as planned. (Note: this could possibly become a post of its own).
Why Gatsby for This Therapist Site?
Barbara’s old site was built with straight HTML and CSS. While there are benefits to old-fashioned straight code, her site was not being shown on search engine results. It was not responsive, and it was not so easy to read.
The new design is welcoming, with a larger base font and loads quickly (due to Gatsby). There is less crowding on the home page – but the contact key information can be easily found in both the footer and the contact page. The site uses React Helmet to fine tune the SEO. It is responsive – feel free to view on your mobile phone.
What is Next?
I hope you will join me as I learn more of the Why Gatsby. How does one explain Gatsby to a client and to other developers considering learning the Gatsby system? I also have plans to explore the variety of CMS (content management system) packages that work with Gatsby. Best way to follow my tech journey is via leoraw on Twitter.