How to Build a Free Jamstack Blog with Github and Netlify

To complete this guide, you are going to need a Netlify account and a GitHub account. Everything will work fine on the free tier of both platforms. There's no cost and no need to enter any payment details.

However, it's worth checking the pricing/plans of Netlify and GitHub to make sure you know exactly what they provide for free, and any limitations, e.g., personal projects only.

If you already have a Netlify account, then log in and visit your User Settings. Check you have set a password on the account, as you'll need it later on. Then jump to Step 3.

If you already have a Netlify and a GitHub account, then jump to Step 4.

Netlify is going to do all the hard work, publishing your blog on the web and managing your data.

1. Head over to Netlify and create an account using the Email button on the home page (see the image above). The form will ask for an email address and a password.

Your blog app data and contents will live in a GitHub repository*.

1. Sign-up for a GitHub account.

We've selected a specific Netlify CMS blog template to use with this guide. We chose it because it offers a good set of features without requiring any additional configuration. It is a fork of Erick Patrick's original.

1. Open https://github.com/sandy-wood/jigsaw-blog-netlify-netlifycms-template

2. Scroll to the bottom of the page.

3. Click the Deploy to Netlify button. This will open the Netlify page shown in the next step.

Now you are going to ask Netlify to deploy our template repository to a new repository in your GitHub account.

1. Click Connect to Github (see the image above).
2. Change the repository name (optional) and then Click Save & Deploy.

A site overview page will open when Netlify starts the deployment process. Wait a couple of minutes until the page changes to let you know your site is deployed.

A robot has invented your site's web address. The site URL in the image above includes the words happy-nightingale. Yours will be different, but just as strange.

Let's make a few changes

1. Click the Site settings button as shown in the image above.

The site name forms part of the URL for your site. In the image above you can see that the site name has been changed to sandys and Netlify has generated https://sandys.netlify.app as the web address.

1. Click the Change site name button.
2. In the pop-up form, enter your preferred name and click Save.

Stay on the Site settings page for the next step

You will need to register and login to your new site so that you can use it.

Netlify will handle user registration after Identity settings have been enabled.

1. Click Identity in the sidebar menu on the Site settings page.
2. Click Enable Identity as shown in the image above.

You need to grant Netlify access to your site's GitHub repository. This step may run more smoothly if you sign-in to GitHub first.

1. Click the Services link under Identity in the sidebar menu. Locate Services_ and Git Gateway. Click the Enable Git Gateway button.
2. Sign-in to GitHub only if requested.

To create an admin account for your blog you need to send yourself an invitation.

1. Exit the settings screen and navigate to Identity using the top menu (see image above).
2. Click Invite Users.
3. Enter your email address.
4. Click the Send Button.
5. When the email arrives click the Accept the invite link on the last line of the message (not to be confused with the Netlify link).

You should now see the home page of your blog. The URL in the address bar will look something like this:

https://sandys.netlify.app/#invite_token=HqvXf86d7PdiCFHYzM6raQ

There's an apparent bug in NetlifyCMS that means that you cannot add a password from this link. The path needs to be changed to include admin.

1. Change the link in your browser's address bar so that it includes admin/ as shown below, then press Enter/Return on your keyboard. A form will appear. Enter a new password and submit the form (see image above).

https://sandys.netlify.app/admin/#invite_token=HqvXf86d7PdiCFHYzM6raQ

You should now see the Admin view of your new blog and it should look something like the image above.

Switching views

The site Admin View lives at the same address as the Site view with the path /admin added. Opening a browser tab for each is an easy way to switch between the two. For example: https://sandys.netlify.app/ and https://sandys.netlify.app/admin

Changing content

Explore the interface to discover how to create and manage blog posts. The template has all the functionality needed to build a basic blog. It also has some more advanced features, including workflow and a search tool.

Deploys are automatic

When you make your first post you will expect to see changes in the site view. Remember that this is a static site? The changes you make need to be deployed to your GitHub repository. This is done automatically by Netlify, but it will take a couple of minutes. You can monitor the process in the Netlify Deploys view. You'll need to reload your site page to see the changes once they have been deployed.

How to use your own domain name

The sub-domain name provided by Netlify is free, but for a few dollars, you can choose your own. The cost to register some of the cheaper domain names is around $5 for the first year.

Finding a name that is not already registered is often the hardest part of this process. Head over to TLD List to find out what's available.

Making the change

After registering a domain name, visit Domain management in your Netlify settings and click the Add custom domain button.

Netlify will look up your domain. Click the Yes, add domain to confirm that you own the domain.

Ignore any warnings about https. Click the Domains link under Domain Management in the side menu. Then click Check DNS configuration alongside your domain's entry in the list.

A pop-up window will display the four Netlify Nameserver addresses that you need. Replace the default nameserver addresses at the registrar you have chosen with the Netlify addresses.

It can be difficult to find the nameserver settings on some registration websites. We used Porkbun because they are cheap and make it simple to find and change a domain's settings. If you're with Porkbun, then just follow the link shown in the image above.

Nameserver changes need to propagate across the Internet before the change will work. This usually takes a few minutes, but be prepared to wait up to 24 hours.

As a bonus, Netlify will automatically set up HTTPS for your domain. This encrypts communication between your site and your users.

Making site changes

You deployed your blog to a GitHub repository in Step 5. That is where you will find every file needed to create the site's style, structure, and content.

When any file is changed, Netlify redeploys the site automatically by default. There is a limit to 'deploy time' in the free tier. It's wise to turn-off automatic redeployment if you are going to make a lot of changes. You can preview changes without using deploy time, and only when you are happy with the changes, manually deploy the site.

Making changes can be done easily, once you know the purpose of the individual files. Edits can be made directly in GitHub. If you want to use your own development environment, take a look at this setup guide.

Don't worry about mistakes when making changes. Netlify keeps a record of all deployments. If your site stops working, then just redeploy an earlier version. No stress!

Change the blog name

Open your repository on Github and view the file listing. Click on the name of the file config.php. When the file is open, click the pencil button in the file header.

Change the content of lines 8, 9, and 10 so that the text in quotes is what you want for the site name, site description and author. Check that you have retained the single quote marks at the beginning and end of each of these changes. Don't change anything outside of the quotes unless you know what you are doing.

Scroll to the bottom of the page and click the Commit button. Netlify will redeploy the site. Within a few minutes, you should see the changes go live. Refresh or restart your browser if the changes don't appear.

Change the blog logo

The logo is currently a blue cube, but you can change it to anything you like. It easy to create simple shapes using Method. Save the file as SVG, and it will scale nicely.

Return to the file listing on GitHub and navigate to /source/assets/img. Click the file name for logo.svg and then the trash button to delete the file. Don't click Commit just yet.

Go back to the img folder and click the Add File button and choose Upload Files from the dropdown. Drag or choose your replacement logo.svg file. Then click Commit changes, and both changes will be made, triggering one new deployment.

Within a few minutes, you should see a new logo on your blog.

The blog favicon can also be changed. Use an online tool like favicon.io to create a new favicon. Replace the file called favicon.ico in the /source folder with the new version.

It may be free and bulletproof, but how good is your shiny new blog?

Head over to Measure to do some heavy testing. Enter your blog URL and run an audit to see the metrics.

In the results for sandywood.net some Accessibility aspects can be improved (see image above). These relate mainly to the visual design of the template. By the time you read this, those changes may have been made!

We hope you found this guide interesting. If you create a blog, let us know in the comments and we'll take a look!