• Waht we work with:

  • JAMStack

    • • "Jamstack" was originally cased as "JAMstack" where "JAM" stood for JavaScript, API & Markup.
    • • A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup

  • 11ty

    • • Eleventy (also called 11ty) is a simple yet powerful static site generator. It uses JavaScript to transform data and templates into HTML pages.
    • • Eleventry is a content-driven sites.
    • • Since pages are generated ahead of time, they can be served as fast as possible from a Content Delivery Network (CDN). Eleventy also generates no client-side JavaScript, which helps your site to load faster.

  • Nunjucks

    • • template language
    • • Nunjucks is a full featured templating engine for javascript.
    • • You can use Nunjucks code to generate the HTML for pages and components.
    • • You can also change the HTML that’s generated by passing options into the Nunjucks code.
    • • If you use Nunjucks, your application will be easier to update when a new version of Frontend is released.
    • • To use Nunjucks, your application and any frameworks that support your application must use Node.js.

These are the starting files used by Kevin Powell to create a personal blog site for the Codementor DevProjects Challenge, Create a fast and secure blog using JAMStack. You are free to use them however you want to get started with the challenge, if you'd like to start working on creating the site without worrying about the content itself.

The provided files are finished pages using regular HTML and CSS. The HTML files can be broken down into peices, and used to build out the different templates and partial files using a templating language of your choice.

The styling of the pages is already complete. That said, the design-files folder contains both a Figma file, and .jpg of a design if you want to try to build it from scratch. You do not need to use this design at all either, it depends on how you wish to approach the challenge.

The src folder contains files so that you can get your project up and running without worrying about content for posts/articles. That folder contains:

• HTML files to use as a base for the different page layouts. These can be turned into the templates that will be used.
• CSS file for styling the pages
• 5 blog articles in the blog folder
• images and a logo in the assets folder

The articles are written in Markdown, and include Front Matter. Depending on the Static Site Generator you use, it is possible that you will have to modify these a little if you wish to use them.

As mentioned, these files are here to help get started with a DevProjects challenge. Please visit the challenge page to learn more about the challenge.

You can watch this video to see how Kevin uses Eleventy, Netlify, and Netlify CMS to create a full-featured blog site built entirely with static files.