Gatsby image carousel code#

A good example of this is Contentful, a cloud-based CMS that is simple to set up and commonly used in a stack with Gatsby.Īt the other end, you have your developer focussed CMS's. These require little to no maintenance, with the drawback being that they often have limited customisation, and can be expensive. On one end you get CMS's that require minimal work to get running and can be as simple as signing up for an account and pulling your content from the plug and play API. I find it easiest to think about CMS's on a spectrum. There are loads of Content Management Systems (CMS) to choose from these days, the most popular one, of course, being Word Press. This resulted in an incredibly fast, beautifully simple, SEO optimised website. Gatsby allowed me to build using React, a modern dynamic web framework, but when built transformed this into a directory with a single HTML file and my static assets. But I did not want the associated overhead of running such a site, and SEO was an important consideration from the outset. I am used to developing dynamic websites and prefer this form of web development.

Gatsby image carousel code#

When you build and deploy your website, it uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads due to its utilisation of service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. However, the magic of Gatsby comes from how it builds your website. This offers you many of the advantages of this form of development.

Gatsby allows you to build a site using a dynamic framework, that framework being React. Got it? Well, if not, don't worry, here's what you need to understand. Gatsby JS is a React-based, GraphQL powered static site generator. However, the content is, perhaps not surprisingly, static. Static websites on the other hand are often faster and perform better for SEO. Dynamic websites are far more difficult to optimise for SEO, and often come with a significant load time, especially if using client-side rendering. A dynamic website, on the other hand, is one that can display different content and provide user interaction, by making use of advanced programming and databases in addition to HTML.ĭynamic sites allow for a high degree of functionality, but this is not without a cost. Static websites are ones that are fixed and display the same content for every user. Websites are separated into two different types: static and dynamic. The first decision to make was should the website be static or dynamic? Static Vs. Whichever framework I chose was going to have to handle this to minimise website loading time, to avoid heavily impacting the performance of the site, which would, in turn, affect the SEO. The website, containing project overview and blog articles, was going to be heavy on image data. For this, I needed to use some form of CMS. The website was likely to be updated once or twice a week with new content, and so needed to be updated with relative ease. I have used angular for most of my web-based projects, so I wanted to use this project to improve my competency with React. I wanted to use a modern development framework based on either Angular or React. But two months ago, I had a break between projects and set myself the task of finally building this website.įirst, let's discuss a few requirements for the website.

I have been meaning to build my website for some time, but until recently have been too busy with other projects to give it the attention it deserves.