Yesterday evening (CET), a quite impressive news popped into Gatsby community: Kyle Mathews announced the release of Gatsby Builds. According to the his newsletter, this new service is the festest way to build Gatsby sites, and it can be up to 20x faster than other build solutions.
It also offerring sharable and protected preview environments to reviews apps before shiping them to prod, and automated Lighthouse performance checks for each builds.
Gatsby's performance is one of the main raison I enjoy building sites with it. But having to open to Chrome browser (I'm a Firefox user) to run a Lighthouse audit was not my cup of tea. Therefore my curiosity was piqued by this last feature and I had to try it.
Setup Gatsby Cloud
Using a Github repository
As I already mentionned, Gatsby Cloud requires a Github repository. I hope Gitlab will be supported in a near future, but for now here are the commands to migrate from a Gitlab repo to a Github repo
- Create a Github project
- In your local folder, add a new remote
git remote add github git@github.com:<username>/<reponame>.git - Pull last commits from origin
git pull origin/master - Push to the Github repository
git push github
Onboarding steps
During signin, Gatsby Cloud ask if you want to create a new project or use an existing one. I supppose if you choose to create a new one, it offers you to bootstrap your project using starters of its integrated headless CMS (Contentful, Sanity.io, Cosmic JS or DatoCMS). If you choose an existing project, you're asked to choose one from your Github account.
Then you can specify environment variables for your prod and preview environments, the website base URL, the production branch...
Send build result to CDN host
Once your build has been created, you can view it from Gatsby Cloud preview, but for production build it seems better to host the files into a CDN. Like for the headless CMS, a few hosting services are supported right now, including Netlify. 🕺
First impressions on Gatsby Builds
Do you remember last build of this website lasts 2'14"? Using Gatsby Build, it decreased to 1'16" !! It is not a 20x improvement, but the results are still admirable. According to Gatsby's blog post tihs improvement is due parallelisation of build phases usingcloud functions, and intense cache management so subsequent builds are dramatically faster. I admit they didn't lie on that!
Lightroom tests is also available for each build. From the build history page, you can compare the audit results to each others using the global scores and check if your recent commits improved or degraded the performances. In each build logs, you can also access the full report, as if you ran it from your own computer.
In conclusion, Gatsby Build keeps its promises. I think it is quite superfluous for such a small blog, but wish I can use it for a bigger website soon and benefit from its full potential.