What can you do to deploy the capabilities of your Hugo Site to for Free This is a great opportunity to have you Hugo Site up and running for free. (r)

-sidebar-toc>

Hugo is a well-known and free Static Site Generator (SSG) created to assist designers create and manage websites swiftly and efficiently. It is able for creating portfolios, blogs, and personal websites that do not need current information.

If you create websites using Hugo it's a must to upload them to the internet for them to be shared with all those who require access. This is why Static Site Hosting is now an absolute requirement!

Understanding static site hosting

Static Site Hosting Static Site Hosting makes websites automatically using SSGs that were built through Node.js Others sites, such as Hugo and Hugo which were developed in the Go programming language (Golang) You'll need to develop a brand new approach.

Transfer the Your Hugo Site to Static Site Hosting

There are three ways to join to your Hugo site to Static Site hosting.

1. Design your website using Continuous Integration and Continuous Deployment (CI/CD) and then publish the site.
2. Use hugo-bin to install it's the hugo-bin developer dependency.
3. Make use of locally-built static file.

In this post, we'll go through each of.

The circumstances

For this guide, we suppose that you've:

• An experience of a lifetime with Hugo Git and Hugo. Git.
• A Hugo website that operates local.

Make Your Site with CircleCI and then, deploy it to

This is the first time we'll be using the concept of CircleCI as a CD/CI software. The method involves creating the CircleCI workflow that transforms your Hugo website into a brand new branch that is titled deployment and defining the workflow to transfer the static files created through the branches.

The benefits of using CD/CI

It is feasible to skip the need to build your site locally prior to submitting it in your Git repository. The typical workflow handles the building process of a website for SSGs which are built on Node.js however for other SSGs such as Hugo working with workflows could aid in managing the entire process of creating by making it automatized.

In addition, you may incorporate additional tasks into the configuration file of your CI/CD. This includes the capability to clean and test your program. Make sure that your application has been modified after the pipeline that you created to CI/CD is successfully completed.

Step 1 Step 1 Make the Configuration file

Start by creating a .circleci folder in the Hugo project root folder. Inside this folder, create a config.yml file to determine the setting of your workflow.

Step 2. Upload your Code to a Git repository

Make your own Git repository by using the most popular Git service, and then upload your own code to the repository.

Step 3: Create an abandoned branch.

It is possible to create a blank branch referred to as an orphan named deploy that is the location where your static deployment files will be placed. Execute the following commands in the terminal in your project:

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

Do not add any files into this branch. The directory will automatically populate the CircleCI workflow by using the content of Hugo's open folder.

Step 4: Register an account at CircleCI. CircleCI Account Account

Check out the CircleCI site to sign up for an account in case you don't have one. Sign up through your Git provider of choice. It is easier to join your repository with no need for any additional setting up.

Step 5: Setup Your Repository

After you've logged in, you'll need to go to the dashboard in CircleCI Select Projects on the left sidebar. Then, select the repository you would like to modify. CircleCI will scan and determine the configuration files you have created.

Press the button to Set Up Project button, which will 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. It's a must to be created. The content will be built. You must be in the default branch (not in your deployed branch) firstly, determine 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 specify an executor in order to perform the job. Create an executor named hugo-executor to make sure you don't have to define it for every task. 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

Next, you must identify two tasks: build and push. Build then push. The jobs define the actions to follow to complete each task.

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

Construction Job

This task is accountable to create your Hugo site and also it is responsible for storing static files you have created in the workspace for a limited time so that they can be available for later use when you complete the build job.

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 job above specifies it's running hugoexecutor. This is the hugoexecutor executor which was earlier established. It then executes four primary actions:

• checkout The next step is to review the source code for your project on your GitHub repository.
• Update the theme The process starts with an update to you Git submodules (if there are any) so that the Hugo theme is updated. This is useful should your Hugo website uses Gitmodules to refer to the theme instead of pushing large templates already available on Github.
• Make Hugo's website Hugo Website This process generates the Hugo website, and also defines the directory that will be used as the public 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.

The Push Build Job

This is the "push" job that is responsible for pushing your created site to an orphan branch ( deploy) in the repository of GitHub. So, the software remains on the default branch and it is the branch that is deployed. This branch that will host the static content of your website. 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 with $CIRCLE_SHA1" Make git push

The above job carries out the following tasks:

• Attach_workspace This step joins the work space where the construction job was responsible for maintaining the directory which is open to all. directory.
• Make a build folder, then transfer it onto GitHub.  The process performs a variety of Git tasks:
• The Git identity is created by using your GitHub username as well as your email.
• Copy your GitHub repository to build an archive known as deployment to the CircleCI operating machine.
• Copy everything in the workspace/public directory (the built Hugo website) into the deployment folder.
• The working directory is changed to the deployment.
• Confirms that it's an auto-generated commit created by CircleCI.
• The modifications are then transferred to a different branch within the GitHub repository.

It's important to replace your repo's name and the name of your repo with your own GitHub username and the name of the repository. Also, make sure that you create your own GitHub access token to make sure that CircleCI is able to access your GitHub account.

Step 9 9. Set up the Workflow

workflows: Version 2. Workflows for build-and-deployment: filtering branches: Only the primarybuilding push is required for building:

Step 10. Recommit and push

Once your workflow is successfully set up, you can upload the changes to Git. Git repository. CircleCI can detect the presence of your configuration file and starts your workflow based on the changes to code.

When you visit your GitHub repository, the branch you are deploying to the branch has the folders which are publicly accessible. is an open the folder. It holds those static documents.

Check the entire CircleCI configuration using this example repository.

Step 11: Distribute static files

1. Create or log in to your account to get access to your dashboard. My dashboard.
2. Authorize the Git service provider.
3. Click on the Static Websites in the left-hand sidebar. Select Add Site. Click Add Site..
4. Select the repository along with the branch you'd like to be added into (the deploy branch).
5. Create a distinctive name for your website, then Click to continue.
6. Make sure to leave the Build option and Version of the Node fields unfilled and indicate the directories to publish as public.
7. Once you have done that, Click to click and then click to click the Create Site option..

Utilizing Hugo-Bin you can build and then publish Your Hugo Site to

Hugo-bin is the hugo-bin package, which is a binaries wrapper of Hugo. It allows users to create and run your Hugo project by using Node.js commands. This method doesn't require a application program to create your website before it is deployed to Static Website hosting.

Utilize the Hugo-bin bundle to create the base to you Hugo project:

1. Start Node.js within the project's root by using NPM's NPM init. command.
2. After that, install the Hugo-bin dependency as a dependency for developers in your application with this command:

npm i -D hugo-bin

1. Include the script commands below inside the package.json file:

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

This way it will be possible to create and manage your Hugo website, with no necessity of constructing your site prior to launching.

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

1. Log in or register to your account to access your dashboard. My dashboard.
2. Autorize 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 add your deployment to and the branch you'd prefer to deploy from.
5. Assign a unique name to your site.
6. Configure the parameters of your build as per the format below:

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

1. After that, you'll be in a position to click to create your site..

This is all you need to know! The site has now been functioning. website in a matter of seconds.

The only way we will deliver the static files the client you've supplied to

Another approach to deploy your Hugo website is to build your site locally before then moving it to . It creates a accessible directory that is at the core of your website. However, the main drawback of this strategy is the fact that you have to build your site locally prior to each one launch. This could be time-consuming and not as convenient when compared to other strategies that automate the process of creating.

In default, the default setting, the publicly accessible directory is taken off the Git repository as a result of the inclusion of it in the .gitignore file. Include it in your repository and then, publish your website in the following location:

1. You must delete the publically accessible file from your .gitignore file.
2. Follow the procedure for deployment as explained in the previous paragraphs.
3. Distribute the repository , making sure you ensure that the Build Command and Version of Node fields are not empty since your website has already been created.
4. Indicate the directory that you would like to release to be made public.

You can also opt to only push static files in your repository to GitHub. You don't need to establish an Git repository within the root folder of your project. Simply run an init script for git inside the public folder. This lets you maintain the revision control for the static files that are apart from the project.

In this instance, if you're deploying files in distinct manner instead of including them into a public folder, make sure you specify you're publishing directories through . when deploying to . This is the name of the root directory. the files are served in accordance with the root directory.

Summary

Joel Olawanle

Joel is Joel is a Frontend Developer who is Technical Editor. Joel is an enthusiastic teacher and an advocate for open source software and has written over 200 technical papers, mainly focused on JavaScript as well as its frameworks.

•       Website
•       LinkedIn
•       Twitter

Article was first seen here. this website

Article was posted on here