{
  "slug": "Hugo-Static-website-builder-4e28457adc49",
  "title": "Hugo Static website builder",
  "subtitle": "making static website with golang and hugo",
  "excerpt": "making static website with golang and hugo",
  "date": "2024-04-09",
  "tags": [
    "Go"
  ],
  "readingTime": "2 min",
  "url": "https://medium.com/@mobinshaterian/hugo-static-website-builder-4e28457adc49",
  "hero": "https://cdn-images-1.medium.com/max/800/1*gVTFwgqGMiCB2mtr2gallA.jpeg",
  "content": [
    {
      "type": "heading",
      "level": 2,
      "text": "Hugo Static website builder"
    },
    {
      "type": "image",
      "src": "https://cdn-images-1.medium.com/max/800/1*gVTFwgqGMiCB2mtr2gallA.jpeg",
      "alt": "Hugo Static website builder",
      "caption": "",
      "width": 640,
      "height": 832
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Debian"
    },
    {
      "type": "paragraph",
      "html": "Derivatives of the <a href=\"https://www.debian.org/\" target=\"_blank\" rel=\"noreferrer noopener\">Debian</a> distribution of Linux include <a href=\"https://elementary.io/\" target=\"_blank\" rel=\"noreferrer noopener\">elementary OS</a>, <a href=\"https://neon.kde.org/\" target=\"_blank\" rel=\"noreferrer noopener\">KDE neon</a>, <a href=\"https://www.linuxliteos.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Linux Lite</a>, <a href=\"https://linuxmint.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Linux Mint</a>, <a href=\"https://mxlinux.org/\" target=\"_blank\" rel=\"noreferrer noopener\">MX Linux</a>, <a href=\"https://pop.system76.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Pop!_OS</a>, <a href=\"https://ubuntu.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Ubuntu</a>, <a href=\"https://zorin.com/os/\" target=\"_blank\" rel=\"noreferrer noopener\">Zorin OS</a>, and others. To install the extended edition of Hugo:"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "sudo snap install hugo"
    },
    {
      "type": "paragraph",
      "html": "To enable or revoke access to removable media:"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "sudo snap connect hugo:removable-media"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "sudo snap disconnect hugo:removable-media"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Run these commands to create a Hugo site with the Ananke theme."
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo new site quickstartcd quickstartgit initgit submodule add\nhttps://github.com/theNewDynamic/gohugo-theme-ananke.git themes/anankeecho \"theme = 'ananke'\" >>\nhugo.tomlhugo server"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "ADD different theme"
    },
    {
      "type": "paragraph",
      "html": "Minimum Hugo Version: <strong>0.110.0</strong>"
    },
    {
      "type": "paragraph",
      "html": "Run from the root of your Hugo site:"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "git clone\nhttps://github.com/apvarun/blist-hugo-theme.\ngit themes/blist"
    },
    {
      "type": "paragraph",
      "html": "Alternatively, you can include this repository as a <a href=\"https://git-scm.com/docs/gitsubmodules\" target=\"_blank\" rel=\"noreferrer noopener\">git submodule</a>. This makes it easier to update this theme if you have your Hugo site in git as well:"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "git submodule add\nhttps://github.com/apvarun/blist-hugo-theme.\ngit themes/blist"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Configuring theme to a hugo website"
    },
    {
      "type": "list",
      "ordered": true,
      "items": [
        "Copy <code>package.json</code> and <code>package-lock.json</code> to the root folder of your website",
        "Run <code>npm install</code> to install required packages for theme",
        "Run <code>npm i -g postcss-cli</code> to use PostCSS with Hugo build",
        "Set <code>theme = 'blist'</code> in config.toml",
        "Run <code>npm start</code> to start your local server"
      ]
    },
    {
      "type": "paragraph",
      "html": "Make sure to commit the above changes to your repository."
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Install Apache on computer"
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "sudo\napt update\nsudo\napt install apache2"
    },
    {
      "type": "paragraph",
      "html": "<a href=\"https://ubuntu.com/tutorials/install-and-configure-apache#1-overview\" target=\"_blank\" rel=\"noreferrer noopener\">https://ubuntu.com/tutorials/install-and-configure-apache#1-overview</a>"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Hugo theme"
    },
    {
      "type": "code",
      "lang": "text",
      "code": "https://themes.gohugo.io/"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Add content"
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo new content posts/my-first-post.md"
    },
    {
      "type": "paragraph",
      "html": "Hugo created the file in the <code>content/posts</code> directory. Open the file with your editor."
    },
    {
      "type": "code",
      "lang": "text",
      "code": "+++title = 'My First Post'date = 2024-01-14T07:07:07+01:00draft = true+++"
    },
    {
      "type": "paragraph",
      "html": "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."
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo server --buildDraftshugo server -D"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Run Hugo"
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo server -D"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Build Website"
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo"
    },
    {
      "type": "paragraph",
      "html": "When you <em>publish</em> your site, Hugo creates the entire static site in the <code>public</code> directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files."
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Configure Hugo"
    },
    {
      "type": "heading",
      "level": 2,
      "text": "Summarize Installation and Usage of Hugo on Debian-based Systems"
    },
    {
      "type": "paragraph",
      "html": "This document outlines the installation process and basic usage of Hugo, a static site generator, on Debian-based Linux distributions."
    },
    {
      "type": "paragraph",
      "html": "<strong>Installation:</strong>"
    },
    {
      "type": "paragraph",
      "html": "The extended edition of Hugo can be installed using the <code>snap</code> package manager."
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "sudo snap install hugo"
    },
    {
      "type": "paragraph",
      "html": "<strong>Enabling/Disabling Removable Media Access:</strong>"
    },
    {
      "type": "paragraph",
      "html": "Grant or revoke access to removable media for Hugo:"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Enable: <code>sudo snap connect hugo:removable-media</code>",
        "Disable: <code>sudo snap disconnect hugo:removable-media</code>"
      ]
    },
    {
      "type": "paragraph",
      "html": "<strong>Creating a New Site:</strong>"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Create a new Hugo site named “quickstart”:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo new site quickstart"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Navigate to the newly created directory:"
      ]
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "cd quickstart"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Initialize a Git repository for version control:"
      ]
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "git init"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Install the Ananke theme using Git submodules:"
      ]
    },
    {
      "type": "code",
      "lang": "bash",
      "code": "git submodule add\nhttps://github.com/theNewDynamic/gohugo-theme-ananke.\ngit themes/ananke"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Configure the site to use the Ananke theme by adding a line to <code>hugo.toml</code>:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "echo \"theme = 'ananke'\" >> hugo.toml"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Start the Hugo development server:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo server"
    },
    {
      "type": "paragraph",
      "html": "<strong>Adding Content:</strong>"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Create a new Markdown file for your content:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo new content posts/my-first-post.md"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Edit the content of <code>my-first-post.md</code> with your preferred editor.",
        "(Optional) Include draft content in the development server by running one of these commands:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo server --buildDraftshugo server -D"
    },
    {
      "type": "paragraph",
      "html": "<strong>Building and Running the Site:</strong>"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "Build the entire static website:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo"
    },
    {
      "type": "list",
      "ordered": false,
      "items": [
        "The built website will be located in the <code>public</code> directory.",
        "Start the development server to view the site during development:"
      ]
    },
    {
      "type": "code",
      "lang": "text",
      "code": "hugo server -D"
    },
    {
      "type": "paragraph",
      "html": "<strong>Further Configuration:</strong>"
    },
    {
      "type": "paragraph",
      "html": "Refer to the official Hugo documentation (<a href=\"https://gohugo.io/getting-started/configuration/\" target=\"_blank\" rel=\"noreferrer noopener\">https://gohugo.io/getting-started/configuration/</a>) for detailed configuration options."
    }
  ]
}