Building a Personal Website (Mini-Series Part 2)

Static Generators

Static generators are a hybrid approach to web development. They allow you to build websites locally and then compile your website for you into static files for deployment. Traditionally when a website user lands on a page the site has to assemble data from its database dynamically, process the content through a template engine, and finally display the page to the visitor. A static generator takes away the database dependency. It grabs all the content, applies it to the right templates, creates the static HTML, and quickly delivers the content to the user.

Static site generators have many advantages

Security

Since static pages are rendered in advance from static HTML the server doesn’t have to build the page completely from other sources. There is less opportunity for hackers to inject malicious code or exploit your database unlike with dynamic sites.

Scalability

It doesn’t take any extra time or effort to serve the same pages multiple times because they don’t have to be reassembled with every delivery. This means no additional computing work required whereas a dynamic site would need more server compute to compile responses for each page request.

Performance

Dynamic sites go back to the server to render each page every single time someone visits it while static site generators store a “pre-built” version that can be delivered nearly instantly making them load almost 10X faster than dynamic sites

What Static Generator should you choose?

There are many static generators available to use. For the purposes of this post, we will be focusing on Hugo. Hugo is built on the language Go. It is an easy-to-set-up, user-friendly static site generator that doesn’t need a lot of configuration. It builds pages quickly and has many free themes that can help you get started with your next static website.

Creating Your Personal Website

1. To install Hugo you will first need to install a package manager, such as Homebrew

$ /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Next, install Hugo

$ brew install hugo
==> Downloading https://homebrew.bintray.com/bottles/hugo-0.79.0.catalina.bottle
Already downloaded: /Users/tarakrishnan/Library/Caches/Homebrew/downloads/48ada4a614c6820faa5da1919cdcbbd9d5545877212d2ece702c511545c52fd5--hugo-0.79.0.catalina.bottle.tar.gz
==> Pouring hugo-0.79.0.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/hugo/0.79.0: 44 files, 80.4MB

3. Now let’s create our new personal website

$ hugo new site personal_website
Congratulations! Your new Hugo site is created in /Users/tarakrishnan/code/blog/personal_website.
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.

4. Change directories into the newly created site folder and start Hugo

$ cd personal_website && hugo server -D
Start building sites …
WARN 2020/12/13 11:49:22 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/12/13 11:49:22 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/12/13 11:49:22 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
-------------------+-----
Pages            |  3
Paginator pages  |  0
Non-page files   |  0
Static files     |  0
Processed images |  0
Aliases          |  0
Sitemaps         |  1
Cleaned          |  0
Built in 1 ms
Watching for changes in /Users/tarakrishnan/code/blog/personal_website/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/tarakrishnan/code/blog/personal_website/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

5. View the site you have just created by visiting http://localhost:1313/ in your browser of choice

6. Manage your site using GitHub

$ git init

7. Now that we’ve created our website let’s add a theme. For Hugo theme options see themes.gohugo.io

8. To download a theme the best practice is to add it as a git submodule. In this example, we will be using the tale Hugo theme

$ git submodule add https://github.com/EmielH/tale-hugo.git themes/tale

9. Set your Hugo website theme to be tale

$ echo ‘theme = “tale”’ >> config.toml

9. Now that we have a theme, and we can add content to our site

$ hugo new blog_post/my_first_post.md
/Users/tarakrishnan/code/blog/personal_website/content/blog_post/my_first_post.md created

10. Edit the newly created post locally in markdown

---
title: "My_First_Post"
date: 2020-12-13T12:54:55-08:00
draft: true
---
Hello Everyone!
This is my very first post using the Tale Hugo Theme.

11. Once you create all your posts run the Hugo server locally and refresh your Hugo site to see your changes

Congratulations, you have now created your own static website. Continue following this mini-series to learn how to host your website on Github pages. Go to Part 3 of the mini-series.