How to use the hugo static site generator on linux

Alibaba Clouder January 27, 2020 1,326 0

Hugo is one of the popular static site generators amongst Jekyll, Pelican, and Metalsmith. Before diving into the details of Hugo’s concepts, it’s crucial to understand the differences between a content management system (CMS) and a static site generator.

A CMS stores page content in a database, which acts as a central repository for all the content. A CMS helps to manage content easily, but at the expense of performance, security, and backups. There are several integrations for a CMS to facilitate several things than generating an HTML site. Organizations often use CMS for integration with ERP, CRM, and social media platforms for executing marketing campaigns.

On the other hand, a static site generator only helps to create HTML websites with greater ease. A static site generator usually acts as a trade-off between an HTML-only site developed from scratch and a full-fledged CMS. You can generate an HTML site with only markdown files (raw data) and templates. The generated result is what is transferred onto the server.

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use and quick integration. Hugo is extremely powerful and is capable of rendering any medium size website in a fraction of seconds.

This tutorial explores how to set up a Hugo Static Site Generator on Alibaba Cloud Elastic Compute Service (ECS) with Ubuntu 16.04 (64-bit) system image installed.

Prerequisites

  • To begin with, you must have Alibaba Cloud Elastic Compute Service (ECS) up and running with a valid payment method. If you are new to Alibaba Cloud, create an account by clicking here to use Alibaba Cloud products worth over $300 – $1200.

If you don’t know how to set up ECS instance, refer to this tutorial or a quick-start guide.

  • Also, you’ll need clients such as Putty or a simple SSH (for any Linux devices like Macintosh/Ubuntu) to access ECS instance.

Setting Up Server

Access the ECS instance via Putty using the following details.

IP: ECS Instance Internet IP Address
Port: 22
Username: Root
Password: Provided at run time

For any Linux devices like Macintosh/Ubuntu, log in using SSH as shown below.

Enter the password to proceed.

Also, run the following command to identify whether Ubuntu uses 64-bit or 32-bit architecture.

Getting Started

Download the latest package for Linux from the Git repository using the command below.

After successful download, install the Debian package by executing the following command.

Verify successful installation by running the following command to check the Hugo version.

Next, run the following command to install Git for cloning themes for Hugo Website.

Now execute the command below to clone all the themes available for the Hugo static site generator. This may take longer as there are many themes to download.

Run the following commands to set the Linux level environment variables and some other configurations shown below.

Now run the command below to install additional software that Hugo requires for generating static site based on the templates.

Execute the command below to generate the site.

Now create a new hugo-demosite using the below command.

Successful execution of preceding commands creates a new Hugo site in /root/hugo-demosite .

Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ , or create your own with the “hugo new theme ” command.

Also, add some content. Add single files with “hugo new /.” command.

Now start the built-in live server via hugo server command.

Note: Visit https://gohugo.io/ for quickstart guide and full documentation.

Now you see the new site is created within a folder.

Now edit the post with nano as shown below.

Replace the content with the following content.

A Bit About Me

I like alpacas and I’m a fan of static sites.

How to use the hugo static site generator on linux

Next, run hugo command to rebuild the site.

Finally, remove the public directory and run the server using the commands below.

Lastly, access the website via a defined IP address as shown below.

How to use the hugo static site generator on linux

There you go! You have successfully set up the Hugo on your Alibaba Cloud ECS.

Note: In case you are not able to access your site, check whether the port 1313 in the security group of Alibaba Cloud ECS instance is open.

In-depth articles on Node.js, Microservices, Kubernetes and DevOps.

In this article:

In this article, I’m going to show how you can quickly generate a static site with Hugo and Netlify in an easy way.

What are static site generators, and why do you need one?

Simply put, a static site generator takes your content, applies it to a template, and generates an HTML based static site. It’s excellent for blogs and landing pages.

  • Quick deployment
  • Secure (no dynamic content)
  • Fast load times
  • Simple usage
  • Version control

So, what are the popular options in terms of static site generators?

  • Gatsby (React/JS)
  • Hugo (Go)
  • Next.js (React/JS)
  • Jekyll (Ruby)
  • Gridsome (Vue/JS)

These are the most starred projects on GitHub. I’ve read about Hugo previously, and it seemed fun to try out, so I’m going to stick with Hugo.

What is Hugo?

The official website states that Hugo is the world’s fastest static website engine.

How to use the hugo static site generator on linux

We can confirm that it’s really fast. Hugo is written in Golang. It also comes with a rich theming system and aims to make building websites fun again.

Let’s see what we got here.

Installing Hugo

To verify your install:

Using Hugo

Create a new project:

Add a theme for a quick start. You can find themes here.

Add the theme to the config file.

Add some content.

It should look something like this:

There are lots of options (tags, description, categories, author) you can write to the front matter details.

You can read more about the details here.

Take a look at what we made:

Understanding Hugo’s directory structure

  • archetypes: Archetypes are content template files that contain preconfigured front matter (date, title, draft). You can create new archetypes with custom preconfigured front matter fields.
  • assets: Assets folder stores all the files, which are processed by Hugo Pipes. (e.g. CSS/Sass files) This directory is not created by default.
  • config.toml: Hugo uses the config.toml , config.yaml , or config.json (if found in the site root) as the default site config file. Instead of a single config file, you can use a config directory as well to separate different environments..
  • content: This is where all the content files live. Top level folders count as content sections. If you have devops and nodejs sections, then you will have content/devops/first-post.md and content/nodejs/second-post.md directories.
  • data: This directory is used to store configuration files that can be used by Hugo when generating your website.
  • layouts: Stores templates in the form of .html files. See the Styling section for more information.
  • static: Stores all the static content: images, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is.
  • themes: Hugo theme of your choice.

Styling our static site

Remember, we applied a theme before. Now, if we inspect the themes folder, we can see the styling files.

DO NOT EDIT THESE FILES DIRECTLY.

Instead, we will mirror the theme directory structure to the root layouts folder.

Let’s say I want to apply custom CSS to the theme.

The theme has a themes/theme-name/layouts/partials folder, where we can find some HTML templates (header.html, footer.html). Now we will edit the header.html template, so copy the content from this file to layouts/partials/header.html and be careful to create the same directory structure like the theme’s into the root layouts folder.

Create a custom CSS file: static/css/custom-style.css .

Add the custom css file to config.toml :

Add this code inside the tag:

Now you can overwrite CSS classes applied by your theme.

Deploying our static site to Netlify

One of the benefits of a static site is that you can deploy it easily. Netlify or AWS S3 is a very good choice for hosting a static site. Let’s see how to deploy it to Netlify.

  • Netlify account
  • Github repository

What to do on Netlify

  1. Create a git repository
  2. Create a netlify.toml file into the root of your project with the content below.
  1. Now, if you push your code to Github, Netlify will deploy the site, and blogging shall start.
  2. Connect Netlify and your Git repository
  3. Build and deploy

You can also take a look at the Hugo official Netlify hosting details for further information.

AWS S3 + CI

We will be using Terraform to create an S3 bucket that will host our static site. I assume you have an AWS account.

Create an s3_bucket.tf file in your project and insert the content below to it:

Then, folllow these steps:

  • execute terraform init
  • insert the following code snippet
  • execute terraform apply

This will create a public readable AWS S3 bucket, which will host the static site.

Now we have to take care of building the static site on our own: we need a CI tool.

Setting up CircleCI for continuous integration

At RisingStack, we’re usually using CircleCI for these kinds of tasks. Let’s set up the build process.

Create the following files in the project root: .circleci/config.yml

Apply the following code to config.yml :

Note: To add AWS credentials, locate the AWS Permissions link under the Permissions section in CircleCI.

Moving forward with Hugo

Hugo offers so much more you should know about. Discover the official documentation here.

Hugo is a static site generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates, and renders them into a full HTML website.

Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.

Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.

Hugo is meant to work well for any kind of website including blogs, tumblelogs and docs.

Complete documentation is available at https://gohugo.io/

Latest reviews

Hugo is a really nice too for creating a static website. There is a bit of a learning curve though, and you will need to read though documentation on their site, and maybe watch a few videos. On the plus side, static sites are far easier to host as they require far fewer resources than dynamic generators such as wordpress. Once you are up and running, you just write your content in markdown and hugo creates the html for you – quickly. Hugo runs on command line – no GUI, so read the docs to figure out what to do with it. You may also want to go to their GitHub page for the latest version.

How to use the hugo static site generator on linux

In the next article we are going to take a look at Hugo. This is one of the open source static site generators most popular, which is also completely free. With its amazing speed and flexibility, this generator makes website building quick and easy. Is about a generator sitios web Static HTML and CSS written in Go. It is optimized for speed, ease of use, and configurability.

Creating a website is a process that requires some time and knowledge of HTML and other languages. For this reason, this static site builder can be of great help in creating websites quickly. It should be clarified that when we talk about static websites we mean sites that do not process data. That is, they cannot process forms or generate documents. These websites are generally made for small projects and informational sites.

Table of Contents

General characteristics of Hugo

  • A high speed. As stated on their website, this is the fastest tool of its kind. The average site is built in less than a second.
  • Robust content management and flexibility rules. Hugo is a content strategist’s dream. Hugo supports unlimited content types, taxonomies, menus, API-driven dynamic content, and more, all without add-ons.
  • Shortcodes offer us the ability to use Markdown syntax, providing great flexibility.
  • Integrated templates. This static website builder has common patterns to create our work quickly. Hugo ships with pre-made templates to do quick SEO work, comments, analytics, and other features.
  • Custom outputs. Allows us generate our content in multiple formats, including JSON or AMP, and thus facilitate the creation of content.
  • More than 300 themes available, giving us a robust theme system that is easy to implement, yet capable of producing even the most complicated websites. Can be cast a look at the topics available on the project website.

Install Hugo on Ubuntu

Hugo is quite a popular program and this makes installing it on Gnu / Linux and specifically Ubuntu a simple process. The first available installation option will be using the precompiled packages that can be found in the project release page. To download the .deb package, we will only have to open a terminal (Ctrl + Alt + T) and execute the following command:

How to use the hugo static site generator on linux

After the download, we will be able to install it by executing this other command in the same terminal:

At the end of the installation we can start working.

Another possibility to install this program will be through your snap pack. Installation will be as simple as opening a terminal (Ctrl + Alt + T) and typing in it:

First Steps

Hugo is a website builder. So the first thing we need to do is create a new site using the following format:

For this example I have created a new site with the command:

This will create a new folder called winding In the address book home of user. To begin we are going to access this folder and we will start the work from there.

The next thing we will do is add a new theme for the site. If you want to add all available themes, you can use the command:

This installs all the Hugo themes, so it can take a long time. It can be helpful to try which one you want. In my case, I chose a specific topic, so instead of the above command I used the following:

It is important that we place the topics in the binder themes, which we are going to find inside the folder in which we are working.

After installing the theme, we must tell Hugo to use that particular theme. To do this we must define it in the config.tom file, which we will find in the working folder as indicated in the following screenshot.

Once the changes are made, we save and close. Now all we have to do is create a new index to display on the site. We will do this with the following command:

As you can see, the file has an md extension, this means that we can add content using Markdown. This file can be found and edited within the content folder.

We can also create new categories to shape the site:

At this point, to view our website, we will use the following command:

How to use the hugo static site generator on linux

And as you can see in the following screenshot, our website will be available from the browser at http: // localhost: 1313.

How to use the hugo static site generator on linux

In short, Hugo is a program that only creates static websites, but it is very useful in certain cases. You can get more information about the project in your site or official documentation.

The content of the article adheres to our principles of editorial ethics. To report an error click here!.

Full path to article: ubunlog » Ubuntu » Hugo, a fast, flexible and static website builder

A Fast and Flexible Static Site Generator built with love by bep, spf13 and friends in Go.

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.

Hugo relies on Markdown files with front matter for metadata, and you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.

Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.

Hugo is designed to work well for any kind of website including blogs, tumbles, and docs.

Currently, we provide pre-built Hugo binaries for Windows, Linux, FreeBSD, NetBSD, DragonFly BSD, OpenBSD, macOS (Darwin), and Android for x64, i386 and ARM architectures.

Hugo may also be compiled from source wherever the Go compiler tool chain can run, e.g. for other operating systems including Plan 9 and Solaris.

Complete documentation is available at Hugo Documentation.

Choose How to Install

If you want to use Hugo as your site generator, simply install the Hugo binaries. The Hugo binaries have no external dependencies.

To contribute to the Hugo source code or documentation, you should fork the Hugo GitHub project and clone it to your local machine.

Finally, you can install the Hugo source code with go , build the binaries yourself, and run Hugo that way. Building the binaries is an easy task for an experienced go getter.

Install Hugo as Your Site Generator (Binary Install)

Build and Install the Binaries from Source (Advanced Install)

Fetch from GitHub

To fetch and build the source from GitHub:

If you are a Windows user, substitute the $HOME environment variable above with %USERPROFILE% .

If you want to compile with Sass/SCSS support use –tags extended and make sure CGO_ENABLED=1 is set in your go environment. If you don’t want to have CGO enabled, you may use the following command to temporarily enable CGO only for hugo compilation:

The Hugo Documentation

The Hugo documentation now lives in its own repository, see https://github.com/gohugoio/hugoDocs. But we do keep a version of that documentation as a git subtree in this repository. To build the sub folder /docs as a Hugo site, you need to clone this repo:

Contributing to Hugo

Note March 16th 2022: We are currently very constrained on human resources to do code reviews, so we currently require any new Pull Requests to be limited to bug fixes closing an existing issue. Also, we have updated to Go 1.18, but we will currently not accept any generic rewrites, “interface<> to any” replacements and similar.

For a complete guide to contributing to Hugo, see the Contribution Guide.

We welcome contributions to Hugo of any kind including documentation, themes, organization, tutorials, blog posts, bug reports, issues, feature requests, feature implementations, pull requests, answering questions on the forum, helping to manage issues, etc.

The Hugo community and maintainers are very active and helpful, and the project benefits greatly from this activity.

Asking Support Questions

We have an active discussion forum where users and developers can ask questions. Please don’t use the GitHub issue tracker to ask questions.

If you believe you have found a defect in Hugo or its documentation, use the GitHub issue tracker to report the problem to the Hugo maintainers. If you’re not sure if it’s a bug or not, start by asking in the discussion forum. When reporting the issue, please provide the version of Hugo in use ( hugo version ).

The Hugo project welcomes all contributors and contributions regardless of skill or experience level. If you are interested in helping with the project, we will help you with your contribution. Hugo is a very active project with many contributions happening daily.

We want to create the best possible product for our users and the best contribution experience for our developers, we have a set of guidelines which ensure that all contributions are acceptable. The guidelines are not intended as a filter or barrier to participation. If you are unfamiliar with the contribution process, the Hugo team will help you and teach you how to bring your contribution in accordance with the guidelines.

For a complete guide to contributing code to Hugo, see the Contribution Guide.

In this tutorial we learn how to install hugo on Kali Linux.

What is hugo

Hugo is a static site generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates, and renders them into a full HTML website.

Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don??t have a privileged account.

Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.

Hugo is meant to work well for any kind of website including blogs, tumblelogs and docs.

Complete documentation is available at https://gohugo.io/

There are three ways to install hugo on Kali Linux . We can use apt-get , apt and aptitude . In the following sections we will describe each method. You can choose one of them.

Install hugo Using apt-get

Update apt database with apt-get using the following command.

After updating apt database, We can install hugo using apt-get by running the following command:

Install hugo Using apt

Update apt database with apt using the following command.

After updating apt database, We can install hugo using apt by running the following command:

Install hugo Using aptitude

If you want to follow this method, you might need to install aptitude first since aptitude is usually not installed by default on Kali Linux. Update apt database with aptitude using the following command.

After updating apt database, We can install hugo using aptitude by running the following command:

How To Uninstall hugo on Kali Linux

To uninstall only the hugo package we can use the following command:

Uninstall hugo And Its Dependencies

To uninstall hugo and its dependencies that are no longer needed by Kali Linux, we can use the command below:

Remove hugo Configurations and Data

To remove hugo configuration and data from Kali Linux we can use the following command:

Remove hugo configuration, data, and all of its dependencies

We can use the following command to remove hugo configurations, data and all of its dependencies, we can use the following command:

References

Summary

In this tutorial we learn how to install hugo using different package management tools like apt, apt-get and aptitude.

A fast and flexible static site generator. Hugo is great for content-driven websites, because it is completely dependency-free and is easy to get going.

How to use the hugo static site generator on linux

Overview

What is a Static Site Generator (SSG)? These days websites has grown to deliver more and more content. As result, the web development industry found new ways to make the process of maintaining and updating sites more efficient. A static site generator is essentially a set of tools for building static websites based on a set of input files.

Static site generators build a web page once, at the moment you’re creating new content or editing it. In contrast, content management systems like WordPress build a page every time a visitor requests. There are a lot of advantages and benefits to choosing a static site generator like Hugo over a system like WordPress.

One of the biggest benefits of having a static site is definitely speed. Static websites are incredibly fast. Hugo is labeled as one of the most easiest static website generators. Hugo is the fastest tool of its kind. At

Hugo allows you to output your content in multiple formats, including JSON or AMP, and makes it easy to create your own. It supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins. Hugo also ships with pre-made templates. It also provides full i18n support for multi-language sites

Requirements

  1. Hugo runs on a standard version of all major desktop operating systems – Windows, MacOS and the various flavors of Unix.
  2. You need to have Go installed to use Hugo modules. If you plan to not use Hugo modules and manually place the theme in the themes folder of the website, then Go installation is not required. If Hugo isd installed via the package manager, the package manager takes care of installing the Go Language. The installation instruction for Go are present at golang.org/doc/install. You do not need to learn Go or use it directly within Hugo.
  3. While git is not required to use Hugo, if git is used as a version control system, Hugo provides access to the metadata in the templates. Git is available in all package managers as git. You can also get git from git-scm.com/. You can learn more about git from Git in Practice and Learn Git in a Month of Lunches.

Features

Hugo boasts blistering speed, robust content management, and a powerful templating language making it a great fit for all kinds of static websites.

General

  • Extremely fast build times (< 1 ms per page)
  • Completely cross platform, with easy installation on macOS, Linux, Windows, and more
  • Renders changes on the fly with LiveReload as you develop
  • Powerful theming
  • Host your site anywhere

Organization

  • Straightforward organization for your projects, including website sections
  • Customizable URLs
  • Support for configurable taxonomies, including categories and tags
  • Sort content as you desire through powerful template functions
  • Automatic table of contents generation
  • Dynamic menu creation
  • Pretty URLs support
  • Permalink pattern support
  • Redirects via aliases

Content

  • Native Markdown and Emacs Org-Mode support, as well as other languages via external helpers (see supported formats)
  • TOML, YAML, and JSON metadata support in front matter
  • Customizable homepage
  • Multiple content types
  • Automatic and user defined content summaries
  • Shortcodes to enable rich content inside of Markdown
  • “Minutes to Read” functionality
  • “WordCount” functionality

Additional Features

  • Integrated Disqus comment support
  • Integrated Google Analytics support
  • Automatic RSS creation
  • Support for Go HTML templates
  • Syntax highlighting powered by Chroma

Installation Guide

Install Hugo on macOS, Windows, Linux, OpenBSD, FreeBSD, and on any machine where the Go compiler tool chain can run.

Hugo is written in Go with support for multiple platforms. The latest release can be found at Hugo Releases.

Hugo currently provides pre-built binaries for the following:

  • macOS (Darwin) for x64, i386, and ARM architectures
  • Windows
  • Linux
  • OpenBSD
  • FreeBSD

Hugo may also be compiled from source wherever the Go toolchain can run; e.g., on other operating systems such as DragonFly BSD, OpenBSD, Plan 9, Solaris, and others. See https://golang.org/doc/install/source for the full set of supported combinations of target operating systems and compilation architectures.

Quick Install

Binary (Cross-platform)

Download the appropriate version for your platform from Hugo Releases. Once downloaded, the binary can be run from anywhere. You don’t need to install it into a global location. This works well for shared hosts and other systems where you don’t have a privileged account.
Ideally, you should install it somewhere in your PATH for easy use. /usr/local/bin is the most probable location.

Docker

We currently do not offer official Hugo images for Docker, but we do recommend these up to date distributions:
https://hub.docker.com/r/klakegg/hugo/

Homebrew (macOS)

If you are on macOS and using Homebrew, you can install Hugo with the following one-liner:

For more detailed explanations, read the installation guides that follow for installing on macOS and Windows.

MacPorts (macOS)

If you are on macOS and using MacPorts, you can install Hugo with the following one-liner:

Homebrew (Linux)

If you are using Homebrew on Linux, you can install Hugo with the following one-liner:

Installation guides for Homebrew on Linux are available on their website.

Chocolatey (Windows)

If you are on a Windows machine and use Chocolatey for package management, you can install Hugo with the following one-liner:

Or if you need the “extended” Sass/SCSS version:

Scoop (Windows)

If you are on a Windows machine and use Scoop for package management, you can install Hugo with the following one-liner:

How to use the hugo static site generator on linux

Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website.

Hugo makes use of markdown files with front matter for meta data.
Written in GoLang for speed, Hugo is significantly faster than most other static site generators.

A typical website of moderate size can be rendered in a fraction of a second. A good rule of thumb is that Hugo takes around 1 millisecond for each piece of content. It’s so fast that it will render the site in less time than it takes to switch to your browser and reload.

Hugo is made to be very flexible. Define your own content types. Define your own indexes. Build your own templates, shortcodes and more. It is written to work well with any kind of website including blogs, tumbles and docs.

Installing Hugo

Hugo is written in GoLang with support for Windows, Linux, FreeBSD and OSX.

The latest release can be found at hugo releases. We currently build for Windows, Linux, FreeBSD and OS X for x64 and 386 architectures.

Installation is very easy. Simply download the appropriate version for your platform from hugo releases. Once downloaded it can be run from anywhere. You don’t need to install it into a global location. This works well for shared hosts and other systems where you don’t have a privileged account.

Ideally you should install it somewhere in your path for easy use. /usr/local/bin is the most probable location.

The Hugo executible has no external dependencies.

Installing from source

Dependencies

  • Git
  • Go 1.1+
  • Mercurial
  • Bazaar

Clone locally (for contributors):

Because go expects all of your libraries to be found in either $GOROOT or $GOPATH, it’s helpful to symlink the project to one of the following paths:

  • ln -s /path/to/your/hugo $GOPATH/src/github.com/spf13/hugo
  • ln -s /path/to/your/hugo $GOROOT/src/pkg/github.com/spf13/hugo

Get directly from Github:

If you only want to build from source, it’s even easier.

Building Hugo

Running Hugo

Complete documentation is available at Hugo Documentation.

How to use the hugo static site generator on linux

Do you want to start a blog to share your latest adventures with various software frameworks? Do you love a project that is poorly documented and want to fix that? Or do you just want to create a personal website?

Many people who want to start a blog have a significant caveat: lack of knowledge about a content management system (CMS) or time to learn. Well, what if I said you don’t need to spend days learning a new CMS, setting up a basic website, styling it, and hardening it against attackers? What if I said you could create a blog in 30 minutes, start to finish, with Hugo?

How to use the hugo static site generator on linux

Hugo is a static site generator written in Go. Why use Hugo, you ask?

  • Because there is no database, no plugins requiring any permissions, and no underlying platform running on your server, there’s no added security concern.
  • The blog is a set of static websites, which means lightning-fast serve time. Additionally, all pages are rendered at deploy time, so your server’s load is minimal.
  • Version control is easy. Some CMS platforms use their own version control system (VCS) or integrate Git into their interface. With Hugo, all your source files can live natively on the VCS of your choice.

Programming and development

To put it bluntly, Hugo is here to make writing a website fun again. Let’s time the 30 minutes, shall we?

Minutes 0-5: Download Hugo and generate a site

To simplify the installation of Hugo, download the binary file. To do so:

  1. Download the appropriate archive for your operating system.
  2. Unzip the archive into a directory of your choice, for example C:\hugo_dir or

  • On Unix: $/[hugo version]
  • On Windows: $\[hugo.exe version]
    For example, c:\hugo_dir\hugo version .

For simplicity, I’ll refer to the path to the Hugo binary (including the binary) as hugo . For example, hugo version would translate to C:\hugo_dir\hugo version on your computer.

If you get an error message, you may have downloaded the wrong version. Also note there are many possible ways to install Hugo. See the official documentation for more information. Ideally, you put the Hugo binary on PATH. For this quick start, it’s fine to use the full path of the Hugo binary.

  1. Create a new site that will become your blog: hugo new site awesome-blog .
  2. Change into the newly created directory: cd awesome-blog .

Congratulations! You have just created your new blog.

Minutes 5-10: Theme your blog

With Hugo, you can either theme your blog yourself or use one of the beautiful, ready-made themes. I chose Kiera because it is deliciously simple. To install the theme:

  1. Change into the themes directory: cd themes .
  2. Clone your theme: git clone https://github.com/avianto/hugo-kiera kiera . If you do not have Git installed:
    • Download the .zip file from GitHub.
    • Unzip it to your site’s themes directory.
    • Rename the directory from hugo-kiera-master to kiera .
  3. Change the directory to the awesome-blog level: cd awesome-blog .
  4. Activate the theme. Themes (including Kiera) often come with a directory called exampleSite , which contains example content and an example settings file. To activate Kiera, copy the provided config.toml file to your blog:
    • On Unix: cp themes/kiera/exampleSite/config.toml .
    • On Windows: copy themes\kiera\exampleSite\config.toml .
    • Confirm Yes to override the old config.toml
  5. (Optional) You can start your server to visually verify the theme is activated: hugo server -D and access http://localhost:1313 in your web browser. Once you’ve reviewed your blog, you can turn off the server by pressing Ctrl+C in the command line. Your blog is empty, but we’re getting someplace. It should look something like this:

How to use the hugo static site generator on linux

You have just themed your blog! You can find hundreds of beautiful themes on the official Hugo themes site.

Minutes 10-20: Add content to your blog

Whereas a bowl is most useful when it is empty, this is not the case for a blog. In this step, you’ll add content to your blog. Hugo and the Kiera theme simplify this process. To add your first post:

  1. Article archetypes are templates for your content.
  2. Add theme archetypes to your blog site:
    • On Unix: cp themes/kiera/archetypes/* archetypes/
    • On Windows: copy themes\kiera\archetypes\* archetypes\
    • Confirm Yes to override the default.md archetype
  3. Create a new directory for your blog posts:
    • On Unix: mkdir content/posts
    • On Windows: mkdir content\posts
  4. Use Hugo to generate your post:
    • On Unix: hugo new posts/first-post.md
    • On Windows: hugo new posts\first-post.md
  5. Open the new post in a text editor of your choice:
    • On Unix: gedit content/posts/first-post.md
    • On Windows: notepad content\posts\first-post.md

At this point, you can go wild. Notice that your post consists of two sections. The first one is separated by +++ . It contains metadata about your post, such as its title. In Hugo, this is called front matter. After the front matter, the article begins. Create the first post:

All you need to do now is start the server: hugo server -D . Open your browser and enter: http://localhost:1313/ .

How to use the hugo static site generator on linux

Minutes 20-30: Tweak your site

What we’ve done is great, but there are still a few niggles to iron out. For example, naming your site is simple:

If you’re looking to add static website generation into your development lifecycle, Jack Wallen wants to show you how to do so with Hugo.

How to use the hugo static site generator on linux
Image: RobertAx/Getty Images/iStockphoto

There are several reasons why your business might want to start employing a static website generator. One reason is because you need to be able to quickly roll out websites without having to bother coding them. Or, you might want to eventually get to the point of automating this process for regular static site deployment.

Networking: Must-read coverage

  • 5 programming languages network architects should learn (free PDF)
  • Behind the scenes: A day in the life of a database administrator
  • 20 steps to decommission a redundant data center facility
  • 17 Terminal commands every user should know

With tools like Hugo (which has been around for nearly 10 years), you can use pre-defined templates to generate a full static website. The pages are served very fast, so if speed is what you’re looking for, this might be the tool you need. One thing you must know about Hugo-built sites is that there’s no database backend or plugins to expand the feature set. These are static sites at their heart.

However, with the right developer magic, you can use these types of sites to bolster your companies online presence, using them in kiosks, embedded systems or just about any use-case that could benefit from lightning-fast static sites.

If this sounds like something you might want to try, you’re in luck, because I’m going to walk you through the steps of deploying your first site with Hugo.

SEE: Checklist: Server inventory (TechRepublic Premium)

What you’ll need

Hugo can be installed on both Linux and macOS. I’ll be demonstrating this process with Ubuntu Server 20.04, so you’ll need a running instance of the open-source operating system and a user with sudo privileges.

How to install Hugo

Hugo can be found in the standard Linux repositories, so installation is but a command away. Log in to your Ubuntu Server instance and issue the command:

sudo apt-get install hugo -y

Hugo also depends on Git, so let’s get that installed as well (in case it’s not already installed):

sudo apt-get install git -y

That’s it for the installation.

How to create your first site

The first thing you’ll want to do is browse through the Hugo Themes repository and find a theme you want to use for your site. Once you’ve found a theme you like, make sure to copy the GitHub CLI download link.

We’ll use the hugo command to generate the foundation for our new site (let’s call it test), with the command:

hugo new site test

Change into the newly-created directory with the command:

Next, you need to initialize the new site for git with the command:

Now we’ll download the theme from the repository. Change into the themes directory with the command:

Now, download the theme with the command:

git submodule add URL

Where URL is the URL for the theme you want to use. For example, I’ll deploy a site based on the DPSG theme, so the command would be:

git submodule add https://github.com/pfadfinder-konstanz/hugo-dpsg

You should now see a new sub-folder for the theme. Change into that folder with the command:

Where FOLDER is the name of the new folder.

Copy all of the content into the root directory with the command:

Change back into the root directory with the command:

Next, we need to copy the config.toml file (from the exampleSite directory) into the root directory of our test site with the command:

Now, let’s launch our first Hugo site with the command:

Hugo is now serving the static site. The only problem is, you can’t reach it because it’s only serving the site to localhost. Although you can change the baseURL option in the config.toml file, it won’t help. Instead, you need to launch the Hugo test site with the command:

hugo server –bind=SERVER –baseURL=http://SERVER:1313

Where SERVER is either the IP address or domain of the hosting server. When you launch the Hugo test site with the above command, you can then point a web browser to http://SERVER:1313 (where SERVER is the IP address or domain of the hosting server) and see the theme for your new site.

How to modify a theme

This is where it gets really impressive. Keep the site running and log in to your Hugo server with another terminal window. Change into the test folder and open the config.toml file for editing with the command:

In that file make an edit, such as changing the line:

title = “Hugo DPSG”

title = “TechRepublic Test Site”

As soon as you save and close the file, the Hugo server will detect the change and rebuild the site automatically. If you refresh the page in the web browser, you’ll see the change. You can go through the config.toml file and customize it to perfectly fit your needs.

When you’re finished with the test, stop the Hugo server (in the terminal where you ran the hugo server command), by hitting the Ctrl+c keyboard shortcut.

And that’s all there is to deploying your first static site with Hugo. You can now start deploying static sites or work Hugo into your website development cycle to create a system for the automatic deployment of lightning-fast static sites.

How to use the hugo static site generator on linux

Developer Essentials Newsletter

From the hottest programming languages to the jobs with the highest salaries, get the developer news and tips you need to know.

Documentation is a must in every software development project. Reliable documentation provides an accurate overview of your software, good insight on how to use your software, and easy onboarding for new users of your software.

In this tutorial, I will teach you how to build a documentation website for your software projects using Hugo and the Docsy theme. Hugo is a speed optimized static site generator written in the Go programming language. Hugo can generate documentation websites, blogs portfolio websites, etc. directly from a markdown file and HTML files.

Table of contents

  • Install Hugo.
  • Create your website.
  • Install and set up the Docsy theme.
  • Add a content section to your website.
  • Add a documentation page to your website.
  • Preview your website.
  • Build your website.
  • Conclusion.

Prerequisites

This guide assumes that you have th following installed:

  • Go installed on your local machine – visit ednsquare.com for instructions on how to install Go on macOS, Windows, and Linux. (macOS and Linux) – visit brew.sh for instructions on how to install homebrew on macOS and Linux. (Windows) – visit chocolatey.org for instructions on how to install chocolatey on Windows. : Download Nodejs to install npm on your local machine.

Step 1 – Install Hugo

The Docsy theme uses the Hugo-extended version of Hugo. Install the Hugo-extended version on macOS and Linux with Homebrew.

Verify your installation.

Install the Hugo-extended version on Windows with Chocolatey.

Verify your installation.

Step 2 – Create your website

Create a new Hugo website with the hugo new site command.

The hugo new site command will also generate a directory with the following file structure:

The following files are:

  • archetypes : Directory for storing content template files.
  • config.toml : Hugo configuration file.
  • content : Directory for content files.
  • data : Directory for storing configuration files.
  • layouts : Directory for storing .html template files.
  • static : Directory for storing all static contents.
  • themes : Directory for storing your themes.

Step 3 – Install the Docsy theme

The Docsy theme is a Hugo theme that is built specifically for creating medium to large technical documentation websites. The theme comes preloaded with basic documentation features like the search bar, the menu, etc.

To install the Docsy theme, we can follow these steps:

  1. cd to your project’s directory.
  1. Install postCSS and autoprefixer.
  • On macOS and Linux.
  • On Windows.
  1. Install the Docsy theme by adding it into your project as a git submodule.

Step 4 – Add a content section to your website

All your website’s content files are stored in the content folder found in your root folder. The top-level subfolders in the content folder will determine the sections of your website by default, and the nested subfolders inside these top-level subfolders combine to form your website structure as they are organized in their top-level subfolders.

To add a custom section to your website, we can do the following:

  1. cd to the content folder.
  1. Create a new subfolder with the custom section name ie documentation .
  1. Add the new section to your menu for easier navigation by editing your config.toml file.

Note: Most editing apps will encode your cofig.toml file incorrectly. Make sure to open your config.toml file with notepad++ on windows start notepad++ .\config.toml , or use a code editor like Visual Studio Code.

Visit gohugo.io to learn more about creating sections.

Step 5 – Add a documentation page to your website

Add pages to your website by creating markdown or HTML files inside the subfolders found in the content folder, and then specify the page layout in the page’s frontmatter. Layouts in Hugo determine your page’s header, footer, navigation, and are provided by your theme.

Docsy ships with layout for 3 type of content,

  • docs for documentation content.
  • blog for blog content.
  • community for your community-oriented content.

To add a documentation page to our documentation section:

  1. Create and add the markdown or HTML file into the documentation folder.
  1. Add the following yaml frontmatter to configure the page’s information and layout type.
  1. Add markup to your page.

Visit docsy.dev to learn more about adding content to your website.

Step 6 – Preview your website

Hugo ships with a web server that has live reload built-in. This allows you to preview your changes in real-time when your web server is running.

Start your web server with the following command:

The web server will be hosted at http://localhost:1313, and will automatically reload when you make any changes in your website’s files.

How to use the hugo static site generator on linux

Step 7 – Build your website

Build your website with the hugo command. The command will generate all your website’s static files and store them in the ./public/ directory.

You can deploy your website on different hosting platforms like AWS, Github pages, Netlify, etc. with the generated static files.

Conclusion

Documentation is an essential part of any software development project and can determine the success of failure of your project. By following this tutorial, you can have your Hugo documentation website set up easily with all your static files generated.

There are tons of other configuration options you can edit to improve the look and feel of your website.

How to use the hugo static site generator on linux

Hugo is one of the world’s fastest framework for building websites and most popular open-source SSG(static site generators).

It is written in Go language. It accepts data files, configurations, layouts templates, static files, i18n bundles, and content written down in Markdown and renders a static website.

Hugo a Static Site Generator(SSG)

With its amazing speed and flexibility, Hugo makes building websites fun with numerours features.

Some features such as shortcodes support within Markdown, in built SEO, commenting, anayltics, Multilingual & i18n, custom output format like JSON or AMP, unlimited content types and many more capabilities, add feathers to it.

Hugo also supports page caching that will allow browsers to serve content locally without any extra network call by fingerprinting static resources that aren’t expected to change.

Hugo reduces operations overhead by using serverless hosting. It’s also developer friendly that doesn’t require security or framework upgrades or accessing a live production server.

It can be installed via the Snapcraft store as a snap package or with apt .

Installing Hugo as a Snap Package

Canonical manages and distributes the Hugo snap package, the one behind Ubuntu.

Snap packages are secure & easy to upgrade. As Snaps are self-contained software packages. It includes all dependencies needed to run an application.

Open your terminal ( Ctrl+Alt+T ) and run the below command with sudo privileges

This command will install the latest stable hugo and other dependencies too. The snap package will automatically update(in the background) whenever a new version of hugo is released.

Install Extended Version

To switch between the two, use either snap refresh hugo –channel=extended or snap refresh hugo –channel=stable .

Installing Hugo with apt

Hugo deb is already available in the default Ubuntu repositories.

Open your terminal ( Ctrl+Alt+T ) and run the below command with sudo privileges

This command will install the latest hugo and other dependencies. It will also fix broken packages.

Hope you find this article helpful!

Keep helping and happy 😄 coding

A web geek, an industry experienced web developer & tutor/instructor residing in India 🇮🇳

LinuxLinks, like most modern websites, is dynamic in that content is stored in a database and converted into presentation-ready HTML when readers access the site.

While we employ built-in server caching which creates static versions of the site, we don’t generate a full, static HTML website based on raw data and a set of templates. However, sometimes a full, static HTML website is desirable. Because HTML pages are all prebuilt, they load extremely quickly in web browsers.

There are lots of other advantages of running a full, static HTML website.

Here’s some of the main ones:

  • Security: Less software is needed to produce a static site. A small software stack can improve security. Static sites do not contain dynamic content, and are therefore immune to most common attacks.;
  • Obsolescence: Running a dynamic site relies on a content management system that constantly needs to be updated. The foundations of a dynamic site changes over time;
  • Cost: Every time a visitor accesses a page, a set of database queries are made with dynamic sites. While caching reduces these queries, there’s always pages that aren’t in the cache or need to be refreshed. With a static site, the load on the server is considerably reduced;
  • Previewable: As static sites are developed locally, you can play around with the site to your heart’s content without affecting the live site.
  • Convenience: A static site means that data is easier to export than if it’s contained within a database.
  • Versionable: They are ideal to be used with version control system, such as Git.

A static site works very well in certain use cases. For example, it’s great for documentation. And static sites can be just as engaging as dynamic sites. The only real difference is that all the HTML is generated before being uploaded.

To provide an insight into the quality of software that is available, we have compiled a list of 7 best Go static site generators. All of these tools are released under a freely distributable license. Here’s our verdict.

How to use the hugo static site generator on linux

Let’s explore the Go static site generators at hand. For each application we have compiled its own portal page, a full description with an in-depth analysis of its features, together with links to relevant resources.

To build Hugo sites locally, install Homebrew and Hugo. You do not need to install Go to use Hugo as your static site generator. These instructions are for a Mac or Linux system, but you can also read the Windows installation instructions on the gohugo.io site.

Since Hugo is built on Go, you can use the binary for your operating system. No need to maintain a development environment. Upgrades are easy too, get a new binary and install it and you’re upgraded.

Prerequisites

  • Windows, MacOS, or a Linux-based environment.
  • On MacOS, you will install Homebrew.
  • On Windows, you must install Docker.
  • On Windows, you must install Git for Windows which includes Git Bash.

Set up Hugo on Windows with Git Bash and Docker

You can also set up Docker and then use this Docker image to install Hugo. With the Docker image, you set up alias commands for hugo running in Docker, but can work in Git Bash and follow this tutorial using the same hugo commands in Git Bash on Windows.

Set up Hugo on MacOS

    Install Homebrew. See the Homebrew site for instructions.

Use Homebrew to install Hugo.

Verify the hugo installation by checking the version value.

Starting a Hugo site

For a Hugo static site, you can choose your specific theme after you create the source files. The theme we’ll use in this tutorial is hugo-theme-learn. To start a new site in the current folder, run:

A curated guide to building a website using Hugo and Academic.

Introduction

This post is intended for anyone who needs a quick introduction and step-by-step guide to setting up your personal home page with Hugo and Academic.

Hugo is an open-source static site generator written in Go. It is primarily optimized for ease-of-use, which is exactly what I needed when I set out to create a personal website. It renders html content from markdown files, and has a huge collection of themes and templates for different use-cases.

Academic from Wowchemy is one such template commonly used in academia. Academic doesn’t have the minimalist design that some academics seem to prefer. However, it does have a minimalist approach to building the website, which I’ve come to appreciate. I have been using Hugo and Academic since 2 years to maintain my webpage, and would recommend this setup to anyone who wants a good-looking working website in a couple of hours (a.k.a grad students).

Getting started

To get started with Hugo, you need to install Go on your linux machine. You need to download Go and follow the instructions to install it:

Extract the tarball. You might need sudo to place it in /usr/local/ .

Add /usr/local/go/bin to the PATH. Add this line of code to your .bashrc or .zshrc file, then restart the terminal session.

If the installation was successfully, you should be able to see your Go version using:

Installing Hugo

Now that you have Go installed, you can install Hugo by building it from the source:

Note that the installation needs to be done with the extended tag for us to be able to use the Academic template. If the installation is successful, this will create a binary file named hugo in $GOPATH/src/bin/ , where $GOPATH is the path to your Go root directory. In my case, it was

If you want to make the hugo installation available system-wide, you can add it to /usr/local/bin .

If the installation was successfully, you should be able to see your hugo version using:

Academic template

Once you have hugo up and running, you can now make use of all the amazing off-the-shelf templates that are available with hugo.

I personally use the Academic template since I’m an academic (duh). You can get the starter code for this template using:

To preview the default template on your local machine, you can use:

This will provide you a link to open the website in your web browser (default: http://localhost:1313/ ). You can expect terminal output similar to this: How to use the hugo static site generator on linux

At this point, you have everything set up to start adding your own content to the website. The Academic template contains two main directories, config and content , their purpose being self-explanatory. On a high level, you need to add pages to the content folder, and references to these pages along with other website parameters in the config folder. This article has a great explanation on how to interpret and edit these files.

Deploying the website

After adding your content to the website, you can now deploy it online. As a grad student, you can either deploy it to your allocated school webpage or use github pages. I personally prefer github pages since it enables a more straightforward integration with hugo.

To create your website on github pages, you need to create a repository named your-github-username.github.io . This will also be the url of your website. The static content generated by hugo needs to be uploaded to this repository to reflect on your website.

Once you’re satisfied with your website locally, you can build the production version of your website using:

This will create the public folder in your root folder. This folder contains the ready-to-go version of your website. That is, you can upload this to any http server, and your website will be functional. A common problem that I’ve encountered is not setting the correct url here, which led to a poorly rendered webpage. How to use the hugo static site generator on linuxThis mostly happens if the baseurl in the config/_default/config.toml not set to the live url (including the / in the end) for your website. Modifying the baseurl should resolve this issue.

You can also automatically push the public folder by setting it up as a git repository. This part can be tricky since the root( starter-academic ) folder is already a git repository. To deploy the generated public folder on github pages, you need to add this folder as a git submodule.

This will make sure that the public and the root repositories have different remotes.

Once this is done, all that remains is to push the public folder changes to remote. This shell script automates that process:

How to use the hugo static site generator on linux

In this tutorial we will setup a Hugo Blog with the Kiera theme on Linux and will be using Ubuntu for this demonstration, but since Hugo runs on Go, you can run this on Windows, Linux or Mac.

Dependencies

We require git to download the theme from github, so first update your package managers indexes, and install git:

Install golang (optional):

When we source our profile, we sound be able to get the go version:

Now to install Hugo:

After sourcing the profile we should see the hugo version:

Create the Hugo Workspace

Create the directory where we will host our blogs and change into that directory:

Create your site with hugo:

Change into the directory that was created:

Themes

Hugo has a extensive list of themes, but for this demonstration we will use kiera.

Download the theme to the themes directory:

Let’s run the server and see how it looks like out of the box:

By default hugo uses the port 1313, so accessing Hugo should look like this:

How to use the hugo static site generator on linux

Customize Hugo

So let’s customize Hugo a bit by adding some content such as a navbar and social icons:

After config has been applied to ./config.yml and we start our server up again:

We should see this:

How to use the hugo static site generator on linux

Create your First Post

Creating the first post:

Let’s add some sample data to our markdown file that hugo created:

When starting the server up again and viewing the home page:

How to use the hugo static site generator on linux

And selecting the post:

How to use the hugo static site generator on linux

How to use the hugo static site generator on linux

Tables, lists and images:

How to use the hugo static site generator on linux

Creating Pages

For the pages section (about, getting-started), we first create the directory:

Then create the page under the directory:

When we start up our server again and select the “getting-started” from the navbar on our home page:

How to use the hugo static site generator on linux

Production Mode

You can set the flags in your main config as well, but running the server in production mode:

Thanks

Thanks for reading, feel free to reach out to me on @ruanbekker

Posted by Ruan Jun 14 th , 2020 3:23 pm hugo

How to use the hugo static site generator on linuxMy name is Ruan, I’m a DevOps Engineer from South Africa. I’m passionate about AWS, OpenSource, Observability, Containers, Linux, Automation and sharing my findings with the world. More info about me on my website, ruan.dev.
Follow @ruanbekker

Hugo is a fast and flexible static site generator. With Hugo, you can build static websites such as landing pages, portfolio, catalogue pages within hours. If all you need is few simple pages, then you dont need the overkill of full fledged CMS or eCommerce system. There is no code overhead, you only include what you need and the result is a fast loading beautifully customized page. Hugo comes with a built in webserver and you can use this on your development environment. There are also a variety of themes to choose from.

Hugo is built in Go Programming Language but you don’t need to install Go. Precompiled binaries are avaialable for macOS, Windows, Linux and FreeBSD. On macOs the installation is straight-forward by using brew:

Install Hugo on Windows

1) Install chocolatey

Chocolatey is a package manager for Windows. There are two ways to install – from an administrative(elevated) command prompt or from Powershell.

To install from an elevated command prompt, open an elevated command prompt and run the below command.(Refer this article for How to open an Admin Command Prompt):

To install with PowerShell:

We know this script is safe, but as a word of warning do not execute scripts without inspecting the contents.

2) Install Hugo

To install hugo using chocolatey, run the command:

Verify the installation

Run the command: hugo version

Install Hugo on Linux

You may either use the default package manager or install as a snap. To install Hugo on Debian and Ubuntu just run:

To install Hugo on CentOS, Red Hat Linux you may use yum . First you have to add the repository by creating a file in /etc/yum.repos.d/ and add the following content in it. You may need root access.

Now you may install Hugo using yum

To install Hugo on Fedora, first add the repo. As root user, create a file in /etc/yum.repos.d and add the following lines:

Now you may install Hugo using dnf

If snaps are supported in your Linux version you may use

Installing as a snap gets you the latest version. Once installation finishes, you may verify the installation using

To see how to build your first hugo site, read our next article How to build a site with Hugo.

This tutorial builds on the previous tutorial that showed how to add your Hugo Static Site to Azure Devops. In this tutorial, I’ll show how to create an Azure Storage Account to host a Hugo Static Site. Creating a Hugo Static Site Publish Hugo Static Site to Azure Devops Creating an Azure Storage Account to host a Hugo Static Site Building an Azure Devops Pipeline for automated build’s Setting up a Custom Domain Name for Azure Blob Storage Static Site Setting up CDN Pre-requisites VSCode Azure Subscription Microsoft has recently updated their Azure Storage Accounts with a preview feature called Static Websites.

This tutorial builds on the previous tutorial that showed how to build a simple Hugo Static Site. In this tutorial, I’ll show how to publish your Hugo Static Site to a Azure Devops Repository. This post is part of a series, below are the links: – Creating a Hugo Static Site Publish Hugo Static Site to Azure Devops Creating an Azure Storage Account to host a Hugo Static Site Building an Azure Devops Pipeline for automated build’s Setting up a Custom Domain Name for Azure Blob Storage Static Site Setting up CDN Pre-requisites VSCode Hugo Azure Devops Account Navigate to https://dev.

Static Site generators are great for the hosting of static content like Blogs. I host my personal blog on the Hugo static site generator. I exported it from WordPress about a year ago. With latest updates to Azure, you can now host a static site directly on top of Azure Blob Storage. On top of that you can also utilize Azure Devops to do the build and release management via Azure Pipelines.

I’m an avid user of Gitlab Wiki’s. I like the easy way you can update them and how nice the interface is. I was looking for a way to edit the Wiki content locally and found that it’s possible. You need a couple of pieces of software, one called Gollum and the other is Github Markdown. These run on Ruby and get installed from gems. I haven’t nothing but trouble with Ruby on Windows so I thought I’d try something different with the latest version of Windows.

How to use the hugo static site generator on linux

Installing Windows Subsystem for Linux. First you’ll need to check that your running Windows 10 Fall Creators Edition, which should be version 1709 and the build number should be greatre than or equal to 16299. To check your build number run the following from Powershell: – (Get-CimInstance -classname win32_operatingsystem).buildnumber Once you’ve found that you have the right version number. Open up the Windows Store and type “Linux”. Then select “Run Linux on Windows.

Here is a little guide to show how easy it is to install the Hugo Static Site Generator software via Chocolatey. Super easy! Pre-requisites: Powershell Chocolatey Open up your Powershell console and run the following command. choco search hugo You should be able to see hugo in the results that are brought back. So, we just need to now install. To install Hugo, run the following: – choco install hugo -y Wait for it to install.

How to use the hugo static site generator on linux

So you’d like to setup an Intranet SSL Certificate for pfSense, Let’s Encrypt & CloudFlare. You have pfSense running on your home network. You got all the great goodies to play with but every time you log in you get that screen come up that says your connection is not secure. This must not stand, I want all things to be secure! SSL all the things! Follow this little guide, and you too can have Let’s Encrypt create you an SSL certificate, automagically, for free-ish…, have it automatically validate via the DNS-01 challenge method and have SSL Certificate automagically renew.

How to use the hugo static site generator on linux

Here is my guide on how to Join Ubuntu Workstation to a Windows Domain using SSSD and Realmd. There are a few different methods out there on how to do this but from what I’ve tested and researched, using SSSD and Realmd is the most up to date and easiest way to achieve the desired result at the time of writing this. I’ve included links to all of the relevant documentation that I used in researching putting together this guide.

How to use the hugo static site generator on linux

Here is a short step by step guide for installing x11vnc server on Ubuntu 16.04 Xenial Xerus. I prefer this to Vino that comes pre-installed because Vino doesn’t play well with Windows. If you are back and forth between Linux and Windows x11vnc server works really well. Disclaimer: I’m a Linux n00b. I’m enjoying playing with Linux but my background is in Windows. I’m putting this up for my own benefit so I can find it later and hopefully it may benefit someone else.

How to use the hugo static site generator on linux

After a little trial and error here is a brief instruction on how to install Nixnote2 Beta 7 on Ubuntu 16.04 Xenial Xerus. NixNote is not in software repositories for Ubuntu. You can however download it from the Sourceforge page. This is a workaround until a patch is released. There is a bug filed for this already. I tried installing Nixnote 2 beta 7 on Ubuntu 16.04 using the Deb package and that didn’t seem to work.

I’ll probably use Netlify, even though I rate GitHub Pages (GHP) really well. Its annoying to get multiple sites on one GH account, and also GHP is not for commercial projects. I am intersted in commercial project hosting.

So in summary this is the plan:

  • Hugo running on WSL2 on Win 10 for static site generation
  • GitHub for source code
  • Netlify for website hosting
  • DNSimple for a new domain name
  • Netlify or Cloudflare for SSL for new domain name

Install Hugo and create a blog post

gohugo.io is the projects homepage.

To install on WSL2 I go to https://github.com/gohugoio/hugo/releases and find the lastest Linux 64bit.deb

draft: true will not publish so flip to true

How to use the hugo static site generator on linux

Regenerate times are super fast.

I like URL links with the date in them so added this to the config file:

Themes

themes.gohugo.io is a good place to start.

https://themes.gohugo.io/blonde/ is the one I’m going to try as it uses tailwindcss which I’m a fan of.

After doing this I got an error building the site with Blonde so gave up!

Error: Error building site: failed to render pages: render of “home” failed: “/home/dave/beer/hugo-quickstart/themes/Blonde/layouts/_default/list.html:8:32”: execute of template failed: template: _default/list.html:8:32: executing “main” at <.Paginate>: error calling Paginate: ‘pager size’ must be a positive integer

Git Submodule Issues

How to use the hugo static site generator on linux

A strange issue with submodules.

After a new clone of the repo

How to use the hugo static site generator on linux

Not quite sure why. https://github.com/leonardofaria/bento place to start looking perhaps.

exampleSite

I missed this important bit!

Have a look in most of the themes and you’ll see an exampleSite directory which is where you’ll find a demo of how to setup this themes site.

Hosting on Netlify

How to use the hugo static site generator on linux

New site from Git, then give Netlify permission on your GitHub repo then add a file in your project root called netlify.toml

I changed my site name to https://homebrewbeer.netlify.app/ in Netlify then updates the config.toml to recognise that name, then it works. Just push to GH and Netlify will pick regenerate and publish.

Images Videos and Posts

Here is my first shot at where to put new posts content/posts

How to use the hugo static site generator on linux

Images are in public\images

And there is a handy YouTube shortcut

How to use the hugo static site generator on linux

Other Information

Summary

Hugo seems to work well and is fast.

What I like is the simple installation of a binary.

I’ve yet to get into styling of the tailwindcss theme, but I’ve got just enough working to show people about home brewing beer!

  • Contractor, freelancer, SaaS business owner, conference speaker, dad, rock climber and passionate about people and technology
  • How to use the hugo static site generator on linux

Pelican is a free and open source static site generator written in Python programming language. You can create fast, static websites using Pelican’s numerous command line options. Pelican supports writing content in Markdown and reStructuredText languages, taking care of appropriate HTML markup for your content. You can also create websites and blogs that require chronological or sequenced pages using Pelican. Other main features of Pelican include support for many languages, template and theme engine, RSS feeds, ability to import content from other sites, official and third party plugins, and so on. You can access official Pelican documentation from here. Installation instructions are available here.

Jekyll

Jekyll is an open source static site generator written in Ruby programming language. It integrates deeply with GitHub and you can easily create and manage a Jekyll website by pushing your changes to a GitHub repository. GitHub’s own static site hosting, called “GitHub Pages” is powered by Jekyll. You can use markdown language to write content and use its “Liquid” template engine to structure your website. It includes numerous features specially trailers for bloggers and you can import content from third party services. Jekyll also has a graphical admin dashboard plugin that can assist you in writing and publishing content. Official documentation for Jekyll is available here. Installation instructions can be accessed from here.

Hugo is an open source static site generator written in Go programming language. It focuses on delivering lightning fast content and can make use of markdown and shortcodes to create content. It comes with numerous pre-defined templates tailored for different needs. Some of these templates also include fields for SEO optimization. Other main features of Hugo include multi-language support, AMP sites support, ability to show content in JSON format, many pre-designed themes, templates for creating documentation sites and so on. Official documentation for Hugo is available here. Installation instructions can be accessed from here.

Publii

Publii is an open source static site generator written in Electron and VueJS. It comes with a dedicated, graphical desktop app that can be used to create and manage websites. This desktop app is also available for Linux in AppImage format. If you are used to WordPress like CMS that provides a graphical admin dashboard, you will find Publii quite similar. Almost all tasks can be carried out using GUI app only and very little command line interaction is required. Other main features of Publii include numerous built-in tools specially designed for bloggers, built-in SEO tools, supports importing content from other sites, and so on. Official documentation for Publii is available here. Installation instructions can be accessed from here.

Next.js

Next.js is an open source static site generator written in NodeJS and TypeScript. Next.js features a reactive approach to handling data where every piece of data is watched. Other pieces update themselves reactively based on changes in other parts of the website. It can render fully reactive websites / web applications with an option to export static sites. Other main features of Next.js include multi-language support, image optimization utilities, incremental site updates, analytics support, built-in SASS support and so on. Official documentation for Next.js is available here. Installation instructions can be accessed from here.

Gatsby

Gatsby is an open source static site generator written in NodeJS and TypeScript. Gatsby is designed to cater different static site needs and provides templates for creating blogs, documentation sites and online stores. It uses a GraphQL data layer that makes managing different data sources easier and provides a much more consistent way to access and manage data. Other main features of Gatsby include official and third party themes, official and third party plugins, free cloud hosting service, support for progressive web apps, reactive data and so on. Official documentation for Gatsby is available here. Installation instructions can be accessed from here.

Nuxt is an open source web application framework that can create both dynamic and static sites. Written in VueJS, it features a modular structure allowing you to include only necessary modules needed to create and manage a static site. Other main features of Nuxt static site generator include built-in SEO tools, pre-rendered pages, custom layouts, client-side rendering, dynamic routes, meta-tags management, SASS support, pre-tailored components, transitions and animations, real-time live previews and so on. Official documentation and installation instructions for Nuxt are available here.

Hexo is an open source static site generator written in NodeJS and JavaScript. It provides support for writing content in markdown language and comes with numerous official and third party plugins to manage your site. Hexo provides over 300 pre-designed themes to get you started quickly and save time. Other main features of Hexo include support for Octopress plugins, blogging tools, fast deployment to GitHub and GitLab pages, multi-language support, custom themes and templates, and so on. Official documentation for Hexo is available here. Installation instructions can be accessed from here.

Conclusion

These are some of the most useful static site generators that can be used to generate fast, static sites that are mostly rendered on the client side. All these projects are open source and can be installed in Linux with just a few commands.

I am trying to work with the Hugo static site generator.

Problem: Hugo is saying it is updated to the latest version but it is not.

$ hugo version
Hugo Static Site Generator v0.40.1 linux/amd64 BuildDate: 2018-04-25T17:16:11Z

But the latest version is now v0.70.0

System: Windows Subsystem for Linux via the terminal in Visual Studio Code v1.45.0

Any help would be much appreciated thank you all.

3 Answers 3

If you’re using a Debian-based system, e.g. Ubuntu, you can download the appropriate .deb from https://github.com/gohugoio/hugo/releases and install it with, for example:

I wrote about this in footnote 10 in my Hugo Tutorial.

How to use the hugo static site generator on linux

If you’ve installed it via the apt package manager, you might be out of luck there, because the official repositories might not be up to date with the latest version of Hugo.

To update the repositories and install the latest available version of hugo , try doing

However, I see it’s only getting version 0.6x .

If you want to use it on Windows, you could try installing it via Chocolatey or Scoop. Both seem to have version 0.70.x in their repositories, but you’d need to install them first, because they’re not Windows out-of-the-box software. Not sure if and how it would work if you use it in the WSL, though.

Eleventy v1.0.0 requires Node 12 or newer. Use node –version on the command line to find your local Node version.

This will compile any files matching valid input template file extensions ( .md is one of them) in the current directory into the output folder (defaults to _site ).

Run npx @11ty/eleventy –serve to start up a web server. Then open http://localhost:8080/README/ in your web browser of choice to see your Eleventy output.

Eleventy is supported by… #

Gold Sponsor

Gold Sponsor

Documentation for Eleventy v1.0.0 Todd and Bruce said this button should be bigger and as you can see they were right

Built With Eleventy #

How to use the hugo static site generator on linux

How to use the hugo static site generator on linux

Don’t take my word for it 🌈 #

Listen to what these happy developers are saying about Eleventy:

“Seriously can’t remember enjoying using a Static Site Generator this much. Yes Hugo is rapid, but this is all so logical. It feels like it was designed by someone who has been through lots of pain and success using other SSGs.” — Phil Hawksworth

“Eleventy is a killer static site generator. That’s all.” — Sara Soueidan

“Just the kind of simple / common sense tool I love. The data/folder hierarchy mechanism is super obvious and elegant.” — Heydon Pickering

“Think the reason everyone is loving [Eleventy] so much (myself included) is that it doesn’t come with a prescription about data sources or template rendering.” — Brian Leroux

“I actually used Eleventy for the first time this week. Loved it.” — Paul Lewis

“Eleventy is absolutely wonderful. It’s by far the nicest static site generator I’ve used in what feels like forever.” — Addy Osmani

“Eleventy + Netlify have become my new workflow for static sites. I think I’m in love.” — Mina Markham

“Don’t tell Zach I said it but Eleventy is seeming fresh as hell so far” — Mat Marquis

“I looked into and actively tried using various static site generators for this project. Eleventy was the only one I could find that gave me the fine-grained control I needed at blazingly fast build times.” — Mathias Bynens

“Eleventy and web components go really, really well together.” — Justin Fagnani