This repo hosts the landing site for Natural Essentials Inc. Check out the demo!
Our current site at https://naturalessentialsinc.com is hosted on, and generated by, GoDaddy. The advantage of this configuration is that it allowed us to use GoDaddy's CMS to create and maintain the site via their no/low-code interface. The site generated by this tool performed well on mobile lighthouse tests, but the desktop site's performance suffered, and "best practices" and accessibility scores were suboptimal for both versions.
- Performance: 95
- Accessibility: 45
- Best Practices: 79
- SEO: 92
- PWA: N/A
- Performance: 85
- Accessibility: 72
- Best Practices: 86
- SEO: 82
- PWA: N/A
We could probably make changes through the GoDaddy CMS and address many of these lighthouse scores, but, as this is, for the most part, a completely static site, and we had limited access to the GoDaddy CMS internally, it seemed an excellent opportunity to try out Gatsby, the static site generator and to dip our toe into the JAMStack.
- Download and install nodejs and npm if you don't have them running already.
- Install the gatsby-cli with
npm install gatsby-cli -g
- Clone this repository to your local machine with
git clone https://github.com/NaturalEssentialsInc/naturalessentialsinc-site.git naturalessentials
- Install development dependencies with
cd ./naturalessentials && npm install
- Start the development server by running
gatsby develop
- Navigate to http://localhost:8000 to see your local instance.
- Changes made to the
src
directory will be hot reloaded to see your work in real-time. - Run
npm run format
between changes to keep the code formatted and prevent errors.
- Create an account at https://netlify.com
- Choose to deploy a new site from git (with default settings)
- From "Site overview" --> "Build & deploy" --> "Asset optimization", choose to "Edit settings."
- Select "Minify CSS," "Minify JS," and "Compress Images" (bundling our CSS and JS causes us a performance hit in this case)
- To set up our contact form to email us, we need to set up a Mailgun account.
- Head to https://www.mailgun.com/ and set up an account there.
- You will have to link a payment card, but the free tier is very generous (6,000+/month).
- You can choose to set up a custom domain if you would like, but for our purposes, the essential parts are the "Private API Key" and the "Mailgun domain" (by default, starts with "sandbox," the "host" part of the path is unneeded).
- Now that we have our Mailgun account setup, return to the "Build & deploy" section of the "Site settings" page on our Netlify dashboard.
- From the "Environment" section, choose to add three new environmental
variables:
- MAILGUN_API_KEY (received when we set up our Mailgun account)
- MAILGUN_DOMAIN (generally starts with "sandbox")
- TARGET_EMAIL (this should be the email address where you would like to receive your contact form submissions)
- *Optional: our contact form will handle form submissions even if Javascript is disallowed. In these cases, the form submissions are collected by the "form" section of our Netlify dashboard. You may want to set up email alerts of new form submissions from here to handle cases where Javascript has been disabled in the browser.
Netlify makes CI with github a breeze. Simply push changes to your "main" branch and watch as Netlify automatically builds and optimizes your changes to be served directly from their CDN. After switching our site generator to Gatsby, we saw a big improvement in our lighthouse scores.
- Performance: 97
- Accessibility: 100
- Best Practices: 100
- SEO: 100
- PWA: Yes
- Performance: 100
- Accessibility: 100
- Best Practices: 100
- SEO: 100
- PWA: Yes
We saw improvement in every Lighthouse category, even earning a perfect score for our desktop site. Gatsby makes it so easy to create a PWA with a couple of plugins that we couldn't help taking that step as well. Gatsby and Netlify provided a turn-key solution to developing a static site that was both accessible and fast!