“Too often, feeling intimidated becomes our excuse not to be awesome.”

- Scott Stratten

There are various reasons for owning a personal blog, such as, creating a personal online brand, sharing your knowledge, refining your writing skills to name a few.

Building a blog doesn’t have to be difficult, you can start your blog in less than 30-minutes.

In this tutorial, I’ll show you how to set up a free, performant and secured serverless JAMstack blog with Jekyll and Netlify. If you already have a Jekyll site, you can skip straight to 3. Deploying to Netlify.

Disclaimer: The author is not affiliated, associated, authorized, endorsed by, or in any way officially connected with Netlify, Jekyll Themes, or any other products/companies mentioned in this tutorial.


What is JAMstack?

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

JAMstack stands for JavaScript, APIs, and Markup. It is a way of building applications that delivers better performance, higher security, lower cost of scaling and better developer experience.

What is Jekyll?

Jekyll is a simple static site generator. It takes content written in Markdown or Textile and Liquid templates and produces a completely static website ready to be served by a web server.

What is Netlify?

Netlify is the ideal cloud hosting platform for building serverless sites. It comes with a feature-packed starter plan that includes custom domain feature, HTTPS, continuous deployment, global CDN, and 100 GB bandwidth for free. You can even have add-ons to run lambda functions, authenticate users and many more serverless functionalities.


This tutorial assumes you have Ruby, RubyGems, Bundler, Node, NPM, and Git installed. Also, you have access to a bash shell.

1. Choosing a Jekyll theme

You can create a new Jekyll project or choose an existing theme. We are going to use Type on Strap theme in this tutorial.

Type on Strap

Go ahead and fork the Type on Strap repository or generate one from the template as jamstack-blog.

Open your terminal and clone the repository:

git clone git@github.com:<username>/jamstack-blog.git

If you wish to use a different theme, you can choose one from the sites below:

2. Serving Jekyll blog locally

Now that we have decided what theme to use, let’s get the Jekyll blog running locally.

Install Jekyll

cd jamstack-blog
gem install jekyll

Install the theme’s dependencies

bundle install

Run the Jekyll server

bundle exec jekyll serve

This command generates a static site from the Jekyll theme into _site/ directory and starts an HTTP server to serve the content.

Let’s launch the browser and visit That’s it! Pretty easy right? The next step is to deploy it to the cloud.

3. Deploying to Netlify

We’re going to create a new site on Netlify using the CLI.

Install Netlify CLI

npm install netlify-cli -g

Login to Netlify

If you haven’t registered a new Netlify account by this point, go ahead and do so now.

netlify login

Create a new Netlify site

Make sure you are still in the Jekyll theme directory and run the command:

netlify init

You will be prompted to creates a new Netlify site from the current directory or links the directory to an existing Netlify site. Go ahead and choose Create & configure a new site. Enter your team name and site name. Specify jekyll build for the build command. And the directory to deploy is _sites/.

The command triggers Netlify to create a new site and deploys the master branch of your git repository to Netlify. It also tells Netlify to subscribe to your git repository’s git push events. That means whenever you make a change to the master branch, GitHub will notify Netlify to deploy a new build.

Netlify CLI

Tada! Your site is live now! Easy peasy. But wait, we’re not done yet. If you visit your Netlify site, you will discover the site does not render correctly. Let’s fix it!

4. Customizing the theme and continuous deployment

The issue we saw earlier was because the site’s URL is incorrect.

Open _config.yml file and update baseurl and url configurations to point to our jamstack-blog Netlify site.

baseurl: "/"
url: "https://jamstack-blog.netlify.com"

Save the changes, commit and push:

git add _config.yml
git commit -m "fix: Update site url"
git push

If you have been following the tutorial closely, you should know that Netlify is deploying the new change now. Let’s open Netlify admin interface and confirm this:

netlify open:admin

Scroll down to Production deploys or click on Deploys tab, you should see Netlify is preparing for a new deployment. Give it a minute or so for the new build to be deployed.

Once deployed, refresh the page and the blog should be beautifully rendered now.

JAMstack blog

We’re done! You may customize the theme further or play around with the Netlify admin panel.

Let me know how it goes for you or if you encountered any problems in the comment section below.