Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io). It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content.
This is a simplified set of instructions and assumes a basic understanding of building Hugo sites and installing themes. For detailed instructions, refer to the full [theme documentation](https://jpanther.github.io/congo/docs/).
There are a few ways to install the Congo theme into your Hugo website.
### Install using Hugo
This method is the quickest and easiest for keeping the theme up-to-date. Hugo Modules uses Go to initialise and manage modules so you need to ensure you have Go installed before proceeding.
1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
2. From your Hugo project's directory, initiate the Hugo Modules system for your website:
```shell
hugo mod init github.com/<username>/<repo-name>
```
3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
```toml
[[imports]]
path = "github.com/jpanther/congo"
```
4. Start your server using `hugo server` and the theme will be downloaded automatically.
5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
### Set up theme configuration files
In the root folder of your website, delete the `config.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 customise the theme.
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](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/congo/tree/stable/config/_default) from GitHub
- **Git submodule or Manual install:** `themes/congo/config/_default`
There are a couple of ways you can make style changes to Congo.
If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
> **Note:** Building the theme manually is intended for advanced users.
Change into the `themes/congo/` folder and install the project dependencies.
```bash
npm install
```
Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
For example, to change to a green colour scheme, you could apply these changes:
```js
// themes/congo/tailwind.config.js
theme: {
colors: {
transparent: "transparent",
white: colors.white,
gray: colors.gray,
primary: colors.lime,
secondary: colors.teal,
},
...
}
```
For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
After editing the configuration, you need to rebuild the theme's stylesheets.
```bash
npm run build
```
This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
```bash
npm run dev
```
Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
If you're able to fix a bug or implement a new feature, I welcome PRs for this purpose. Learn more in the [contributing guidelines](https://github.com/jpanther/congo/CONTRIBUTING.md).