Hugo site with the Bearblog theme using Nix

· mcot's blog

Hugo is a popular static site generator, and the Bearblog theme provides a clean and minimalistic design for Hugo sites. In this tutorial, we will walk through the steps of setting up a Hugo site with the Bearblog theme using Nix, a powerful package manager and development environment manager.

# Prerequisites

Before we begin, make sure you have Nix installed on your system. If not, you can install it by running the following command:

1curl -L https://nixos.org/nix/install | sh

# Step 1: Create a new project directory

First, let's create a new directory for our Hugo site:

1mkdir my-hugo-site
2cd my-hugo-site

# Step 2: Initialize a Nix flake

Next, initialize a new Nix flake in the project directory:

1nix flake init

This will create a basic flake.nix file in the project directory.

# Step 3: Edit the flake.nix file

Open the flake.nix file in a text editor and replace its content with the following code:

 1{
 2  description = "My Hugo Site";
 3  inputs = {
 4    nixpkgs.url = "github:nixos/nixpkgs";
 5    flake-utils.url = "github:numtide/flake-utils";
 6    bearblogTheme.url = "github:bearblog/hugo-theme-bearblog";
 7  };
 8  outputs = { self, nixpkgs, flake-utils, bearblogTheme }: {
 9    packages = import nixpkgs { inherit system; };
10    defaultPackage = self.packages.hugo.overrideAttrs (oldAttrs: {
11      src = bearblogTheme;
12    });
13  };
14}

Save the flake.nix file.

# Step 4: Build and install Hugo with Bearblog theme

Run the following command to build and install Hugo with the Bearblog theme:

1nix build

This command will download and build Hugo, including the Bearblog theme.

# Step 5: Verify Hugo installation

After the build is complete, verify that Hugo is installed correctly:

1./result/bin/hugo version

This should display the version of Hugo you installed.

# Step 6: Create a new Hugo site

Create a new Hugo site using the following command:

1./result/bin/hugo new site my-site

This will create a new directory named my-site that contains the basic structure of a Hugo site.

# Step 7: Add Bearblog theme as a submodule

Navigate to the my-site directory and add the Bearblog theme as a Git submodule:

1cd my-site
2git submodule add https://github.com/bearblog/hugo-theme-bearblog.git themes/bearblog

# Step 8: Configure the Bearblog theme

Open the config.toml file in a text editor and add the following line under the [params] section:

1theme = "bearblog"

Save the config.toml file.

# Step 9: Customize your Hugo site

You can now customize your Hugo site by adding content, configuring additional settings in the config.toml file, and modifying the site's templates as desired.

# Step 10: Build your Hugo site

Once you have customized your Hugo site, build it by

running the following command:

1../result/bin/hugo

This will generate the static HTML files for your site in the public directory.

# Step 11: Launch your Hugo site

Congratulations! Your Hugo site with the Bearblog theme is ready. You can deploy the contents of the public directory to a web server to make your site live. Alternatively, you can view the site locally by running a local web server within the public directory.

1cd public
2python3 -m http.server

Visit http://localhost:8000 in your web browser to see your Hugo site in action.

# Conclusion

In this tutorial, we've learned how to set up a Hugo site with the Bearblog theme using Nix. Nix provides a reproducible and consistent development environment, making it easy to manage dependencies and build your Hugo site. With the Bearblog theme, your Hugo site will have a beautiful and minimalistic design. Now you can start creating content and building your own Hugo-powered blog!

Happy

mcot@2022