A2

Project Report: Static Site Generation and Content Management Overview This project leverages 11ty (Eleventy) and Contentful to build a static site that fetches content dynamically from a headless CMS and generates static pages. The project displays blog posts and projects, dynamically injected with metadata, featured images, and filtered categories.

Tools and Technologies 11ty (Eleventy): A simple static site generator used to create the website. Contentful: A headless CMS used to manage and store the content. Node.js: A runtime for building and running server-side scripts. Nunjucks: A templating engine used for rendering pages in 11ty. Project Breakdown Content Fetching The project fetches content from Contentful using the Contentful API. The following steps describe the process:

Fetch Data from Contentful: Using Node.js, the project fetches blog post entries from Contentful, including metadata such as title, slug, content, publishDate, and featuredImage.

Generate Markdown Files: For each fetched entry, a Markdown file is dynamically created in the project’s file structure. The metadata from Contentful is injected into the Markdown front matter, making it usable within 11ty. __ Featured Images:__ Images referenced in Contentful are linked directly in the Markdown files, and on the blog post page, the images are displayed with consistent styling.

Content Rendering The Markdown files are processed by 11ty to generate static HTML pages. Nunjucks templates are used to render the content into HTML format. The layout includes a dynamically populated blog page, which lists all posts, each displaying title, excerpt, publish date, and featured image. Blog post pages are built with consistent styling for text, images, and layouts. The navigation includes Previous and Next buttons for seamless content browsing. Styling and Layout CSS Variables are used to manage layout, such as setting a maximum width for blog post content and styling images to have a consistent size. The featured images are displayed in a fixed aspect ratio and styled to match the overall design. The pagination buttons (Next and Previous) are styled with clear differentiation, enhancing the UX for content navigation. Key Aspects of the Project Dynamic Content Management: The use of Contentful allows for easy management and updating of content without modifying the codebase. Content can be added, updated, or deleted from Contentful, and these changes will reflect on the static site upon the next build.

Seamless Static Site Generation: 11ty generates static HTML files for each blog post and the overall site. This ensures fast load times and optimized SEO.

Image Handling: Featured images are linked dynamically from Contentful and are consistently styled across the website.

__Running the Project __ __Install Dependencies: __ Run the following command to install the required dependencies: npm install npm install contentful

To generate the site and view it locally, run the following: npx eleventy --serve Building the Project for Production To build the static site for production, run: npx eleventy The generated site will be located in the _site directory, ready for deployment. How to Maintain and Update the Project Updating Content:

To add a new post, log into Contentful and add a new entry with the necessary fields (title, slug, content, etc.). Once the entry is added, run npx eleventy to regenerate the static pages with the updated content. Adding New Features or Adjusting Styles:

Modify the Nunjucks templates or CSS to adjust layouts, add new components, or change styles. Use custom collections to display specific types of content, such as filtering blog posts by categories or tags. Image Hosting:

Images are stored in Contentful, and their URLs are dynamically injected into the Markdown files. Make sure that all images used are uploaded to Contentful and are publicly accessible. Conclusion This project demonstrates how to integrate Contentful as a headless CMS with 11ty for static site generation. The solution provides a dynamic yet performant way to manage blog content, with the ability to easily update and deploy without requiring backend infrastructure.

To maintain the project, simply ensure that Contentful content is up-to-date, regenerate the static site using 11ty, and deploy the updated site to your preferred hosting platform.