First Post

As we begin our journey with Hugo, let’s start by setting up a development server that will allow us to preview and test our website locally. This is essential for any web development project.

Start the Development Server

To get started, navigate to your Hugo project directory in your terminal or command prompt and run:

hugo server

This command starts the Hugo development server on localhost and port 1313 by default. You can now access your website at http://localhost:1313 in your web browser.

Create a First Post

Now that our development server is up and running, let’s create some content for our website! To do this, we’ll use the hugo new command followed by the relative path to the Markdown file you want to create. For example:

hugo new post/my-first-post.md

It’s essential to include the .md filename suffix when creating a new Markdown file with Hugo. This tells Hugo that we’re working with Markdown content, which is a lightweight markup language used for formatting text.

Markdown (MD) has become an incredibly popular choice among developers and writers due to its simplicity and ease of use compared to HTML (Hyper Text Markup Language). While it may seem like a joke at first glance, the name “Markdown” does indeed reflect its emancipation from the more complex world of HTML. With Markdown, you can focus on writing content without worrying about the intricacies of markup languages.

Editing the First Page

Now that we have our first post created, let’s take a closer look at how to edit it using your favorite editor. Open the my-first-post.md file in your preferred text editor. You’ll notice that Hugo has automatically added some basic formatting and metadata to the document. This includes:

  • A title section with a heading
  • An author field (which you can fill out if desired)
  • Some default content

Feel free to modify this content as needed using Markdown syntax highlighting. Your editor should display the text in a readable format, making it easier to focus on writing rather than formatting. Some popular editors that support Markdown syntax highlighting include:

  • Visual Studio Code
  • Sublime Text
  • Atom
  • Notepad++ (with a Markdown plugin)

When editing your Markdown files directly, you can use various features like headings (# Heading), bold text (**Bold text**), and links ([Link](https://example.com)). Hugo will automatically render these elements when building the site.

The automatic metadata added by my Hugo theme looks like this:

+++
title = 'Hugo: First Post'
date = 2024-09-07T21:29:43+02:00
draft = false
+++

To unlock Hugo’s full potential for generating optimized content, consider adding the following two lines to your metadata section:

description = "How to create posts with hugo commands"
tags = ["Hugo", "Hugo Commands", "Create Posts"]

The description field will be reflected in the HTML header tags of your generated site. Specifically, you’ll see it appear as a meta tags like this:

  <title>Hugo: First Post // Public Notes</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta charset="utf-8" />
    <meta name="generator" content="Hugo 0.123.7">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="Keino" />
    <meta name="description" content="How to create posts with hugo commands" />

    <meta name="twitter:description" content="How to create posts with hugo commands"/>

    <meta property="og:description" content="How to create posts with hugo commands" />

This is particularly useful for search engine optimization (SEO), allowing search engines and other crawlers to understand the context and relevance of your page. To further enhance SEO, Hugo also generates metadata tags for social media platforms like Twitter and Open Graph. These include:

  • twitter:description: A meta tag that provides a brief summary of your content for Twitter users.
  • og:description: An Open Graph property that describes your content in a way that’s easily consumable by other services.

Here’s what the updated metadata section might look like in conjunction to the first content:

+++
title = 'Hugo: First Post'
date = 2024-09-07T21:29:43+02:00
draft = false
description = "How to create posts with hugo commands"
tags = ["Hugo", "Hugo Commands", "Create Posts"]
+++

## Hello Hugo World

**Your changes are now live!**

Don't forget to set the draft property to false so that your changes take effect immediately. 
You can then view the results in your web browser by visiting your development URL 
(e.g., http://localhost:1313).

**Happy editing!**

As soon as you save the file you should be able to see the effect in your browser.

♥♥♥

Monero