How do you deploy your Hugo Site to for Free This is a great opportunity to get your Hugo Site up and running for free. (r)

-sidebar-toc>

Hugo is a free known Static Site Generator (SSG) designed to help developers build and maintain websites quickly and effectively. It is able for creating portfolios, blogs, and any other personal websites which do not need active information.

When you design websites with Hugo it is a must to publish them on the internet in order to allow them to be shared with all those that need access to them. This is where Static Site Hosting becomes an absolute necessity!

Understanding Static Site Hosting

Static Site Hosting Static Site Hosting can automatically make websites using SSGs that were built by using Node.js Other sites, like Hugo and Hugo that were written in Go programming language (Golang), you'd need develop a brand new approach.

Transfer the Your Hugo Site to Static Site Hosting

There are three ways to connect your Hugo website on Static Site hosting.

1. Create your site using Continuous Integration and Continuous Deployment (CI/CD) and then publish it.
2. Use hugo-bin, the hugo-bin developer dependency.
3. Use locally-built static files.

In this piece we will go through each of.

The conditions

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

• An experience of a lifetime with Hugo Git and Hugo. Git.
• A Hugo site that runs local.

Build Your Site With CircleCI and then deploy it to

For the first time, we'll utilize the concept of CircleCI as a CD/CI software. This approach involves establishing a CircleCI workflow which builds your Hugo website into a brand new branch that is titled deployment and defining the workflow to transfer the static files created by the branch.

Benefits of utilizing CD/CI

This way it is possible to avoid the necessity of building locally your website before submitting it to the Git repository. The usual workflow manages the site-building process for SSGs which are built on Node.js but for various SSGs like Hugo using workflows can help you to manage the process of building by making it automatized.

In addition, you may incorporate additional tasks into the configuration file of your CI/CD. For instance the ability to clean and test your code. Also, ensure that your application has been modified after the pipeline you have created to CI/CD has been completed successfully.

Step 1 Step 1 Make the Configuration file

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

Step 2: Upload Your Code to an Git repository

Make your own Git repository by using the preferred Git service and then add your code to the repository.

Step 3: Create an orphan branch

You can create an empty branch called an orphan called deploy which is where your static deployment files 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 into this branch. The directory will automatically populate the CircleCI workflow using the contents of Hugo's open folder.

Step 4: Register an account with CircleCI. CircleCI Account

Visit the CircleCI website to sign up to get an account, if you don't already have one. Sign up with your preferred Git provider. This makes it simpler to connect your repository without any additional configuration.

Step 5: Install Your Repository

Once you've signed in you can go to The dashboard of CircleCI, select Projects in the left-hand sidebar and then select the repository you would like to modify. CircleCI will detect and automatically identify your configuration files.

Press the button to Set Up Project button to allow CircleCI access to your codebase and process processes as the code changes.

Step 6: Determine CircleCI Configuration

Now is the time to make an CircleCI configuration file that needs to be made. We'll build the content. Make sure you're on your default branch (not situated within your deploy branch) first, define the CircleCI version, which currently is 2.1:

version: 2.1

Step 7: Define Executors

Because this is a Hugo project, you'll need to define an executor to run the jobs. Create your hugo-executor to ensure that you don't have to define it for every 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. Make a job description

The next step is to define two roles: build and push build and push. These jobs specify the steps to be taken for each job.

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

Construction Job

This job is responsible for the creation of your Hugo website and also storing the static files created within the workspace for a short period so that they can be accessible to use later on when you complete the 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's using hugoexecutor, the hugoexecutor executor that was previously defined. Then, it runs four major actions:

• checkout The following procedure is to review the source code of your project on your GitHub repository.
• Update theme The process begins and then updates your Git submodules (if they exist) in order to ensure the Hugo theme is updated. This is useful should your Hugo website uses Gitmodules to refer to the theme instead of pushing large files of themes already available on Github.
• Create the Hugo website This process generates the Hugo site and specifies the directory to use as public workspace or workspace..
• 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 that is responsible for pushing your created site onto an orphan branch ( deploy) within the GitHub repository. This way, your software is still on the default branch and it is the deployment branch will only host 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 . Make git commit with a --m "Auto generated using $CIRCLE_SHA1" Push git

The job above does these tasks:

• attach_workspace This action joins to the work space where the building job maintained the directory that is accessible to the public. directory.
• Create a build folder and upload it to GitHub. : This step performs several Git tasks:
• Creates Git's identity using your GitHub username as well as your email.
• Copy your GitHub repository to create an archive called deployment on the CircleCI running machine.
• Copy the contents of the workspace/public directory (the built Hugo website) into the deployment folder.
• Changes the working directory to the deployment.
• Confirms that it's an auto-generated commit generated by CircleCI.
• The modifications are then moved into a new branch in the GitHub repository.

It is important that you substitute your-repo-name> and your repo's name by your real GitHub username and the repository's name. Be sure to also set up your individual GitHub access token to ensure that CircleCI is able to access your GitHub account.

Step 9 9. Create the Workflow

workflows: version 2. Build-and-deploy job: filters: branches: Only the main- push build is needed to build:

Step 10: Recommit and push

Once your workflow is successfully established, upload your modifications to Git. Git repository. CircleCI is able to detect 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 the branch has folders that are public. opens folder. It contains those static files.

You can cross-check the complete CircleCI configuration using this example repository.

Step 11: Distribute Static Files

1. Sign up or sign in to an account in order to gain access to your dashboard. My dashboard.
2. Autorize the Git service supplier.
3. Click on the Static Websites in the left-hand sidebar. Click Add Site. Select Add Site.
4. Select the repository as well as which branch you'd like to add into (the deploy branch).
5. Create a distinctive title for your site, then Click to To Continue.
6. Make sure to leave the build option and Version of the Node fields blank and indicate the Directories for Publishing as public.
7. After that, Click to click then the Create Site button..

Utilizing Hugo-Bin it is possible to create and then deploy Your Hugo Site to

Hugo-bin, a hugo-bin package, which is a binary wrapper for Hugo. It lets users build and execute your Hugo project using Node.js commands. This method doesn't require a software program for CI/CD to build your site before it's deployed to Static Website hosting.

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

1. Initiate Node.js within the project's root by using the NPM init command. command.
2. Next, install Hugo-bin as a developer dependency in your application by using this command:

npm i -D hugo-bin

1. Add the following script commands within the package.json file:

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

This way, you'll be able to create and manage your Hugo site, without the need to construct your file prior to the launch.

When you're done, push your source code into your Git repository. Then follow these steps to upload your static version of your website to :

1. Sign up or sign in to your account in order to login into your dashboard. My dashboard.
2. Authorize Git with the service you use.
3. Choose static sites from the left sidebar. Select Add Site. Add site.
4. Choose the repository you want to deploy to and which branch you'd like to deploy from.
5. Assign a unique name to your site.
6. Set the build parameters according to the following format:

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

1. After that, you'll be able click to start creating your website..

This is all there is to it! The site has now been operational. website in a matter of seconds.

The only way we will serve the static files you have provided to

Another approach to deploy your Hugo site to involves building your website locally, and later moving it onto . It creates a open directory at the heart of your project. But the primary drawback to this strategy is the fact that you have to build your site locally before every single push. This could be time-consuming and less convenient when compared with other strategies that automate the creation process.

As a default the default setting, the publicly accessible directory is removed from the Git repository as a result of the inclusion of it within your .gitignore file. Add to your repository, and then publish your site to:

1. You need to delete 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 you ensure that Build Command and Version of Node fields are empty as your site is already created.
4. Specify the directory that you want to make available to be made Public.

Alternatively, you can choose to push only the static files in your repository on GitHub. There's no need to create a Git repository inside the root folder of the project. It's enough to run the git init command inside the publicly accessible folder. This lets you maintain the control of version for your static files separate from your project.

In this instance, if you are pushing files in distinct manner instead of including them in a public folder, specify that the publishing directories by . when deploying to . This is the name of the root directory. the files will be served according to the root folder.

Summary

Joel Olawanle

Joel is Joel is a Frontend Developer who is Technical Editor. Joel is an enthusiastic instructor and an advocate for open source software and has written over 200 technical articles, mostly on JavaScript and its frameworks.

•       Website
•       LinkedIn
•       Twitter

Article was first seen on here