Hugo and Netlify for Site Generation

Posted on February 20, 2023  •  3 minutes  • 474 words  • Other languages:  Türkçe

This text shows beginners how to create and deploy a website with Hugo via Netlify.

Hugo

Hugo is a static site generator (SSG). SSG is a tool that generates a static website. They don’t change dynamically when visited and will be visible as the same by everyone. It is a dedicated tool to produce websites with various themes available online. The blogdown package also utilizes Hugo for the same purpose in RStudio.

Netlify

Netlify is a platform to continuously deliver, integrate and deploy websites with Content Delivery Networks (CDN). It “provides continuous deployment services, global CDN, ultra-fast DNS, atomic deploys, instant cache invalidation, one-click SSL, a browser-based interface, a CLI, and many other features for managing your Hugo website.”

How to Start

Firstly, the website content and related configuration files and folders can be hosted on GitHub, making deploying content and changes to the live website more accessible and faster.

For a start, a GitHub and a Netlify profile are required. Hugo works on Command Line Interface (CLI) in Windows and Linus OS.

1. Hugo should be installed into the operating system for local development. For Windows OS, run this code on PowerShell:

winget install Hugo.Hugo

2. In a local folder, downloading a theme will be necessary to use it.
3. If the theme has an example site folder, copying it into the root folder will make it easier to see the theme with default posts. With the mentioned commands (like npm start or hugo serve) site can be served on the localhost. It will be available to browse on http://localhost:1313/ as mentioned on PowerShell.
4. The local host folder should be uploaded into a GitHub repository: It is possible by using GitHub Desktop, creating a new repository, and publishing it into GitHub.
5. The published GitHub repository containing the project’s root folder will be shared with Netlify. “Add new site” option on the main page after login will be accessible, and “Import and existing project” should be selected. Then related permission to access the GitHub repository should be given.
6. Netlify provides to write a specific build command to customize production like npm i && HUGO_ENVIRONMENT=production hugo –gc.
7. If there are any errors, the deployment log details can be checked on Netlify.
8. Any change committed and pushed into the GitHub project repository will be automatically generated and deployed via Netlify. The site will be online if there is no issue within seconds.

Free and Premium Website Generation

The selected theme’s usage of intellectual rights should be learned. GitHub has a free membership. Netlify also has a free membership option. If you want to get more from Netlify, it has a premium subscription, too. If you have rented a specific domain name like (www.myname.com ), it is possible to direct domain name servers to Netlify and use your domain with the project.

For more info: Host on Netlify by Hugo