ExploringTrends: Jamstack Websites

This project is about trying out some of the latest trends in web development by:

• Creating a Jamstack portfolio (Actually two :D).
• Testing and comparing two different frameworks: - Gridsome vs Gatsby-
• Connecting them to a Strapi headless CMS.

Relevant technologies used in this project

• React
• Vue
• Gatsby
• Gridsome
• GraphQL
• Strapi
• TailwindCSS

The result

Two minimalistic and hackable starters to create a portfolio with a CMS to publish your content in Markdown.

Features

• UI easy to customize with TailwindCSS.
• Publish your content out of the box with the defined schema or customize all to your preference.
• Responsive design.
• Superfast image loading and link prefetching.
• Near 100, 100, 100, 100 score on Google Lighthouse.
• Main page and dynamic page generation for each project created.

Setup the project locally

1. Clone the repository

git clone https://github.com/RaulColino/exploringTrends-JamstackWebsites.git

2. Run the backend

Go to the folder strapi-backend and open a terminal. Execute the following commands to install the dependencies and run your server

npm install
npm run develop

3. Run the frontend

Gridsome: Go to the gridsome-frontend folder, open a terminal an run:

npm install
npm run develop

Gatsby: Go to the gatsby-frontend folder, open a terminal an run:

npm install
npm run develop

Gatsby is running here: http://localhost:8000

Gridsome is running here: http://localhost:8080

Strapi CMS is running here: http://localhost:1337/admin

Example admin: raul colino mail@example.com 12345Abc

References

https://gridsome.org/docs/

https://www.gatsbyjs.com/docs/tailwind-css/

https://strapi.io/blog/build-a-static-blog-with-gatsby-and-strapi

https://www.gatsbyjs.com/docs/debugging-cache-issues/

https://graphql.org/learn/

Credits to

Russell Heimlich fo the image generator