How to deploy your Hugo Site to for Free - (r)

-sidebar-toc>

Hugo is an open-source, well-known Static Site Generator (SSG) designed to help developers build and manage websites fast and effectively. It can be used to build portfolios, blogs, and all forms of personal sites that do not require any dynamic information.

When you build sites with Hugo, you'd definitely want to make them available online, so they can be shared with all those who need to access them. This is where Static Site Hosting is a must!

Understanding Static Site Hosting

The Static Site Hosting can automatically build sites from SSGs built using Node.js For other sites such as Hugo that are written in Go programming language (Golang), you'd need create a new method.

Transfer the Your Hugo Site to Static Site Hosting

There are three methods to deploy your Hugo website to Static Site Hosting.

1. Create your site using Continuous Integration and Continuous Deployment (CI/CD) and then release it.
2. Make use of the hugo-bin developer dependency.
3. Serve locally built static files.

In this article, we go through all of the.

The prerequisites

For this guide, we presume that you've got:

• Experiential experience with Hugo and Git.
• A Hugo site running local.

Build Your Site With CircleCI and deploy for

To begin that we'll use, let's consider CircleCI as the CD/CI tool. This approach involves establishing a CircleCI workflow that builds your Hugo site into a new branch titled deploy and configuring the workflow to move the static files created by the branch.

Benefits of using CD/CI

This way it is possible to avoid the necessity of building locally your website prior to pushing it to the Git repository. Normally, handles the site-building process for SSGs which are built on Node.js however, for different SSGs like Hugo, using a workflow will help manage the building process in a way that is automated.

In addition, you may incorporate additional tasks into the configuration file for your CI/CD, for example, to lint and verify your code. Also, ensure that your application is modified if your pipeline to CI/CD has been completed successfully.

Step 1 Step 1: Create the Configuration File

Begin by creating an .circleci folder in the Hugo projects root folder. Inside this folder, create an config.yml file to set the configuration of your workflow.

Step 2: Push Your Code to an Git repository

Make your own Git repository by using the preferred Git service and then upload your codes to the repository.

Step 3: Make an Orphan Branch

Create an empty orphan branch known as deploy which is where your static files for deployment will be pushed. Run the following commands from the terminal of your project:

git switch --orphan deploy
 git commit --allow-empty -m "Initial commit on deploy branch"
 git push -u origin deploy

Please do not upload any files to this branch; it will automatically be populated through the CircleCI workflow with the contents of Hugo's generated open folder.

Step 4: Create an account with CircleCI. CircleCI Account

Check out the CircleCI website to sign up for an account if you don't currently have an account. Sign up with your preferred Git service provider. This makes it simpler to connect to your repository without any additional configuration.

Step 5: Set Up Your Repository

Once you have logged in, go to the CircleCI Dashboard, click Projects in the left-hand sidebar and then select the repository you want to configure. CircleCI will automatically detect your configuration files.

Hit the Set Up Project button to give CircleCI access to your codebase, and run processes when code is changed.

Step 6: Define CircleCI Configuration

It's now time to create a CircleCI configuration file to be created. We'll build the content. Ensure you're in your default branch (not located in the deploy branch) begin by definining the CircleCI version, which currently is 2.1:

version: 2.1

Step 7: Define Executors

As this is an Hugo project, you'll need to define an executor to run the jobs. Define your hugo-executor here so you don't have to define it on each job. This executor uses a Docker image (cibuilds/hugo:latest) to create a consistent environment for building the Hugo site:

executors:
 hugo-executor:
 docker:
 - image: cibuilds/hugo:latest

Step 8. Create a definition of jobs

In the next step, identify two roles: build and push build. These jobs specify the steps that must be followed within each job

jobs:
 build:
 executor: hugo-executor
 
 push build:
 executor: hugo-executor

Build Job

This job is responsible for building your Hugo site and storing the static files generated in the workspace temporarily so they can be accessible to be used later when you pull build task.

build:
 executor: hugo-executor
 steps:
 - checkout
 
 - run:
 name: Update theme
 command: git submodule update --init --recursive
 
 - run:
 name: Build Hugo site
 command: hugo --destination=workspace/public
 
 # Persist the 'build' directory to the workspace
 - persist_to_workspace:
 root: workspace
 paths:
 - public

The above job specifies that it is using the hugoexecutor executor defined earlier. Then, it runs four main steps:

• checkout The following step is to check out your project's source code via the GitHub repository.
• Update theme The process starts and then updates the Git submodules (if they exist) to ensure that your Hugo theme is updated. This can be useful in the event that your Hugo website makes use of Gitmodules in order to reference the theme used instead of pushing huge files of themes already available on GitHub.
• Create the Hugo site This process creates the Hugo site and specifies the folder to be used as workspace/public.
• persist_to_workspace: This step persists the public directory (output of the Hugo build) to the workspace for later use in the push build job.

Push Build Job:

It is the "push" job is responsible for pushing your created site onto an orphan branch ( deploy) in the GitHub repository. This way, your software remains on your default branch and the deployment branch only hosts your site's static files.

push build:
 executor: hugo-executor
 steps:
 - attach_workspace:
 at: workspace
 
 - run:
 name: Push build folder to GitHub
 command: |
 # Configure Git identity (replace  with your actual username)
 git config --global user.name ""
 git config --global user.email "@users.noreply.github.com"
 
 # Clone the repository (replace  with your actual repository URL)
 git clone --branch deploy --depth 1 https://:[email protected]//.git deployment
 
 # Copy the 'public' directory to the deployment folder
 cp -R workspace/public deployment
 
 # Navigate to the deployment folder
 cd deployment
 
 # Commit and push changes
 git add . git commit -m "Auto generated from $CIRCLE_SHA1"
git push

The job above does these things:

• attach_workspace: This step attaches the workspace where the building job maintained the publicly accessible directory.
•     Create build folder and push it to GitHub.    : This step performs several Git operations:
• Configures Git identity with your GitHub username as well as your email.
• Clone your GitHub repository into an archive named deployment on the CircleCI runner machine.
• Copies the contents of the workspace/public directory (the constructed Hugo site) to the deployment folder.
• Changes the working directory to the deployment.
• Commits the changes with confirmation that it's an auto-generated commit from CircleCI.
• The changes are then pushed into a fresh branch of the GitHub repository.

It is important that you replace and your-repo-name> with your actual GitHub username and repository name. Make sure you also create your own GitHub access token in order that CircleCI is able to access your GitHub account.

Step 9 9. Define the Workflow

workflows:
version 2 build-and-deploy
jobs: build:
 filters:
branches: Only the main- push build:is required to build:

Step 10: Recommit and push

Once your workflow is successfully configured, commit and upload your modifications to the Git repository. CircleCI recognizes automatically the existence of your configuration file and initiates your workflows based on code changes.

When you visit your GitHub repository, the branch that you deploy to branch already has public folders. open folder. It has those static file.

It is possible to cross-check the complete CircleCI configuration by looking at this example repository.

Step 11: Deploy Static Files to

1. Create or log in to an account in order to access Your dashboard. My dashboard.
2. Authorize your Git service provider.
3. Select the Static Websites on the left sidebar, then select Add Site. Add Site.
4. Select the repository as well as which branch you would like to deploy to (the deploy branch).
5. Give a unique title to your site, then Click for Continue.
6. Leave the Build option and Node version fields empty and specify the Directory for Publish as public.
7. Then Click on the Create Site button..

By using Hugo-Bin, you can build and then deploy Your Hugo Site to

Hugo-bin is a Hugo-bin package is a binary wrapper for Hugo. It allows the user to develop and run your Hugo project with Node.js commands. The method does not require software tool for CI/CD to create your website before it is deployed onto Static Website Hosting.

Use the Hugo-bin bundle to build your Hugo project:

1. Initiate Node.js in the root of your project through the NPM init -Y command.
2. Next, install Hugo-bin as a developer dependency in your project by running this command:

npm i -D hugo-bin

1. Include the script commands below in your package.json file:

"scripts": 
 "build": "hugo",
 "create": "hugo new",
 "serve": "hugo server"
 

By doing this, you'll be able to build and serve your Hugo site, without the need to construct your files prior the deployment.

Once all is done, push your code to Your Git repository. Then follow these steps to push your website's static version to :

1. Create or log in to an account in order to access Your dashboard. My dashboard.
2. Authorize with your Git provider.
3. Select static sites on the left sidebar, then select Add Site. Add site.
4. Choose the repository you want to deploy from and also the branch you would like to deploy from.
5. Assign a unique name to your site.
6. Add the build settings according to the following format:

• Command to build: NPM run build
• Node version: 18.16.0
• Publish directory: public

1. Finally you can click to create your site..

That's all there is to it! Your site is now operational. website in a matter of seconds.

We will only serve your static files to

Another method of to deploy your Hugo site to involves building your site locally and then deploying it to . The process creates an public directory at the heart of your project. But the primary drawback to this approach is that you must create your website locally prior to every push, which can be time-consuming and less convenient as compared to other approaches that can automate the building process.

In default, the public directory is removed from the Git repository due to the inclusion of it in your .gitignore file. You can add it to your repository and then deploy your website to :

1. You must remove your publicly accessible folder from your .gitignore file.
2. Use the steps for deployment as explained in the previous paragraphs.
3. Distribute the repository , ensuring that the Build Command and Version of Node fields remain empty, as your site is already created.
4. Specify the directory to publish as Public.

Alternatively, you can choose to push only the static files into your GitHub repository. In this case, there's no requirement to set up a Git repository in the root folder of the project. It's enough to execute git init within the publicly accessible folder. This allows you to keep the version control for your static files separate from the project.

In this case, when you are pushing files in a separate manner and not placing them in an public folder, specify the publishing directory as . when deploying to . This is the name of the root directory, and the files will be served according to the root folder.

Summary

Joel Olawanle

Joel is Joel is a Frontend Developer working as Technical Editor. He is a passionate teacher and enthusiast for open source and has written more than 200 technical pieces, mainly on JavaScript as well as its frameworks.

•                 Website                                          
•                 LinkedIn                                          
•                 Twitter