Hello Friend, Let‘s Build Our First Jamstack Site!

Have you heard about these blazing fast modern websites called "Jamstack" sites? They can be created easily without web servers using tools like Hugo and deployed in minutes. I‘ll walk you through the entire process of building your first Jamstack site with Hugo and Netlify step-by-step in this guide.

Content Navigation show

By the end, you‘ll understand:

  • What Jamstack is and why it‘s popular
  • How to create a local Hugo site on your computer
  • Working with themes to customize the design
  • Adding content and media
  • Taking your finished site live with Netlify

Let‘s get started pal! This is gonna be fun…

What is Jamstack?

Jamstack stands for JavaScript, APIs and Markup. It is a modern web development architecture based on client-side JavaScript, reusable APIs and prebuilt Markup.

Unlike traditional websites built with monolithic CMS platforms like WordPress, Jamstack sites don‘t depend on web servers. Instead, pages are served as static prebuilt HTML files. This makes them much faster, secure and cheaper to run.

Some major benefits my friend:

  • Speed: Serving static files is crazy fast. No waiting for server-side processing.

  • Security: Minimizes surface area for attacks with no databases or servers.

  • Scalability: CDNs handle all the heavy lifting.

  • Flexibility: Use any frontend framework, API backend & tools.

So in summary – Jamstack rocks! Let‘s see it in action by building a site with Hugo…

Getting Set Up with Hugo

Created by Steve Francia in 2013, Hugo is an extremely fast static site generator written in Go. It will translate your content and templates into blazing fast static websites hosted anywhere like Netlify.

Hugo is installer via package manager on major platforms. You‘ll also need Git installed to manage some themes.

Install Hugo & Git

MacOS:

// Homebrew package manager
brew install hugo

brew install git

Windows:

Download Hugo installer and Git installer.

Linux:

Use apt, yum, etc depending on distro.

Next verify everything is working with:

hugo version
git --version

Great! Now we can create your first Hugo site.

Creating a New Site

Open terminal and run:

hugo new site mycooljamstacksite

Hugo will generate a new folder called mycooljamstacksite containing the following structure:

├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

This contains configuration files, folders for content/layouts/assets and more. We‘ll customize these next.

Choosing a Hugo Theme

Themes in Hugo contain page templates, design assets like CSS/JS and code to render different content types. We‘ll install the "Ananke" theme with a professional look and feel.

Navigate into your site folder mycooljamstacksite and type:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

This installs the theme into /themes folder. Then open the main config file:

config.toml

baseURL = "http://example.org/"
# Tell Hugo to use the ananke theme
theme = "ananke"

Creating Site Content

Hugo allows you to write content in Markdown, JSON, HTML and more. Let‘s start by creating an "About" page:

hugo new about.md

This generates a new file in /content/about.md. Open it up to add your info and save changes.

Repeat the process to make a blog post:

hugo new posts/my-first-post.md

Edit this file to add your title and blog post text.

Running Local Hugo Server

To preview your site, start the Hugo dev server by typing:

hugo server -D

Visiting http://localhost:1313 will display your new site! The -D flag builds future/draft content.

As you add more posts and pages, they will automatically render with live reload enabled.

Deploying Your Hugo Site

Once you finish developing locally it‘s time to deploy your Jamstack site publicly. Netlify is an amazing service for hosting and automating Hugo sites.

Follow these steps friend:

  1. Push your Hugo site into a GitHub repo for Netlify to access

  2. Sign up at Netlify.com and create a New Site from Git

  3. Link your Hugo GitHub repo

  4. Set the build command: hugo --gc --minify

  5. Set publish directory to public

That‘s it! Now Netlify will build and deploy your site automatically when you push Git changes.

It will be blazing fast with their global CDN. You can even set up custom domains, HTTPS, split testing and more!

Where To Go From Here

Congratulations on building your first Jamstack site with Hugo and Netlify! 🥳 🎉

This tutorial covered the foundations, but there‘s so much more you can explore:

  • Integrating a CMS for editing content
  • Building eCommerce stores
  • Adding forms / serverless functions
  • Finding more Hugo themes
  • Customizations and optimizations

I hope you enjoyed creating your first Jamstack site as much as I did writing about it friend. Let me know if you have any other questions!

Tags: