Skip to content

Install Thulite manually

This guide will walk you through the steps to manually install and configure a new Thulite project.

Prerequisites

  • Node.js - v20.11.0 or higher — run node -v to check.
  • Hugo extended - v0.125.0 or higher — run hugo version to check.
  • Text editor - We recommend VS Code — see also Editor Setup.
  • Terminal - Thulite is accessed through its command-line interface (CLI).

Installation

If you prefer not to use our automatic create thulite CLI tool, you can set up your project yourself by following the guide below.

1. Create your directory

Create an empty directory with the name of your project, and then navigate into it.

Terminal window
mkdir my-thulite-project && cd my-thulite-project

Once you are in your new directory, create your project package.json file. This is how you will manage your project dependencies, including Thulite. If you aren’t familiar with this file format, run the following command to create one.

Terminal window
npm init --yes

2. Install Thulite, Prettier and Vite

First, install the Thulite project dependencies inside your project.

Terminal window
npm install thulite

Then, install Prettier and Vite — as devDependencies:

Terminal window
npm install -D prettier vite

Next, replace any placeholder “scripts” section of your package.json with the following:

package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"create": "hugo new",
"dev": "hugo server --disableFastRender --noHTTPCache",
"format": "prettier **/** -w -c",
"build": "hugo --minify --gc",
"preview": "vite preview --outDir public"
},

You’ll use these scripts later in the guide to start Thulite and run its different commands.

3. Create your first page

Thulite follows the Hugo content structure. In the root of your project, create an empty content directory, and then navigate into it.

Terminal window
mkdir content && cd content

Next, create your new homepage:

Terminal window
npm run create _index.md

In the frontmatter set draft: false and add some content:

---
title: "Hello, World"
date: 2024-05-13T11:22:40+02:00
draft: false
---
This line is from `content/_index.md` 🚀

4. Create your first static asset

You will also want to create a static directory to store your static assets. Hugo will always include these assets in your final build, so you can safely reference them from inside your layout templates.

In the root of your project, create an empty static directory, and then navigate into it.

Terminal window
mkdir static && cd static

In your text editor, create a new file in your directory at static/robots.txt. robots.txt is a simple file that most sites will include to tell search bots like Google how to treat your site.

For this guide, copy-and-paste the following code snippet into your new file:

# Example: Allow all bots to scan and index your site.
# Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. Create app.scss

In the root of your project, create an empty assets/scss directory, and then navigate into it.

Terminal window
mkdir -p assets/scss && cd assets/scss

Add an app.scss file with the following:

app.scss
/** Import modern-css-reset */
@import "modern-css-reset/src/reset";
:root {
--main-bg-color: yellowgreen;
}
body {
background-color: var(--main-bg-color);
text-align: center;
}

6. Create configuration files

Thulite follows Hugo’s configuration setup.

config/_default directory

In the root of your project, create an empty config/_default directory, and then navigate into it.

Terminal window
mkdir -p config/_default && cd config/_default
hugo.toml

Add a hugo.toml file with the following:

hugo.toml
title = "Thulite"
baseurl = "http://localhost/"
canonifyURLs = false
disableAliases = true
disableHugoGeneratorInject = true
disableKinds = ["taxonomy", "term"]
enableEmoji = true
enableGitInfo = false
enableRobotsTXT = true
languageCode = "en-US"
paginate = 7
rssLimit = 10
summarylength = 20 # 70 (default)
copyRight = "Copyright (c) 2020-2024 Thulite"
[build.buildStats]
enable = true
[outputs]
home = ["HTML"]
[minify.tdewolff.html]
keepWhitespace = false
module.toml

Add a module.toml file with the following:

module.toml
# mounts
## archetypes
[[mounts]]
source = "archetypes"
target = "archetypes"
## assets
[[mounts]]
source = "node_modules/@thulite/core/assets"
target = "assets"
[[mounts]]
source = "assets"
target = "assets"
## content
[[mounts]]
source = "content"
target = "content"
## data
[[mounts]]
source = "data"
target = "data"
## i18n
[[mounts]]
source = "i18n"
target = "i18n"
## layouts
[[mounts]]
source = "node_modules/@thulite/core/layouts"
target = "layouts"
[[mounts]]
source = "layouts"
target = "layouts"
## static
[[mounts]]
source = "static"
target = "static"
params.toml

Add a params.toml file with the following:

params.toml
# Hugo
title = "My Thulite site"
description = "Congrats on setting up a new Thulite project!"
images = ["cover.png"]
[social]
twitter = "thulite"

config directory

cd one level up.

Terminal window
cd ..
babel.config.js

Add a babel.config.js file with the following:

babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: [
// Best practice: https://github.com/babel/babel/issues/7789
'>=1%',
'not ie 11',
'not op_mini all',
],
},
},
],
],
};
postcss.config.js

Add a postcss.config.js file with the following:

postcss.config.js
const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
const whitelister = require('purgecss-whitelister');
module.exports = {
plugins: [
autoprefixer(),
purgecss({
content: [ './hugo_stats.json' ],
extractors: [
{
extractor: (content) => {
const els = JSON.parse(content).htmlElements;
return els.tags.concat(els.classes, els.ids);
},
extensions: ['json'],
},
],
dynamicAttributes: [
'aria-expanded',
'id',
'size',
'type',
],
safelist: [
'active',
'disabled',
'hidden',
'show',
'img-fluid',
'blur-up',
'lazyloaded',
...whitelister([
'./assets/scss/**/*.scss',
]),
],
}),
],
}

Project directory

cd one level up.

Terminal window
cd ..
.prettierignore

Add a .prettierignore file with the following:

.prettierignore
*.html
*.ico
*.png
*.jp*g
*.toml
*.*ignore
*.svg
*.xml
LICENSE
.npmrc
.gitkeep
*.woff*
*.txt
*.map
.prettierrc.yaml

Add a .prettierrc.yaml file with the following:

.prettierrc.yaml
# Default config
tabWidth: 4
endOfLine: crlf
singleQuote: true
printWidth: 100000
trailingComma: none
bracketSameLine: true
quoteProps: consistent
experimentalTernaries: true
# Overrided config
overrides:
- files: ["*.md", "*.json", "*.yaml"]
options:
tabWidth: 2
singleQuote: false
- files: ["*.scss"]
options:
singleQuote: false

Next steps

If you have followed the steps above, your project directory should now look like this:

  • Directoryassets/scss
    • app.scss
  • Directoryconfig
    • Directory_default
      • hugo.toml
      • module.toml
      • params.toml
    • babel.config.js
    • postcss.config.js
  • Directorycontent
    • _index.md
  • Directorynode_modules/
  • Directorystatic
    • robots.txt
  • .prettierignore
  • .prettierrc.yaml
  • package-lock.json # or yarn.lock, pnpm-lock.yaml, etc.
  • package.json

Congratulations, you’re now set up to use Thulite!

If you followed this guide completely, you can jump directly to Step 3: Start Thulite to continue and learn how to run Thulite for the first time.