You might be wondering, what is headless or why the heck WordPress would be headless? Well, headless means without the built-in front-end feature (themes) or decoupled front-end of any website. In recent times, static site generators have gained a real momentum and consideration. It is because of some of the benefits those offer. The first one is speed, yes it’s insanely fast! Secondly they offer a great boost in Search Engine Optimization. Thirdly, security. Since the production build version of any static website is simply html, css, js and it does not require a server, the site is more secure out of the box. Also hackers won’t know if you’re fetching your data from a CMS like WordPress, or Drupal or Contentful. So basically you can completely decouple your back-end from the front-end. You can also use a separate sub-domain for accessing the back-end and the primary domain to display the front-end.
Practical Use-cases
Now you might be wondering, well is it possible to create a real world website rather than just a blog that uses Markdown files to create and display posts? The answer is absolutely yes! You can create real world websites for your personal blogging, portfolio, business, agency, ecommerce websites, simple documentation sites and so on. You can use Google Analytics, create sitemaps, add search, contact forms, things you need to measure your success.
Optimizing a WordPress Site
Well, it’s a nightmare, I hope you’ll also agree with me. Getting the perfect score in Google PageSpeed Insight, or in GTmetrix or in Pingdom Tools seem an impossible task. I guess you’ve spent countless hours like me to figure out how you can eliminate render-blocking resources and optimize above-the-fold contents, optimize and compress images without breaking the website. Perhaps you’ve also mixed and matched different plugin configurations, removed different caching plugins, installed another and the process was on until you found at least a score that is higher than 10 or you simply gave up. In the end you’ll find out that you’re spending a huge amount of money to optimize your website and purchase a more expensive hosting solution for speed. To your rescue, Gatsby brings the speed and score back to where it should giving you a peace of mind.
How does it Work?
In this post I’ll talk about Gatsby, a static site generator and I recommend visiting Gatsbyjs to see how it works. I’ll try to explain how it works for WordPress as the data source. We all know WordPress is the most popular CMS in the world. People from a variety of niches use and love wordpress because of it’s simplicity to use and a very little learning curve. WordPress is open-source, maintained and updated regularly and it has a huge community to support it’s users. Not to mention the vast themes and plugins library it has.
WordPress offers an awesome REST API which is used by thousands of developers and designers to build plugins and themes. It offers all the endpoints that you and I need. If you have custom post types or are using advanced custom fields, no worries, you’re also covered. There are free plugins available which enables the REST Route for custom posts so that you can access the data as you like.
Gatsby uses GraphQL to fetch the data from Content Management Systems and allows you to build queries to retrieve the data and use it in posts and/or pages. Since it fetches the data from a json/xml file so it’s very fast and does not have to travel back and forth to the server.
Gatsby uses React so you do almost everything in Gatsby that you can do in React. The component system is really helpful to organize your website’s structure and files, so that you can separate layouts, master pages/global defaults, posts, custom posts, individual components easily and reuse them whenever you need.
Gatsby uses it’s own plugin system and has a fantastic collection of plugins. It’s image compression and optimization plugin is phenomenal and offers best optimization possible.
For styling page/post templates, layouts you can use regular CSS, SASS, Styled-components, the choice is yours. If you want to cut down design time even further, you can purchase ready made HTML5 or CSS Grid templates and create separate components as your fancy. Also you can hire a Freelancer to convert your PSD designs into HTML or CSS and specify to develop different components like Buttons, Call to Actions, Headings, etc. separately with their own css styles for making it easy for you to convert them into Gatsby components.
Ending Thoughts
Speed is the way to the future, I’ll suggest my clients to use Gatsby. Clients do not have the time to dig in and find out what is best for their website, all they want is a modern website with good ranking in google and a significant boost in their business no matter what technology you use or what security measure you employ, it’s your job and they’re paying you to do it. They also want an easy to use user interface to write/post their articles/news, well you have it at your fingertips, right?
