Today I will be explaining how to set up a static blog site like this one, using Netlify and Jekyll.

Why bother with static?

There are lots of good ways to setup a blog. WordPress and Ghost come to mind. But a static blog has several major advantages.

First it is very easy to host, especially with Netlify. While WordPress and Ghost both have hosting options, you will either need to wrangle with a technical setup or pay a premium. Then if your blog ever gets making sure it scales up can be a pain. Static sites allow us to host our site in a way that is cost efficient and scales.

Second a static site eliminates most of your security concerns. All your hosting is a basic server so there is no need to worry that one of your WordPress plugins may accidentally rendering you and your users vulnerable to attacks.

Third it is very easy to customize using only frontend knowledge. If you know HTML and CSS you can alter your static site to your desires. If you use Ghost or WordPress, then you would have to learn NodeJs or PHP and become familiar with their backbends. Jekyll by comparison, is very simply and easy to learn.

Finally a static site lets you use the JAM Stack a modern system for efficiently building web sites and applications in a simple, secure and performant manner. This allows you to attain better security and separation of concerns by decoupling your frontend and backend while utilizing both custom and third party APIs to retain flexibility.

Why Netlify

Even for static sites, Netlify isn’t the only host out there. Static sites are quite portable and can be hosted on a variety of services, including GitHub Pages and Amazon Web Services. But Netlify stands out for its ease of use and the ability to serve your content from a custom domain with SSL for free. This is a great asset when getting your site started. It also allows you to easily scale and offers quite a few advanced features tailored specifically for static websites. Netlify is simpler than AWS and requires much less configuration. But it is also less opinionated than Pages allowing you to store your code on several platforms including Bitbucket (for free private repositories) or even just upload a folder for simplicity.

Set up the local site

Before we worry about getting anything up on Netlify and the internet we need to establish a local copy of the new blog. We can do this with a few steps.

  1. If you don’t already have Ruby install it from https://www.ruby-lang.org/en/ If you are running windows you may need to restart before you can use the newly installed software from the command line.
  2. We will also need git so if you don’t have it then install it using these instructions.
  3. Run the command gem install jekyll this will install the Jekyll static site generator.
  4. Navigate to a directory where you want to set up your static site.
  5. Run jekyll new site-name to generate a website. Alternatively, if you want a site that looks like this one you can run git clone https://github.com/gdg-managua/jekyll-mdl.git
  6. If you didn’t already clone your site from a git repo use git init and git commit -a to store all the files in a git repository. If you need more in depth instructions on how to set up the git repository take a look at this.

Getting it online

Now that we have a local git repository with the new Jekyll blog we are ready to put it online.

  1. First make an account at either Bitbucket or GitHub account. GitHub is more popular but Bitbucket allows private repositories for free. Either will work.
  2. Upload your repository to the service you chose. Here are the instructions for Github and for Bitbucket.
  3. Create a Netlify account if you don’t already have one.
  4. Go to app.netlify.com and create a new project. Select either the service you used above (GitHub or Bitbucket).
  5. Connect your accounts then select the repository you stored your project in.
  6. In basic configuration there will be a field called build command. Type in jekyll build. That way Netlify will rebuild the website form the source whenever you deploy.
  7. Set the public folder to be _site this tells Netlify that your public files are in that folder (as opposed to your source files).
  8. Change the URL from the default to something appropriate for your site. You will get a url like example.netlify.com

Next steps

Great, now you have a website online ready for experimentation. But you will probably want to add in a few more features for a production website like a custom url instead of having a *.netlify.com url.

Setting up a domain name

The first step to having your own domain name is to register one. There are many registrars to choose from but I will show you how to use Google Domains. The process should be mostly the same for any other register. I choose Google because its pricing is good and nearly everyone already has a Google account so you probably don’t need to sign up for anything new.

First go to http://domains.google.com/. You be required to verify your account but once you have done that you should be able to search for and purchase a domain name. The price for .com domain names at Google is $12 a year (some other registers are cheaper, at least for the first year).

Once you have purchased a domain you need to direct it to your site on Netlify. To do this you need to tell your register you want Netlify to host your site and tell Netlify what the domain name is going to be.

First let’s tell the register what we want by setting the appropriate DNS records. The kind of records we will be using are called CNAME records and allow us to direct a subdomain of our site to a certain location. For example, we could use www.ourdomainame.com or blog.ourdomainname.com any word works but www is most common.

Open the Google Domains console for the domain name you just registered then select the “Configure DNS” tab (to the left of the gear). To add the CNAME record scroll to the bottom. There should be an area titled “custom resource records”. From there select CNAME from the list of types then fill in the fields. The name field is the subdomain (eg www) and the data field should be the urn (no protocol) of your website on Netlify. The default TTL (time to live) should work fine.

Like many cloud providers Netlify can’t easily host using a “naked” domain name like ourdomain.com in order to work around this we will tell Google Domains to redirect any traffic heading to the naked domain to the subdomain.

Scroll up above the records and you should find something called “synthetic records”. To trigger the redirect, create a synthetic record of the type subdomain forward. Then have it redirect from your naked domain (leave the subdomain field blank) to your target destination. For example, ourdomainname.com -> http://www.ourdomainname.com be sure to include the protocol in the part it directs to.

Once you have set up the CNAME record and the redirect go to the Netlify control panel. From there go to the settings page and click the edit button next to domain. Enter the name of the domain you purchased.

When everything is set up it still may take up to a day for it all to work, due to the nature of domain names. Often it is faster, but sometimes any problems in the process simply require time to fix.

Enabling SSL (HTTPS)

Now we want to enable SSL (secure sockets layer) so that our visitors can use https to visit our website. This ensures that no one can eavesdrop on them while they view the website. It also gives us a boost in Google’s ranking algorithm. Luckily Netlify makes this very easy.

First make sure you have completed the previous step and set up a custom domain. If you haven’t then your clients should already be able to visit the https version of your site at “https://yourblog.netlify.com”. Go to your apps control panel at app.netlfiy.com. Then select the https tab. From there you only have to click once to enable SSL. Netlify will automatically generate a free Let’s Encrypt certificate for you.

Once you have set up SSL you have the option of forcing SSL. This causes anyone trying to access the insecure (http) version of your site to be redirected to the secure (https) version. This has several advantages. First it means all your users see the same version of the website which can be important if you use local storage (http and https pages don’t share local storage state). It can also help protect your users from downgrade attacks in which a man in the middle tries to cause them to use the less secure version of your site. But before you commit to this make sure the HTTPS version of your website is working properly.

Analytics with Google

The first step to setting up Google Analytics is to get an analytics key. You can do that by going to analytics.google.com and creating a property for your site. Once you have made a property you will be given a snippet of JavaScript code including your sites unique analytics key. The snippet should look something like this

  <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'Your-ID-Here, 'auto');
      ga('send', 'pageview');
  </script>

Once you have the JS snippet there are two ways to include it in your website. First you can use Netlify’s custom scripts feature. Go to the settings page on Netlify then scroll down to custom scripts and hit add. Name the script “Google Analytics” and copy paste in the JS snippet then hit save.

You can also insert the analytics code using Jekyll. Navigate to the _includes folder in your Jekyll installation and find the head.html file. Copy paste the script tag into the header right before </head>. It will be appended to the header in every post and page on your Jekyll site.

Either method works, but don’t use both on the same website.

Once analytics is set up you should start seeing pageviews on your Google Analytics console. in about a day.

Adding content to your blog

Posts in Jekyll are simply markdown files stored in the _posts folder. At the top of each file is a brief header delineated by three dashes where some metadata such as the post’s title is stored. Anyone who knows markdown can write a post on Jekyll and markdown is very easy to learn.

To make a new post just add a file to the _posts folder with a name in the format year-month-date-title-words where everything is lower case and connected by dashes. Then add in the header. Here is the example header.

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-06-18 12:46:55 -0700
categories: jekyll update
---

Simply change the date, title and category to be correct for your post. Some layouts may add additional bits of metadata such as an image for the post.

Then of course comes the hard part of actually writing your content. I won’t get into all the many tips and tricks for writing good blog content. There are probably about a million tutorials on that.

When you want to preview the post on your local machine you can use the jekyll serve command. This will build the site and start up a local webserver where you can view it.

When you are satisfied you can commit the post to got vita git add (path-to-post) then git commit. A text editor will be opened where you can briefly explain the nature of your changes (eg added a new post about so and so). Once you have committed the post you can push it back to GitHub or Bitbucket with git push origin master. Pushing it back to origin will automatically trigger Netlify to rebuild and redeploy the site if you set it up as instructed by this tutorial.