freeCodeCamp JAMstack examples

5 - Generating and serving localized content pages

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.

About this example

The 5th of our 6 code examples, this example builds on example 4 to generate more content in the site with the use of a static site generator first pulling content from a content API at build time. Now building out distinct content pages for each locale supported by the News API content source.

Here in the video, we build the logic to source news content from the News API feed, and generate each localised page on its own URL. Then we also use the static site generator to create a redirects configuration file which can route visitors at the Edge CDN to the site to the correct localized content page for them.

Local development

To work on this example locally, you can clone the repository and start editing, although there are a few pre-requisites:

# clone the repo
git clone https://github.com/philhawksworth/fcc-5-localized-news

# move into the working directory and install dependencies
cd fcc-5-localized-news
npm install

# build and start the local development server
npm start

# just run the build
npm run build

Clone and deploy

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.

Deploy to Netlify

Watch the video

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

JAMstack video

Other code examples in this series

More JAMstack resources to explore