Moving my blog from Netlify to Gatsby Cloud
I recently read Gatsby's blog post about Reactive Site Generation. The promise of reducing publish times from minutes to seconds has me intrigued. As an experiment, I'm moving my site from Netlify to Gatsby Cloud.
I was a little concerned that Gatsby Cloud might cost more, but its free tier is actually on par with Netlify's. As long as I don't go over 100 GB of bandwidth, I'm good to host this little blog for free.
I signed up for the service using my GitHub account, since I still want to use my GitHub repo to host my site.
Gatsby Cloud promps me to add a site under the "Sites" tab.
The next page asks me to add a site to the workspace. Since I already have a site, I'm going to click to import a Git repository and add an installation.
When I click "Click here to add an installation" a window from GitHub pops up and asks me where I want to install Gatsby Cloud, since I am a member of multiple organizations. Of course, I choose my personal GitHub account.
The installation page asks me if I want to install Gatsby Cloud on all of my repositories, or select repositories. Since I plan on just using this for my personal site, I'm only installing it on the repo I use to hold my Gatsby site.
After inputting my GitHub password, I'm taken back to the Gatsby Cloud interface, and can import my site.
On the next page, I can configure my site, connect integrations, and set any environment variables that I need for my site to run correctly. Once that's done, I can click "Build Site" at the bottom of the page.
Finally, I'm taken to my site page, where I can see my site building.
It took nearly ten minutes for my site to build the first time, and as you can see, I have a whole lot of SSG pages. Maybe I need to prune a few things. I know there are a lot of pages and images that are no longer used, but are referenced in my site.
Deployments for Netlify generally take between three and four minutes, but there are less files to upload on subsequent deploys.
Now that I have the site built and deployed, I need to update my domain name to point to Gatsby Hosting instead of Netlify. I thought about using Gatsby Cloud's hosting integration with Netlify, but because I want to use Gatsby Cloud's image CDN, I decided to switch over entirely.
I am using Namecheap's DNS service. I set my nameservers to Namecheap Basic DNS, and then clicked the Advanced DNS tab. Then, I added the A and CNAME records as instructed by Gatsby Cloud. I also removed my DNS records from Netlify.
I stepped away from my computer for a while, because it was taking a long time for the new DNS records to populate. About an hour later, I saw that the domains were working, and SSL certificates were automatically created.
At this point, I deleted my site from Netlify.
I decided to do a big cleanup of my site. I removed old files that are no longer needed, and did a bit of updating. I did this in another git branch, and pushed it to GitHub with git push origin. From within GitHub, I created a pull request. I want to see what happens with Gatsby Cloud's pull request builds. Usually, I would just merge and push from the command line, but this should create a demo build for me.
In the pull request page, GitHub shows me that the Gatsby Build Service is working to create a preview.
Once the preview build is done, the pull request will update with that information.
Since I was satisfied with my preview build, I merged this branch into master and the master build kicked off.
I'm not seeing the "nearly instantaneous" updates that Gatsby Cloud is touting, but perhaps that is because I updated many NPM packages in this cleanup. Hopefully, just adding a post will update much faster. I have a few posts that pop up errors for unoptimized code, so once I address that, I should be seeing faster compile times. I'm going to keep an eye on how to use Reactive Site Generation to my advantage, and who knows, I'm thinking about adding a CMS to my workflow.
I'll keep updating as I optimize!