comment 0

Creating a Static Site Using Hugo

There are times when you might want a static site. Maybe it loads faster or maybe you are using a static site host. My new domain ineedawebdeveloper.info uses a static site host and I decided I wanted to add a blog to it. I came across staticgen.com which listed some popular options. I chose Hugo and went immediately to the Getting Started page. You can checkout my deployed blog here – ineedawebdeveloper.info/blog/

The below is my experience. Download Windows installer github.com/gohugoio/hugo/releases. Tried double clicking in explorer but got the following message

Hugo is a command-line tool for generating static website.
You need to open cmd.exe and run Hugo from there.
Visit http://gohugo.io/ for more information.

Tried running hugo.exe from the PowerShell prompt but got the following message

The command hugo.exe was not found, but does exist in the current location. Windows PowerShell does not load commands from the current location by default. If you trust this command, instead type: “.\hugo.exe”. See “get-help about_Command_Precedence” for more details.

I then realised I needed to add the location of hugo to the PATH in Windows. Then download and install Git (which Hugo uses) git-scm.com/download/win. Then the following commands to create the blog, a first post and download a theme

hugo new site blog
hugo new post/first-post.md
git clone –recursive https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
hugo -t ananke

The following command from the Quick Start does not work under PowerShell echo ‘theme = “ananke”‘ >> config.toml. Instead I get the following message when trying to open the config file in Visual Studio Code.

The file will not be displayed in the editor because it is either binary, very large or uses an unsupported text encoding.

Created another project and copied the config file and modified it from there. Next problem I had was that the theme was not showing when I opened the website from the public folder locally in Chrome e.g. file:///E:/hugo/blog/public/index.html. Read that Go (the language used to create Hugo) considers this an unsafe URL and it replaces it with something like #ZgotmplZ. Not a problem because I can test using the server (hugo server -D) and http://localhost:1313/blog/. Remember to set your base URL in the config file. One last thing – if you want to modify the theme e.g. the header image, you can create items under layout that will override what the theme uses. Also read up on partials. Useful is this link headlesscms.org which talks about what JAMStack is and lists criteria and reasons.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s