Setting Up Your Hugo Site with Code-Server and Front Matter

By Greg Vedders

If you’re looking to develop a Hugo site with a smooth and efficient workflow, using code-server with the Front Matter extension can be a game-changer. Here’s a step-by-step guide to get you started.

Prerequisites

Before we dive in, ensure you have the following tools installed:

  1. code-server: A cloud-based version of Visual Studio Code.
  2. Hugo: A popular static site generator.
  3. Front Matter: A VS Code extension for managing markdown content.

Step 1: Setting Up code-server

First, let’s install and start code-server. Open your terminal and run:

curl -fsSL https://code-server.dev/install.sh | sh

Once installed, start code-server with:

code-server

You can now access code-server through your browser.

Step 2: Installing the Front Matter Extension

  1. In your code-server instance, click on the Extensions icon in the Activity Bar.
  2. Search for “Front Matter” and install the extension.

Step 3: Creating Your Hugo Site

If you don’t already have a Hugo site, you can create one by running:

hugo new site my-hugo-site
cd my-hugo-site

Step 4: Installing a Hugo Theme

Choose and install a Hugo theme. For example, to install the Ananke theme, use the following commands:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

Step 5: Creating Content with Front Matter

  1. Navigate to the content directory of your Hugo site in code-server.
  2. Click on the Front Matter icon in the Activity Bar to create a new page.
  3. Use the Front Matter extension’s UI to fill in the necessary front matter fields in your markdown files.

Step 6: Previewing Your Site Locally

To preview your Hugo site, run:

hugo server

Open your browser and navigate to http://localhost:1313 to see your site in action.

Step 7: Deploying Your Site

When you’re ready to deploy your site, generate the static files by running:

hugo

This command creates the static site in the public directory. You can then deploy the contents of the public directory to your web server or hosting service.

By following these steps, you’ll have a fully functional development environment for your Hugo site using code-server and the Front Matter extension. This setup not only enhances your workflow but also provides a robust platform for managing your content. If you encounter any issues or have further questions, feel free to reach out. Happy coding!