I’m thrilled to announce a new Quema Labs! 🎉
Quema Labs started on 2012 and this is the 4th major redesign of the site, long awaited it features a more modern, clean and simple design.
But by far the more important change is that, Quema Labs is now a complete Gatsby site using WordPress as a Headless CMS.
This makes the site blazing fast because all the pages are static HTML files that are created at build time.
What is that Gatsby thing?
Ok, first let’s talk about Gatsby and why is awesome.
Gatsby is a Static Site Generator using React and GraphQL, this means that you can create a React app and then Gatsby instead of doing Server Side Rendering, creates all the necesary pages into already rendered HTML files by running a build script.
This way you end it up with a blazing fast static site that you can host almost any were and at an extremely low price.
Headless WordPress, what’s that?
Using WordPress as a Headless CMS is a term for saying, that here in Quema Labs we are using a regular WordPress site only as a Content Management System, we are not using WordPress as a front-end site.
Thanks to the REST API and the wonderfull plugin WPGraphQL, we can extract all the necessary data from our old WordPress site, such as pages, posts, our themes for sale, etc. and then use Gatsby to render all that on HTML files.
For example, if you go to our Themes page:
This actually and HTML file created with React and Gatsby, fetching our Custom Post Types from our WordPress site using GraphQL.
Same goes for every pages on Quema Labs, it is content extracted from a WordPress site and converted into static HTML files.
That’s why if you navigate the site every page will load almost instantly.
Let’s talk about Hosting
Our site is hosted on ZEIT Now, which is a Zero Config Static Hosting.
They also have a zero config support for Gatsby apps, so all you have to do is upload your site and you will get your Gatsby app running with a global CDN, Free SSL certificates, GitHub integration and for $0 dollars.
Yep, that’s right they have very generous Free Plan that, at least for now, is more than enough for Quema Labs, so now we have a much faster site for free.
For our Headless WordPress site we are using another great hosting company, Cloudways.
This is a Managed Cloud Hosting, this means that they take care of all of the server settings. We are using the cheapest server around $10 per month.
Since the WordPress site doesn’t receive much traffic there is no reason to have a bigger server, you can use any option out there, even a free WordPress hosting will work.
Conclusions
I’m really happy how all the developer experience was for WordPress & Gatsby. I can see a bright future for new and more complex projects with these two tools.
Although that generating a static site is not suitable for every website, I see this trend growing in the near future.
I will be posting more about Gatsby & WordPress together from my upcoming projects, including any new feature here in Quema Labs.
