This repo holds one of a series of examples of JAMstack sites from a freeCodeCamp video. The video, "Introduction to JAMstack" is available to view for free on freeCodeCamp.
The 4th of our 6 code examples, this example builds on example 3 to generate content in the site with the use of a static site generator first pulling content from a content API at build time.
Here in the video, we begin to source news content from the News API feed, and use this in our generated site.
To work on this example locally, you can clone the repository and start editing, although there are a few pre-requisites:
- NodeJS and NPM
- A free Netlify account
- A free newsapi.org API key
# clone the repo
git clone https://github.com/philhawksworth/fcc-4-build-with-api-data
# move into the working directory and install dependencies
cd fcc-4-build-with-api-data
npm install
# build and start the local development server
npm start
# just run the build
npm run build
If you wanted to quickly clone this repository and deploy it as a new site on Netlify you can click the button below for a rapid start. This will give you a ready-made CI/CD pipeline linked to your git commits.
For a better understanding of what this example is and why it exists, you can jump directly into the video at the point we are discussing this example
- Example 1 - All simply static
- Example 2 - Changing the DOM with JavaScript
- Example 3 - Introducing a static site generator
- Example 4 - Generating pages from a content API (👈 you are here)
- Example 5 - Generating localized pages, with geo-IP routing at the CDN
- Example 6 - Client-side rendering targeted API content
- jamstack.org - More info and resources
- Official JAMstack slack - conversation about JAMstack and web development (come on in!)
- Modern Web Development on the JAMstack, O'reilly, 2019 - Book on building websites with the JAMstack. Available as a free e-book.