GitHub Pages is a free hosting service that lets you create and host static websites. CMS Hugo is a static website generator that helps you create websites using templates. In this tutorial, we’ll break down how to create and host a static website on GitHub Pages using CMS Hugo .
Hugo is a static site generator that you can use to create your own site. To get started, you need to install Hugo on your computer. In this section we will describe how to install Hugo on Linux, Mac OS and Windows.
Install the Git and Curl packages if they are not already installed.
Check the installation by running the command
Install the Homebrew package manager if it is not already installed
Install Hugo with Homebrew
Note: Replace “C:\path\to\hugo.exe\directory” with the path to the hugo.exe file on your computer.
After installing Hugo, you need to create a new site. To do this, open a terminal or command line, go to the directory in which you will store the files of the site and enter the following command:
Instead of “site-name”, you must specify the name of your new site. Hugo will then create a directory structure for your site.
Hugo comes with several built-in themes that you can use to create your own site. You will find all available templates on the official website in the Themes section . As an example, let’s install the theme terminal . Go to the root directory of your site
Go to the themes directory and download the theme archive , then unzip it and rename the unzipped directory to hugo-theme-terminal. You also can clone the repository by running the command
Let’s edit the file config.toml, which is located at the root of the directory and specify in it the theme we want to use, add the following line
After that, you can start modifying templates and theme styles to customize them for your needs.
Now you need to create content for your site. As an example, create a new page:
This will create a new file named “info.md” in the “content/posts” directory. Open this file and add content to the page using Markdown formatting.
Important: Do not delete the text at the beginning of the file.
As an online editor you can use Dillinger or Stackedit .
To check your site on the local computer, you need to run the server Hugo. To do this, run the command:
After starting the server, open your browser and go to http://localhost:1313/. You should see your site as it currently looks.
To run servers on a virtual server run the following command, in which replace 10.10.10.10 with the IP address of your server.
Now you need to create a new repository on GitHub for your site. Go to the GitHub site and login to your account. Click the “New” button and enter the name of your repository. Do not create the README.md, .gitignore, and license files, as they will already be included in Hugo.
Now you need to initialize Git and add files to your repository on GitHub. Open a terminal and go to your site directory. Then run the following commands:
If you have cloned the theme repository, after running the git add command, you will see a notice that you need to run the git submodule add themes/hugo-theme-terminal command, and then run this command with a link to the theme repository instead of .
To publish your site to GitHub Pages, you need to add the repository as a remote and upload your changes to GitHub. Run the following commands:
Then go to the settings section of your GitHub repository and select “Pages” on the side menu. In Build and deployment select GitHub Actions, then we will be offered a template for Hugo, click Configure.
Click Start commit and if everything is done correctly, in a couple of minutes your site will be available at https://user-name.github.io/new-repo/ – where user-name is your user name on github and new-repo is the name of the repository you uploaded the files to.
After you publish your site to GitHub Pages, you can customize your domain name so that your site is accessible at a shorter, more memorable address. To do this, follow these steps:
Your site is now available under a more memorable domain name. Please note that setting up a domain name can take up to 24 hours to fully take effect.