Something I wanted to add to Tenstars was a Gatsby blog. Having a blog is a great way to communicate with users about your project, roadmap and topics that are important for your clients. Or at least interesting, like this one, not directedly related to user retention or churn rate fighting.
Gatsbyjs is one of the most cherished tools in my belt. It does a complex job easy, it is efficient, open-source and it is based on React. But I am cheeky, I wanted to serve a Gatsby site from a Netlify deployment, at a URL like /blog, a blog directory.
Why not deploying directly in a subdomain?
The main reason is SEO, plus I'd like to avoid the domain fragmentation that sometimes occurs when a project grows. Having several different subdomains for each facet of the product, leading to less cohesive user experience.
The "little" challenge was that I am already using a Netlify instance for the front-end. How can I serve the gatsby site as a blog directory of the main instance? I'll show you the way to do it.
This is the chart of our tech stack now:
You need to be able first to deploy your gatsbyJs app and your React app in Netlify, in two different instances. Both under the same account, this is important. I am not gonna expand into how to do it, as it is beyond the scope of this post. Let's just say, that I choose a WP as the backend data source for the blog. You can decide instead to use the Netlify CMS or any other data source. In this case, the decision was to use WP as most people are familiar with it and makes it easier to delegate and distribute the handling of the blog to other members of the team.
Once you have that, we need to tell Netlify main instance (A, domain.com), we want to serve the B instance when there is a request for "/blog". In order to do so, Netlify has a couple of options. I decided to go for using a _redirects file. You place it in your /public folder, adding the following rules:
/blog/* https://your_gatsbyjs_instance.netlify.com/:splat 200!
/blog https://your_gatsbyjs_instance.netlify.com/ 200!
// This rule is the one that helps the routing to the react app
/* /index.html 200The order is important as they are executed sequentially. We can check if it is indeed serving the instance B. If it does, we can move to the second part, how the GatsbyJs is generated when deployed.
Go to your gatsby-config.js change the path value. As well as module.exports > site metadata, change the values for siteUrl and URL. Use the value you want to use as the final destination for those files, "https://your_domain.com/blog". In the same file, at least if you are working with the WP (gatsby-source-wordpress), change the options > searchAndReplaceContentUrls > replacementUrl, and add the same value.
How do you configure the Netlify build?
Change the default build instruction for "gatsby build".
That's all! you should now see your gatsby blog being served in the directory of your main domain.
