ahem

Anatomy of $SITE

  • HUGO
  • GIT
  • NETLIFY

HUGO

[official] Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility,
In other words, HUGO is a site building platform that takes custom layouts/themes/posts or assests(say) to make a publish ready website in no time.

QUICKSTART HUGO

  • Installation

    • macOS and homebrew : brew install hugo
    • Linux and homebrew ; brew install hugo
    • Arch : sudo pacman -S hugo
    • Arch(AUR) : yay -S hugo
    • ubuntu or any linux distro with apt/deb support : sudo apt -y install hugo
    • windows and chocolatey : choco install hugo -confirm
    • windows and scoop : scoop install hugo
    • build from source : touch sourcebuild.sh && vim sourcebuild.sh
      1
      2
      3
      4
      5
      mkdir $HOME/src
      cd $HOME/src
      git clone https://github.com/gohugoio/hugo.git
      cd hugo
      go install --tags extended
      $ sh sourcebuild.sh

  • New Site

    • change the working directory to a desired location
    • hugo new site newsite
    • project folder exist in the current working directory having directory structure :
      ├── archetypes
      ├── config.toml
      ├── content
      ├── data
      ├── layouts
      ├── static
      └── themes

  • add a theme

    • choose a theme
    • install ananke theme for hugo,
      • change the working directory to project folder
      • git init
      • git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
      • echo 'theme = "ananke"' >> config.toml
      • this installs and tells hugo to use the installed theme for site generation.

  • add content

    • hugo new posts/first_post.md : creates a .md file on /posts/
    • edit .md file to add content.

  • start hugo server locally(testing)

    • hugo server -D
    • sample output :
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      ▶ hugo server -D
                         | EN
      +------------------+----+
      Pages            | 10
      Paginator pages  |  0
      Non-page files   |  0
      Static files     |  3
      Processed images |  0
      Aliases          |  1
      Sitemaps         |  1
      Cleaned          |  0
      Total in 11 ms
      Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
      Watching for config changes in /Users/bep/quickstart/config.toml
      Environment: "development"
      Serving pages from memory
      Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
      Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
      Press Ctrl+C to stop
    • finally, the server is running so navigate to http://localhost:1313/

  • site configuration
    any changes that are required by the user are supposed to be done on config.toml. Every theme handles config.toml differently, so simply check theme’s README to get a grasp of scope of configuration.

  • build static pages

    • hugo -D generates static pages in <project-dir>/content/public/
    • these public pages will be used to deploy the website.