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