Hugo Static website builder

Debian

Derivatives of the Debian distribution of Linux include elementary OS, KDE neon, Linux Lite, Linux Mint, MX Linux, Pop!_OS, Ubuntu, Zorin OS, and others. To install the extended edition of Hugo:

bash
sudo snap install hugo

To enable or revoke access to removable media:

bash
sudo snap connect hugo:removable-media
bash
sudo snap disconnect hugo:removable-media

Run these commands to create a Hugo site with the Ananke theme.

text
hugo new site quickstartcd quickstartgit initgit submodule add
https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/anankeecho "theme = 'ananke'" >>
hugo.tomlhugo server

ADD different theme

Minimum Hugo Version: 0.110.0

Run from the root of your Hugo site:

bash
git clone
https://github.com/apvarun/blist-hugo-theme.
git themes/blist

Alternatively, you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well:

bash
git submodule add
https://github.com/apvarun/blist-hugo-theme.
git themes/blist

Configuring theme to a hugo website

  1. Copy package.json and package-lock.json to the root folder of your website
  2. Run npm install to install required packages for theme
  3. Run npm i -g postcss-cli to use PostCSS with Hugo build
  4. Set theme = 'blist' in config.toml
  5. Run npm start to start your local server

Make sure to commit the above changes to your repository.

Install Apache on computer

bash
sudo
apt update
sudo
apt install apache2

https://ubuntu.com/tutorials/install-and-configure-apache#1-overview

Hugo theme

text
https://themes.gohugo.io/

Add content

text
hugo new content posts/my-first-post.md

Hugo created the file in the content/posts directory. Open the file with your editor.

text
+++title = 'My First Post'date = 2024-01-14T07:07:07+01:00draft = true+++

Save the file, then start Hugo’s development server to view the site. You can run either of the following commands to include draft content.

text
hugo server --buildDraftshugo server -D

Run Hugo

text
hugo server -D

Build Website

text
hugo

When you publish your site, Hugo creates the entire static site in the public directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files.

Configure Hugo

Summarize Installation and Usage of Hugo on Debian-based Systems

This document outlines the installation process and basic usage of Hugo, a static site generator, on Debian-based Linux distributions.

Installation:

The extended edition of Hugo can be installed using the snap package manager.

bash
sudo snap install hugo

Enabling/Disabling Removable Media Access:

Grant or revoke access to removable media for Hugo:

  • Enable: sudo snap connect hugo:removable-media
  • Disable: sudo snap disconnect hugo:removable-media

Creating a New Site:

  • Create a new Hugo site named “quickstart”:
text
hugo new site quickstart
  • Navigate to the newly created directory:
bash
cd quickstart
  • Initialize a Git repository for version control:
bash
git init
  • Install the Ananke theme using Git submodules:
bash
git submodule add
https://github.com/theNewDynamic/gohugo-theme-ananke.
git themes/ananke
  • Configure the site to use the Ananke theme by adding a line to hugo.toml:
text
echo "theme = 'ananke'" >> hugo.toml
  • Start the Hugo development server:
text
hugo server

Adding Content:

  • Create a new Markdown file for your content:
text
hugo new content posts/my-first-post.md
  • Edit the content of my-first-post.md with your preferred editor.
  • (Optional) Include draft content in the development server by running one of these commands:
text
hugo server --buildDraftshugo server -D

Building and Running the Site:

  • Build the entire static website:
text
hugo
  • The built website will be located in the public directory.
  • Start the development server to view the site during development:
text
hugo server -D

Further Configuration:

Refer to the official Hugo documentation (https://gohugo.io/getting-started/configuration/) for detailed configuration options.