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

4 min

read

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 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.

Estimate your project





or contact us directly at [email protected]

Thanks

Thank you!

Your message has been sent. We’ll get back to you in 24 hours.

Back to page
24h

We’ll get back to you in 24 hours

to address your needs as quick as possible.

Estimation

We’ll prepare an estimation of the project

describing the team compostition, timeline and costs.

Code review

We’ll perform a free code review

if you already have an existing system or a part of it.

Our work was featured in:

Tech Crunch
Forbes
Business Insider

Aplikujesz do

The Software House

Aplikuj teraz

wyślij CV na adres: [email protected]

CopiedTekst skopiowany!

Nie zapomnij dodać klauzuli:

Kopiuj do schowka Copy

Jakie będą kolejne kroki?

Phone

Rozmowa telefoniczna

Krótka rozmowa o twoim doświadczeniu,
umiejętnościach i oczekiwaniach.

Test task

Zadanie testowe

Praktyczne zadanie sprawdzające dokładnie
poziom twoich umiejętności.

Meeting

Spotkanie w biurze

Rozmowa w biurze The Software House,
pozwalająca nam się lepiej poznać.

Response 200

Response 200

Ostateczna odpowiedź i propozycja
finansowa (w ciągu kilku dni od spotkania).

spinner