Jan 2, 2022

Building my website with gatsby contentful and deploying with netlify !

By Ashish Patel
3 min read

My website was primarily serving from PHP for the last couple of years. For blog purposes, I created a custom admin panel with PHP. I always wanted to switch to modern tech stuff like react or some headless CMS for managing the content of the website. Primarily reason being making the website more manageable and having an auto-deployment solution. Realy I was tired of uploading files to cpanel manually and that is kinda messed.

Why Gatsby?

Gatsby is so far the most popular static site generator with great community support and a number of plugins. Being built on top of react, it gives you all the powers of react that is also a plus if you're considering gatsby, also I wanted to use contentful along with gatsby and gatsby has something like gatsby-source-contentful which makes it very easy to connect with contentful and source data from.

Blog Embed Image

SEO: When building a website you always want it to be identified by search engine crawlers and gatsby is well proven for that, it uses react-helmet to insert required meta tags in all the pages of your site, gatsby takes care of putting it inside the right place while generating your site.

Speed: Since gatsby generates all the static file and store it on the /public directory which gets served when visitors make a request to the URL, so basically it's all pre-generated static files get served to visitors so it makes the website blazing fast since we are not fetching data from any database or API in request time, its all pre-generated pages.

Contentful as CMS

Being a cloud-based headless CMS you don't have to worry much about the integration with front-end applications you can just utilize contentful's blazing fast APIs and you're good to go.

Blog Embed Image

Now coming to using APIs, making API calls, and managing it can be a pain. So that's where things get interesting with gatsby, as I already told you that gatsby has something like gatsby-source-contentful which actually takes care of sourcing data from contentful. It sources all the data from contentful at build time and makes it available to gatsby's graphQL server. Yes! gatsby has the graphQL support as well, so you just have to write a query in your gatsby react component and your data will be available to your content

Deploying with Netlify

As I already told you that gatsby generates all the static files which can be directly served to visitors, so actually don't need anything in the backend to process files, you can place all the statically generated files at server storage and serve it. So in this case netlify becomes the best solution for hosting a gatsby site, and netlify has the free tier plan as well :)

Auto-Deployment: By connecting your gatsby repo to the netlify you can actually trigger the build from netlify by just pushing the code to your repo, which again makes it very seamless when it comes to deployment.

Blog Embed Image

that's me signing me off for today, if you have any queries free feel to reach me at aspatel808@gmail.com