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
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