In case you haven’t heard about it, Gatsby is the most recent scorching factor in static website mills. Whereas many static website mills (SSGs) use templating languages like Handlebars or Mustache, Gatsby makes use of React, serving to contribute to its “blazing quick” declare.
Having by no means used an SSG earlier than (though I’ve examine them), and with very restricted expertise with React, what higher strategy to dip my toe into the water than utilizing Gatsby to publish my model new weblog (this very one, in reality!)?
Getting began
It seems that getting began with Gatsby is fairly simple. The Gatsby website contains a incredible, step-by-step tutorial that walks you thru getting your first website up and operating (even right down to deploying), and incorporates a wealth of sources for whenever you’ve mastered the fundamentals. You don’t want any prior expertise with React, though working with Gatsby positively made me need to be taught React to take full benefit of its energy.
One factor that prohibits me from publishing aspect initiatives is the considered configuring an entire construct setup with Gulp, webpack, and so forth. only for one thing small. That is the place Gatsby actually appeals to me. Gatsby supplies a complete out-of-the-box construct setup. Yep. Run gatsby develop and instantly you may bypass all that configuration and begin constructing cool stuff within the browser (with stay reloads). Run gatsby construct and your manufacturing code is optimised (together with progressive picture loading and code splitting, amongst many different options) with completely no effort in your half in any way. You might feasibly get a small, performant website constructed and deployed in simply minutes. You may as well add a customized webpack config if you could.
CSS
There are two choices in relation to writing CSS on your parts: CSS-in-JS (utilizing libraries comparable to Glamor and Styled Elements) or CSS Modules. As I really feel much more snug writing “conventional” CSS, I opted for the latter. CSS Modules are actually fascinating, and never tied to Gatsby. Types are scoped domestically by default and distinctive class names are generated programmatically, which means you don’t get the clashes with naming and specificity that you simply generally get in conventional CSS, and you may compose new selectors from others. I really feel like I’ve solely scratched the floor of CSS Modules, and am trying ahead to experimenting additional.
(Aspect observe: This doesn’t imply I’ve an issue with conventional CSS, or that I’m advocating CSS Modules in each situation! Lots of the so-called “issues” of CSS are literally right down to misuse or misapplication. Nonetheless, CSS Modules and CSS-in-JS are good to learn about, and might be helpful instruments to have in your arsenal.)
Plugins
There’s a entire ecosystem of Gatsby plugins that you would be able to choose and select to tailor your venture. I’m utilizing gatsby-plugin-sass to allow me to put in writing Sass as an alternative of standard CSS, gatsby-transformer-remark for markdown information and gatsby-plugin-typography which units you up with some good typography combos with minimal configuration. Authoring your personal plugins and contributing to the Gatsby neighborhood is inspired, if that’s your bag.
Information
You might in fact onerous code all of your content material, nevertheless it’s doubtless you’ll need some kind of dynamic content material in your website.
Gatsby’s knowledge layer is powered by GraphQL, and the tutorial walks by means of how you can construct database queries with Gatsby’s GraphiQL software. It’s very visible, exhibiting you precisely what your database queries will return, which for somebody like me (who finds something database-related slightly scary) is a blessing.
I write my weblog posts in markdown information, however you could possibly configure Gatsby to work with Github Pages, or the CMS of your alternative for a greater editorial expertise.
Deployment
After you’ve run the construct command, Gatsby permits near-instantaneous deployment by means of Surge, Netlify and others. I arrange my internet hosting with Netlify – run gatsby deploy, arrange a Netlify account and also you’re good to go. You possibly can then configure Netlify to auto-deploy everytime you push to a repository. Netlify supplies an easier and extra useful expertise than different internet hosting suppliers I’ve used, with useful documentation, taking all of the stress away from launching a website!
In conclusion
I totally suggest giving Gatsby a go should you’re on the fence about making an attempt a static website generator and need to get a easy website up and operating rapidly and simply. The quantity of thought that’s gone into each facet of the onboarding course of and the developer expertise is totally incredible. And, have simply obtained a shed load of seed cash to launch as a startup, it’s solely going to get higher.
