Create a fast and secure blog using JAMStack

With performance being at the forefront of developers minds, you’ll be creating a site using JAMStack, which means your website will be super fast and will have better security, among other benefits.

You’ll be using a Static Site Generator (SSG) to create a personal blog, including featured articles on the homepage, an articles page with pagination to older content, and individual blog posts, all without a database.

• Use a Static Site Generator
• A home page
• An ‘articles’ or ‘blog’ page
• Individual page for every article

Here's a template repo on GitHub you can use for a starting point if you wish. The HTML/CSS is already finished, and also includes five blog posts written in Markdown. If you use this template, you would need to convert the HTML files to template files for the SSG.

Extra challenge:

• Integrate a CMS
• Create a portfolio and portfolio items along with the blog

Static Site Generator

There are a number of Static Site Generators. You can choose any SSG depending on what you are most comfortable with or want to learn more about. Here are a few of the most popular SSGs:

• Eleventy (vanilla JS)
• Gridsom (Vue.js)
• Gasby (React)
• Hugo (Go)

Templating language

One of the biggest hurdles of learning how to use an SSG is also learning a templating language for the HTML at the same time. Different SSGs support different templating languages, so do make sure to read the documentation of the SSG you’ve chosen. Some, like Eleventy, support a very wide range of templating languages, allowing you to pick the templating language of your interest. Here are some examples:

• Nunjucks
• Liquid
• Handlebars
• Mustache
• EJS
• Haml
• Pug

Hosting

Because we’re working with static files, the site can be hosted for free! Whatever you choose, the easiest way is to have your project on GitHub and then link that repo to either Netlify or GitHub pages (in the case of Netlify, you can also use GitLab or Bitbucket as well):

• Netlify
• Vercel
• GitHub Pages

CMS

• Netlify CMS
• Sanity

• What is Jamstack?
• JAMstack WTF

You can learn a lot by building the entire thing from scratch, but if you are newer to web development, it can also be a bit overwhelming to do everything starting from zero. There are many templates you can start from. If you find yourself overwhelmed at first, see if you can create a personal website by using a template first to start understanding the smaller components of a website first.

Sanity has many starter projects that you can start from if you want to use them as your CMS.

If you are looking to go with Eleventy, the site 11ty.rocks has a few different templates, as well as additional plugins for Eleventy.