Tutorial for hosting a static site on Netlify

I found Netlify, which is an ideal hosting service for static sites. It has a good free plan, free CDN, and it's growing rapidly

I host my blog onNetlify.

I moved a while ago, and the previous host had some problems, which made my website inaccessible for several hours. While I was waiting for the website to go back online, I searched for a quick way to restore it and created it A copy of my website on Netlify.

Since this blog runs onHugo, This is a static website generator that does not require much work to move your blog to a new hosting website. What I need is something that can provide HTML files, which can almost be hosted on this planet.

I started looking for the best platforms for static sites and some of them stood out, but I finally tried Netlify and I am glad I did.

Netlify Logo

Introducing Netlify

Before trying, there were a few things that left a deep impression on me.

first of all,The free plan is very generousIt is suitable for free or commercial projects, with 100GB of free bandwidth per month, and for static sites with only a few pictures, there is a lot of space!

They include a globalCDN, Even on continents far away from centrally located servers, make sure that speed is not a problem.

You can point yourDNSGo to Netlify's name servers, they will handle everything for you through a very nice interface to set advanced requirements.

They certainly support having custom domains and HTTPS.

I come from Firebase and want to manage the deployment in a very programmer-friendly way, but when it comes to handling every static site generator, I find it even better.

Netlify and Hugo

I use Hugo and run the server locally with its built-in toolshugo server, It will handle all the reconstruction of HTML every time a change is made, and run an HTTP server on the port1313by default.

To generate a static website, I must runhugo, This will bepublic/folder.

I followed this approach on Firebase:hugoCreate the file, thenfirebase deployTo configure mypublic/The contents of the folder are added to the Google server.

However, in the case of Netlify, I linked it to the private GitHub repository hosting the site, and every time I pushed to the master branch (the branch I told Netlify to sync with), Netlify would start a new deployment, And the change is real-time in a few seconds.

Dashboard

Tip: If you use Hugo on Netlify, make sure tonetlify.tomlUpgrade to the latest Hugo stable version, as the default version may be too old and (at the time of writing) does not support the latest features, such as post packages.This is my netlify.toml configuration file.

If you think this is nothing new, you are right, because it is not difficult to implement this on your own server (and I do on other sites that are not hosted by Netlify), but here is something new: you You can preview any GitHub (or GitLab), or BitBucket) branch/PR on a separate URL, and your main site is always active and running with "stable" content.

Another cool feature is the ability to perform A/B testing on 2 different Git branches.

Advanced features provided by Netlify for static sites

The obvious limitation of static sites is that they cannot perform any server-side operations, such as those you wish to perform from a traditional CMS.

This is an advantage (no need to worry about less security issues), but it also limits the functionality you can achieve.

The blog is not complicated, maybe you want to add comments, you can use Disqus or other services to complete the comments.

Or maybe you want to add a form and add it by embedding a generated form on a third-party application (such as Wufoo or Google Forms).

Netlify provides a set of tools to handleform, Verify user identity, even deploy and manageLambda function.

Do I need to password protect the website before launching it? ✅

Need to be dealt withCORS? ✅

Do you need a 301 redirect? ✅

Do I need to pre-render for SPA? ✅

I just briefly introduced what Netlify can do without contacting third-party services. I hope I will give you a reason to try.

Preview branch

GitHub integration works well with Pull Requests.

Every time you send a "pull request", Netlify will deploy the branch on a specific URL, which you can share with your team or anyone you want.

Here, I issued a "pull request" to preview the blog post without posting it on my public blog:

GitHub Pull Request

Netlify picked it up immediately and deployed deployed automatically

The deployed preview

Clicking on the link will direct you to a special URL that allows you to preview the PR version of the website.


More service tutorials: