Notes about Static Site Generators: Jekyll, Gatsby, Next.js

Last updated on 15 May 2024
https://jekyllrb.com/ "Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment." .. " GitHub Pages is powered by Jekyll, so you can easily deploy your site using GitHub for free—custom domain name and all."

Nice text tutorial about using Jekyll to create a blog site. The associated github repo is shared and one can run the app to see the blog site in operation. I have not tried out Jekyll coding but just browse-reading through the article and github repo and checking out the blog app, has given me some idea of how Jekyll can be used to more easily create static sites which use a shared layout. There is support for templates too but I don't know how extensive this support is, and whether the free templates collection is sophisticated enough for various static website needs. The article: Jekyll Tutorial: How To Create a Static Website, https://kinsta.com/blog/jekyll-static-site/.


Gatsby (software), https://en.wikipedia.org/wiki/Gatsby_(software) , "Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX (Markdown with JSX), images, and numerous Content Management Systems such as WordPress, Drupal and more.[1] Since version 4 Gatsby also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server."


Has minimal info. and so not so useful for a person new to Gatsby: Quick Start, https://www.gatsbyjs.com/docs/quick-start/

The tutorial starter page: https://www.gatsbyjs.com/docs/tutorial/getting-started/ - "The goal of this tutorial is to help you create a mental model for how Gatsby sites work by building and deploying a blog site using MDX. Along the way, you'll learn how to use Gatsby plugins, the GraphQL data layer, and more!"

The tutorial has 8 main pages (0 to 7). I browsed through it .... The basic knowledge needed seems to be: HTML, CSS, JS, Node.js, React and GraphQL. On top of this one has to learn Gatsby. VSCode is the code editor used in the tutorial. The tutorial builds a blog site.

Simple React code is used to create UI components starting with index page - https://www.gatsbyjs.com/docs/tutorial/getting-started/part-2/ . Gatsby Link component provide preloading performance feature (like Next.js, if I got that right). Layout component with children is covered. CSS modules are used.

Using an Image (responsive) plugin is covered in https://www.gatsbyjs.com/docs/tutorial/getting-started/part-3/  "In Gatsby terms, a plugin is a separate npm package that you install to add extra features to your site."

Getting data using GraphQL is covered in https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/ . It is somewhat involved but shows how one can get data from a config file and a list of (blog post) filenames from the filesystem. It does not seem to show how to get data from a CMS but there is figure showing CMS as one source of such data.

https://www.gatsbyjs.com/docs/tutorial/getting-started/part-5/ - covers MDX including how to write it, use plugins to pick up the MDX data from files which is used by React components to render it to page.

https://www.gatsbyjs.com/docs/tutorial/getting-started/part-6/ - cover file system route which seems to enable creation of links to pages which are files in the file system.

https://www.gatsbyjs.com/docs/tutorial/getting-started/part-7/ - covers GatsbyImage which "is for dynamic image sources, like if the image source gets passed in as a prop."
That finishes the main part of the official Gatsby tutorial. 

...

Nice top-level comparison of various approaches to website creation but don't know how accurate: Gatsby Tutorial #1 - What is a Static Site Generator?, https://www.youtube.com/watch?v=Qms4k6y7OgI, 10 min. 31 secs by Net Ninja in Feb. 2021.

...

15 May 2024 Update

I was able to resolve the issues mentioned below and have covered that in this post: Notes on using Next.js 14 with Pages router to generate static site from data returned by an API,  https://raviswdev.blogspot.com/2024/05/notes-on-using-nextjs-14-with-pages.html .

15 May 2024 end-Update


HOW TO USE NEXT.JS AS A STATIC SITE GENERATOR, https://pagepro.co/blog/how-to-use-next-js-static-site-generator/ , June 2023. As per the article, Next.js does not have any built-in data provider like Gatsby has GraphQL. But Apollo Client, https://www.apollographql.com/docs/react/ , seems to do the needful in terms of GraphQL support, for Next.js. The article also uses GitLab GraphQL API, https://docs.gitlab.com/ee/api/graphql/ . The article provides a link to a GitHub repo for the project covered in it. This repo could be cloned on local PC and tested.

I tried to code-along with the above article but ran into many issues. I think the main reason for these issues is that current version of Next.js is 14 whereas the above article is for an earlier version. Next.js 14 seems to have made quite a few changes in the area covered by above article. I decided to temporarily drop the coding-along work and review it after I do a second round of the official Next.js tutorial (as of now, I only have some exposure to Next.js programming but am not so comfortable with it like I am comfortable with React programming). However, I have given below some of the issues I faced and how I solved some of them and the last issue which I could not solve as of now, as that may be useful when I review this work:
  1. The file structure for create-next-app generated app. is quite different in what I get, from that shown in the article.
  2. In package.json, '"build": "next build && next export"' doesn't work. I had to use only '"build": "next build",'. Further I had to modify next.config.mjs to have, 'output: "export"', in its nextConfig const. Ref: Static Exports, https://nextjs.org/docs/app/building-your-application/deploying/static-exports. After these changes, the out directory was created on running 'npm run build'.
  3. The article states that we can run our app by 'npm run build' but in my case that simply builds the output files and exits. There is no server running to run the app. 'npm run start' seems to start the dev environment (as package.json was modified to have '"start": "next dev"' as per article instructions) and the dev app runs at localhost:4000. But I want to run the static build app with home page as index.html in out directory. I tried running Live Server on out/index.html but it seems to trip up on finding CSS files and images. 'npx serve@latest out' was suggested by the error message I got when I changed the relevant entry of package.json as follows "start": "next start", and then ran 'npm run start'.  'npx serve@latest out' seems to work.
  4. If 'npx serve@latest out' is running then 'npm run build' gives some error towards the end. Solution is to simply exit 'npx serve@latest out' before running 'npm run build'.
  5. Got the error ("getStaticProps" is not supported in app/."...) . Tried some stuff but that did not work. Decided to pause this work.
...

About JAMStack: https://en.wikipedia.org/wiki/Jamstack, 'Jamstack, previously stylized as JAMStack, is a web development architecture pattern[1] and solution stack. The acronym "JAM" stands for JavaScript, API and Markup (generated by a static site generator) and was coined by Matt Biilmann in 2015.'

WHAT IS JAMSTACK? – A GUIDE FOR NON-TECHNICAL LEADERS, https://pagepro.co/blog/what-is-jamstack/ , Aug. 2023. It states that Netlify made JAMStack a development philosophy and states further, " you don’t have to use JavaScript or API to build a Jamstack website". The article states that you can connect a Jamstack app. to a CMS to make updates "painless". [Ravi: Hmm. Does that mean user makes his website updates to a CMS and then the Jamstack dev. env. does a rebuild creating static pages including the updates and deploys it to the live server?] For small companies, WP may be a better option than Jamstack.

The above article states that the most popular tech. for SSG are Next.js and Gatsby and provide a comparison between the two. Gatsby is listed as easier, with a rich plugin ecosystem and good for small companies whereas Next.js is listed as being suitable for content-heavy websites.

Next.js vs Gatsby.js - Which one to choose and when? - Effective Product Development #0002, https://www.youtube.com/watch?v=jet2J0BOSdA, around 3 mins, by Pagepro in Feb. 2021. 

When To Use Jamstack & When Not? - Effective Product Development #0004, https://www.youtube.com/watch?v=7su6Fp3c9tI , 2 min. 39 secs. by Pagepro in Jun. 2021.

Interesting article that covers extracting WP blog posts data into Gatsby and generating a static site: Intro to Building Websites with Gatsby and WordPress (Fast and Static), https://kinsta.com/blog/gatsby-wordpress/ , Jan. 2024.

React Website Using Gatsby JS Tutorial - Responsive Project with Gatsby Image, https://www.youtube.com/watch?v=ThzUUdIVr_I , 1 hr. 44 mins by Brian Design in Sep. 2020.

How to Make a Headless WordPress Website in 2024 Using React and a Plugin, https://www.hostinger.in/tutorials/headless-wordpress , Mar. 2024

https://frontity.org/ ... Claims it can be an SSG ... Above article recommends it for using with WordPress as headless CMS.

Comments

Post a Comment