Back to all blogposts

Static site generators? Let’s build a website from scratch! (2/3) – deployment with Netlify

Andrzej Herok

Andrzej Herok

Operations Manager

Modern static site generators are nothing like the clumsy tools you might have used in the past. They can be used to generate elegant and blazing-fast websites. That’s exactly what we did in the first part of this tutorial, using Hexo. This time, we’re going to deploy our freshly created static website. What is the best way to go about static site deployment?

If you haven’t yet read the first part of my static site generator tutorial, I highly recommend you do that before proceeding. In the first part, I talked about the nature and benefits of modern static site generators and walked you through creating a simple website with one. This time, we’re going to deploy it. I will also show you a really great tool that can be used to do much, much more than that.

Basics of static site deployment

We already know that the website we’ve created is just a bunch of static files. This allows us to push it to literally every web server on the Internet.

Although Hexo tool contains deployment commands, we want to make it even fancier, without having to run the deploy command manually. In this scenario, we’ll use the excellent Netlify CMS platform, which has a few interesting advantages over regular static file hosting.

See also: The best CMS comparison

For other alternatives, there’s a quick-and-easy solution based on Firebase Hosting. You could also try Heroku (free tier) or even just push the files to S3 cloud. Another reasonable solution is Github pages, which also works using static site generators underneath.

Static site deployment with Netlify

What’s so special about Netlify that I consider it worth a try? Having in mind that our website is Git-driven and managed by editing text files, let’s think of a typical editorial flow:

  1. Create or edit a post.
  2. Commit and push the change (this is an optional step, although we’re cautious about our change history, aren’t we?).
  3. Generate new HTML code (using the hexo generate command).
  4. Deploy to the target machine (using either hexo deploy or good old FTP).

Seems easy, isn’t it? Well… yes. But would it be this easy for a non-technical content manager? Are all your customers familiar with a computer terminal, Git & probably a few other tools required to do all that? Doh…

Here comes Netlify – a hosting provider that facilitates automating tasks for serving static websites, but limits the configuration and required work to a bare minimum. And it does so really well!

All you need to know is how to git-push your changes, and everything else will be handled automatically for you.

For our next steps, we’ll assume you’ve pushed the code to a remote repository. We’re going to use GitLab for this. It will come in handy in the next part of the tutorial.

Let’s get going – there are only a few steps to configure automatic deployment for our website:

  1. Create an account on Netlify.com.
  2. Create a new project and connect your GitLab account via OAuth dialog.
  3. Select the repository that contains the project.
  4. The next step is basic configuration: select the proper branch to be automatically deployed and configure build command. Netlify has already guessed that we’re using Hexo so we can leave it as is.

Hexo static site configuration with Netlify screenshot

  1. Wait about 1-2 minutes for the build process to finish (you can see the “Site deploy in progress” message)
  2. … and here we are! Our new website is live! You can check it out by clicking the link Netlify has generated for you.

Creating/adding a new site to Netlify for deployment screenshot

Let’s see what happens when we add new content to our “second post” file and push changes to the repository:

title: My Second post!
date: 2020-04-01
tags: [welcome, gallery]
images:
  -
    alt: First image
    url: http://placekitten.com/200/300
  -
    alt: Second image
    url: http://placekitten.com/210/315
  -
    alt: Third image
    url: http://placekitten.com/220/330
---
This is a test for my new Hexo website!
Tutorial on [TSH Blog](https://tsh.io/blog) rocks!

Now, if you commit and push the changes to the repository, you’ll see that Netlify automatically starts regenerating your website. After a minute or two, you’ll get to see your fresh content live.

Does this process seem magical to you? Let’s break it down to see what actually happens under the hood:

  1. Netlify attached a webhook to watch for changes in your repository. This way, it gets notified each time you make changes to repository
  2. Each change triggers a build command that you’ve specified in the configuration step (runs hexo generate command).
  3. After the command succeeds, the new version is pushed to a web server using contents from the /public directory specified during the configuration step.

See also: How to prepare for a penetration test?

Beyond deployment – Netlify features worth mentioning

Although the website is live, there are still a few important things we can (or rather should) do. We want a user-friendly URL. To do that, we need to attach a custom domain. Another logical step is to add an SSL certificate. With Netlify, doing both is extremely easy. Adding a certificate can be done at the click of a button, using the superb Let’s Encrypt service and its automated API.

Of course, Netlify’s wide range of features is not limited to supporting static sites. It includes:

  • Form submissions – helps create a contact form and handles data collection.
  • Config variables – allows injecting variables during the build process so as not to compromise sensitive variables by putting them inside the code
  • Branch deploys – a brilliant idea to simultaneously deploy more branches apart from the primary one. Each branch resides on a different subdomain, which allows for testing changes before they are pushed to production. A great solution for quick A/B testing or verifying draft builds.
  • AWS Lambda functions support.
  • Providing basic yet powerful authentication system for your frontend applications.
  • Redirects configuration – should you need to redirect URLs from your previous website.
  • Development environment (fresh news at the time of writing this article), which allows for running the whole Netlify environment locally.

The number of benefits is quite impressive. For more details, take a look at the docs.

Commercial use of Netlify’s free tier service

Since I already mentioned the use of Netlify as testing environment, it may be worthwhile to talk about its commercial use. Netlify’s ability to launch and update in a couple minutes saves a lot of time and makes it a great and very practical testing environment.  It turns out that even the free version of Netlify can be used in commercial projects to its full extent. I highly recommend you play with it and see if it can become a part of your organization’s development process as well.

See also: PHP & Websocket

Static site deployment with Netlify – recap

We’ve already prepared a static website. We also know how to edit the blog and create metadata. Now, we also got to learn how to facilitate the deployment of our website. In the next article, we’ll find out what more we can do to make content management of a static website easier. Again, we’re going to use Netlify to achieve these goals.

You may also like

spinner
CTO Roundtable #11 - Tech leaders’ masterclass in growing a quality culture

Join the discussion during the CTO Live Panel

Register here!

What do you want to achieve?

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    They are more than just a software company. They are the partner who will help you achieve what you want to achieve.

    Nick Gold

    Managing Director at Speakers Corner

    Thanks

    Thank you for your inquiry!

    We'll be back to you shortly to discuss your needs in more detail.