Docs

Getting Started 🚀

Posted on Jul 20, 2024 4 mins

Hugo Kayal Install

Table of Contents

Install Hugo

First Install Hugo, Simply follow the standard Hugo Quick Start procedure to get setup and running quickly.
The theme is tested with Hugo v0.125 but may work with lower versions.
Installation instructions for the theme are provided below, Instructions for updating are provided too.

Getting Started

Create a new Hugo site

Run the following command to create a new Hugo site in a directory named mywebsite.

hugo new site mywebsite

Note:

You can name the project directory whatever you choose, but the instructions below assume it’s named mywebsite.
If you use a different name, be sure to substitute it accordingly.
Read more here about Hugo Docs’s - hugo new site command

Once you’ve created a new site, follow the steps below to add the Kayal theme.

Download Kayal

There several different ways to install the Kayal theme into your Hugo website. From easiest to most difficult to install and maintain, they are:

Git submodule (Recommended)
Hugo module
Manual file copy

If unsure, choose the Git submodule method.

Install as Git submodule

This method is the quickest and easiest for keeping the theme up-to-date. Besides Hugo and Go, you’ll also need to ensure you have Git installed on your local machine.

Change into the directory for your Hugo website (that you created above), initialise a new git repository and add Kayal as a submodule.

cd mywebsite
git init
git submodule add -b main https://github.com/mnjm/kayal.git themes/kayal

Then continue to set up the theme configuration files .

Install as Hugo Module

For this method, use Hugo to manage your themes. Make sure you have Go installed before proceeding.

Download and install Go. Verify with go version (requires Go version 1.12 or later).

From your Hugo project directory (that you created above), initialise modules for your website:

# If you're managing your project on GitHub
hugo mod init github.com/<username>/<repo-name>

# If you're managing your project locally
hugo mod init my-project

Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:
```
[[imports]]
path = "github.com/mnjm/kayal/"
```
Start your server using hugo server and the theme will be downloaded automatically.
Continue to set up the theme configuration files .

Install manually

Download the latest release of the theme source code. Download link
Extract the archive, rename the folder to kayal and move it to the themes/ directory inside your Hugo project’s root folder.
Continue to set up the theme configuration files .

Set up theme configuration files

In the root folder of your website, delete the hugo.toml file that was generated by Hugo. Copy the toml config files from the theme into your config/_default/ folder. This will ensure you have all the correct theme settings and will enable you to easily customize the theme to your needs.

Note: You should not overwrite the module.toml file if one already exists in your project!

Depending on how you installed the theme you will find the theme config files in different places:

Hugo Modules: In the Hugo cache directory, or download a copy from GitHub.
Git submodule or Manual install: themes/kayal/config/_default/

Once you’ve copied the files, your config folder should look like this:

_default
├── hugo.toml
├── markup.toml
├── menus.toml
└── params.toml

Important: If you didn’t use Hugo Modules to install Kayal, you must add the line theme = "kayal" to the top of your hugo.toml file.

Next steps

The basic Kayal installation is now complete. Continue to the Configuration section to learn more about configuring the theme.

Installing updates

Periodically, new releases may include fixes and new features. Update theme files on your website based on your initial installation method.

Update using git

Git submodules can be updated using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:

git submodule update --remote --merge

Once the submodule has been updated, rebuild your site and check everything works as expected.

Update using Hugo

Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:

hugo mod get -u

Hugo will automatically update any modules that are required for your project. It does this by inspecting your module.toml and go.mod files. If you have any issues with the update, check to ensure these files are still configured correctly.

Then simply rebuild your site and check everything works as expected.

Update manually

Updating Kayal manually requires you to download the latest copy of the theme and replace the old version in your project.

Note: Any local customisations you have made to the theme files will be lost during this process.

Download the latest theme release here .
Extract and move kayal to themes/ in your Hugo project.
Rebuild your site and check everything works as expected.