Nahuel Hernandez

Nahuel Hernandez

Another personal blog about IT, Automation, Cloud, DevOps and Stuff.

Make a Static Website with Hugo and Amazon S3

This article is to describe the process to make a simple Website using only Amazon S3 and without Servers

3-Minute Read

Hugo S3

Requirements:

  • You must have your static website ready
  • You must have an AWS account
  • A valid domain and DNS management access
  • A Linux Installation (Debian)

First install Hugo

➜  ~  sudo apt-get install hugo

Once installed, create the site

➜  ~ hugo new site nahuelhernandez.com
Congratulations! Your new Hugo site is created in /home/naguer/nahuelhernandez.com.

Just a few more steps and you're ready to go:

1. 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 <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

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

This will create a new directory with your website name, go to the directory and go to subdirectory themes, here we need to download a template, for example https://github.com/rhazdon/hugo-theme-hello-friend-ng.git

➜  ~ cd nahuelhernandez.com/themes 
➜  themes https://github.com/rhazdon/hugo-theme-hello-friend-ng.git
zsh: no such file or directory: https://github.com/rhazdon/hugo-theme-hello-friend-ng.git
➜  themes git https://github.com/rhazdon/hugo-theme-hello-friend-ng.git
git: 'https://github.com/rhazdon/hugo-theme-hello-friend-ng.git' is not a git command. See 'git --help'.
➜  themes git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git
Cloning into 'hugo-theme-hello-friend-ng'...
remote: Enumerating objects: 1011, done.
remote: Total 1011 (delta 0), reused 0 (delta 0), pack-reused 1011
Receiving objects: 100% (1011/1011), 6.28 MiB | 1.41 MiB/s, done.
Resolving deltas: 100% (510/510), done.

Now we need to change the config.toml file, paste the template configuration (copy from the readme)

baseurl = "/"
languageCode = "en-us"
theme = "hello-friend-ng"

[params]
  dateform        = "Jan 2, 2006"
  dateformShort   = "Jan 2"
  dateformNum     = "2006-01-02"
  dateformNumTime = "2006-01-02 15:04 -0700"

  # Metadata mostly used in document's head
  description = "Homepage and blog by Djordje Atlialp"
  keywords = "homepage, blog, science, informatics, development, programming"
  images = [""]

  # Directory name of your blog content (default is `content/posts`)
  contentTypeName = "posts"
  # Default theme "light" or "dark"
  defaultTheme = "dark"

[languages]
  [languages.en]
    title = "Hello Friend NG"
    subtitle = "A simple theme for Hugo"
    keywords = ""
    copyright = ""
    readOtherPosts = "Read other posts"

    [languages.en.params.logo]
      logoText = "hello friend ng"
      logoHomeLink = "/"
    # or
    #
    # path = "/img/your-example-logo.svg"
    # alt = "Your example logo alt text"

	# You can create a language based menu
    [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "about"
        name = "About"
        url = "/about"
      [[languages.en.menu.main]]
        identifier = "showcase"
        name = "Showcase"
        url = "/showcase"

# And you can even create generic menu
[menu]
  [[menu.main]]
    identifier = "about"
    name       = "About"
    url        = "/about"
  [[menu.main]]
    identifier = "blog"
    name       = "Blog"
    url        = "/posts"

Now in your Hugo Root directory run

➜  hugo server -t hello-friend-ng

                   | EN  
+------------------+----+
  Pages            |  7  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 12  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 44 ms
Watching for changes in /home/naguer/nahuelhernandez.com/{content,data,layouts,static,themes}
Watching for config changes in /home/naguer/nahuelhernandez.com/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 //localhost:1313/ (bind address 127.0.0.1)

And go to localhost:1313 in your browser to view your website

Now we need to generate the statics files with the parameter renderToDisk, this create the files in public directory

hugo server -t hello-friend-ng --renderToDisk

Copy the statics file to our S3 bucket (previously configured the bucket with website hosting)

aws s3 sync public s3://nahuelhernandez.com/ --size-only --delete

Go to your public website and check

Categories

Recent Posts

About

Over 15-year experience in the IT industry. Working in SysOps, DevOps and Architecture roles with mission-critical systems across a wide range of industries. Wide experience with AWS, Terraform, Kubernetes, Containers, CI/CD pipelines, and Linux. Always keeping up with the latest technologies. Passionate about automating the run of the mill. Big focus on problem-solving.