Static sites are popular for many reasons. Avoiding overkill solutions and keeping a project simple without databases, too many dependencies, or specific server-side configurations (no PHP, no MySQL/MSSQL, .NET, Python, Ruby, and so on) make it very simple to deploy and be robust against numerous possible vulnerabilities. Ultimately, these become basic HTML pages served to the user.
In this guide, I will show you how to setup your development environment with Hugo and build your first static Hugo website.
The legendary design acronym KISS - Keep It Simple, Stupid - can be applied to Hugo and how it approaches the static website generator space.
Built in Go, Hugo is rapidly compiles your static pages (it takes fractions of milliseconds to compile a small site - and can do thousands of pages in seconds).
Also, Hugo provides essential tooling to the static website workflow (including deployment and migration tools), allowing developers and designers to focus on the fun parts such as exercising their creativity and implementing said creativity in the construction of the website.
When we build content-based websites, we can assume some generalities across all sites and Hugo gives a framework for just that. Specifically, we can take content types such as posts, categories, reviews or products and organize the data. Then, we can give each a specific look via templates and stylesheets.
Going forward, we can then really drive it anywhere we need within the HTML/CSS/JS static website space. When you think about it pragmatically, that's a large space allowing a lot of room for creativity.
jQuery will run fine and there is nothing stopping you using third-party services on your static page, if you need them. So don't limit yourself by thinking you cannot integrate other libraries or applications into your static sites. It's really not the case - you can use any of the JavaScript libraries available.
So for a few pages of a company brochure type website, with a link to a Google Forms for a Contact Us page. And if you need to display other types of data, you can use JavaScript for that aspect of your site.
Take, for example, a small store or freelancer with a few products or services that do not require an entire eCommerce solution. Instead, they require only product information and a "contact" link on the page. Hugo can do it by the end of a morning. Hosting isn't even a big deal - it's an afterthought, really, because we're just serving up basic HTML pages.
Hugo also works well for project documentation on GNU projects. For example, think of start-ups or SMEs who need a simple presence.
What Hugo cannot do is dynamic content, e.g database-driven forms, searching or user systems. If that is what your looking for, then Hugo certainly is not what you want. But for the other times, when you find yourself saying "can't we just put up a basic page for this?" Static website generators are a solid option. Also, be aware that Hugo is not the only static site generator. There are many out there and have been around for a long time, here is a list of them.
For building live content blogs like news sites, Hugo could be a great solution to quickly knock up a page for that coverage to be linked from your main site, getting it online in minutes meaning you can continue to add to it fast and redeploy the changes very quickly. But for making an entire news site with search and many writers, it would be really not suitable to use Hugo.
Hugo also lacks in using more advanced tools for its asset pipeline such as ES6 and Sass - if you want to utilize that technology, you will need to include Gulp or Grunt to get the job done; otherwise, vanilla CSS and JavaScript works best.
Hugo is written in Go and has support for many platforms, to view all the releases you can go here
For macOS users with HomeBrew, installation can be done as follows:
brew update && brew install hugo
More information on installation for Mac OSX and Windows
Once Hugo is installed, we can test the installation by running hugo help
in the command prompt or hugo version
Now that we have Hugo installed we can start creating the website. Run the following command replacing 'your-sitename-here' with your project name:
$ hugo new site your-sitename-here
This will create a scaffolding for your site you can view it in your finder
or in your terminal via the tree
command
Hugo has created 5 sub-directories and 1 file, which it uses to create the final website from here's what they all mean:
content/products
for your products content for exampleWe need to add a post to see the site we just created, do so by using the following command:
$ hugo new post/first-post.md
Now edit the file in content/post/first-post.md, it will contain something similar to the following by default:
+++ date = "2016-09-26T13:19:03+07:00" title = "first post" +++
The content inside +++
is the TOML configuration for the post. This configuration is called front matter. It enables you to define post configuration along with its content. By default, each post will have the configuration properties shown above.
Add some text after the +++
like so:
+++ date = "2016-09-26T13:19:03+07:00" title = "first post" +++ Hello world!
So we can see the live reload functionality that is inbuilt with Hugo, let's make some changes to the site and see what happens.
First start the server by running
$ hugo server
Now if you make some changes to your file, you will see Hugo instantly reload.
Your website will be available at http://localhost:1313 but hold on - you will still only see a blank white page at this point, because we have not defined a theme!
Hugo has a very robust and versatile theme library as it uses Go's html/template
library. Themes are easy to work with, installation is done by simply cloning the repository of a theme into the themes
directory for your Hugo site.
Hugo does not come with a default theme, so you must set one.
There are loads of open source themes from which to choose.
Let's add loads of themes to our site so we can have a play with all of them and see what we like. Do so by running the following in our Hugo directory:
$ git clone --recursive https://github.com/spf13/hugoThemes.git themes Cloning into 'themes'... remote: Counting objects: 880, done. remote: Compressing objects: 100% (5/5), done. remote: Total 880 (delta 1), reused 0 (delta 0), pack-reused 875 Receiving objects: 100% (880/880), 669.20 KiB | 288.00 KiB/s, done. Resolving deltas: 100% (506/506), done. Checking connectivity... done.
You will now see a whole heap of themes being cloned into your site. There are a lot so you will have time for a break while it clones...
To use a theme just start Hugo with the -t
or --theme
parameter like so
$ hugo -t ThemeName
Or you can add to your config.toml
:
theme: "ThemeName"
The ThemeName must match the name of the directory inside /themes
.
When you have chosen a theme name from the directory, start you server with hugo server --theme=ThemeName
and take a look on http://localhost:1313
Here are some examples from some of those themes we cloned, I used beg
, crisp
andcactus
have a look around there are so many to choose from!
So you have now generated a website with a hello world post, what else can we do?
Making a basic blog is really easy to do with Hugo. First, you will need to define a archetype for the default post, so create a new file in archetypes/default.md
and add the following as front matter:
+++ tags = ["welding", "metal work"] categories = ["posts"] +++
Here we set some default tags, for a blog on welding we can be sure we want these tags on all our posts, and we make a category called posts just so we have a default when we create a post.
Now add your first post via the terminal like so:
$ hugo new post/tig-welding-a-bike-frame.md
This will create a post with the archetype you defined before, you can now open it in a text editor and start writing away in markdown format!
Let's add some more posts:
$ hugo new post/welding-a-roll-cage.md
Again to add content, just open the file Hugo created and start adding content to the end of the file after the front matter.
To build a photo gallery with Hugo we will use the excellent tool hugo-gallery
available on GitHub.
It's usage is as so:
hugo-gallery <Source Path> <Destination Section> <Title> [BaseUrl]
The hugo-gallery
tool will create a new posts directory containing a markdown file for each image in source directory allowing for an ordered slide show. It will read all of the files out of the Source Path
directory and save them in the static directory of the Hugo site.
It will create a new directory inside of the content directory based on the Title
provided e.g content/welding
For example:
$ hugo-gallery static/images/welding-photos welding "Photos of my insane welding skills"
Visit localhost:1313/welding
to view the content.
Hugo has several tools for deployment such as hugomac which is a OSX menubar app enabling the user to easily publish to EC2 hosting. No command line needed.
Also hugodeploy provides a SFTP setup to deploy with, or you could just use the Automated deployments that ship with Hugo.
Static site generators have been around for a while, and Hugo really builds on the tool set making it fast and easy to knock up sites, or even migrate an existing site from WordPress to Hugo. There are a lot of tools for Hugo, including front-end editors check them out.
Going forward, it will be nice to see more modules for Hugo giving support for things like a contact form and gallery support, or related posts for example.
The Hugo roadmap does have a lot of exiting ideas like dynamic image resizing, support for rsync and image import from hosting providers and easier hosting with AWS EC2 and GitHub integration.
If you are not using Hugo yet be sure to check back on the project as it develops!
14 Best PHP Event Calendar and Booking Scripts
/20 Best WordPress Calendar Plugins and Widgets
/Create a Blog for Each Category or Department in Your WooCommerce Store
/Best Affiliate WooCommerce Plugins Compared
/8 Best WordPress Booking and Reservation Plugins
/Best Exit Popups for WordPress Compared
/Best Exit Popups for WordPress Compared
/12 Best Tab & Accordion WordPress Widgets & Plugins
1 /New Course: Practical React Fundamentals
/20 WordPress Video Plugins and Players to Add Engagement
1 /Short Course: Better Angular App Architecture With Modules
/Preview Our New Course on Angular Material
/Build Your Own CAPTCHA and Contact Form in PHP
/Object-Oriented PHP With Classes and Objects
/Best Practices for ARIA Implementation
/Accessible Apps: Barriers to Access and Getting Started With Accessibility
/Dramatically Speed Up Your React Front-End App Using Lazy Loading
/15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js
/15 Best Modern JavaScript Admin Templates for React, Angular and Vue.js
New Course: Build an App With JavaScript and the MEAN Stack
/Hands-on With ARIA: Accessibility Recipes for Web Apps
/10 Best WordPress Facebook Widgets
13 /Hands-on With ARIA: Accessibility for eCommerce
/New eBooks Available for Subscribers
/Hands-on With ARIA: Homepage Elements and Standard Navigation
/Site Accessibility: Getting Started With ARIA
/How Secure Are Your JavaScript Open-Source Dependencies?
/New Course: Secure Your WordPress Site With SSL
/Testing Components in React Using Jest and Enzyme
/15 Best PHP Event Calendar and Booking Scripts
/Set Up Routing in PHP Applications Using the Symfony Routing Component
1 /Creating Pretty Popup Messages Using SweetAlert2
/Create Interactive Gradient Animations Using Granim.js
/How to Build Complex, Large-Scale Vue.js Apps With Vuex
1 /Creating Stylish and Responsive Progress Bars Using ProgressBar.js
/Set Up an OAuth2 Server Using Passport in Laravel
/Getting Started With Redux: Connecting Redux With React
/Getting Started With Redux: Learn by Example
/Introduction to API Calls With React and Axios
/A Beginner’s Guide to Regular Expressions in JavaScript
/Introduction to Popmotion: Custom Animation Scrubber
/Introduction to Popmotion: Pointers and Physics
/New Course: Connect to a Database With Laravel’s Eloquent ORM
/How to Make a Real-Time Sports Application Using Node.js
/How Laravel Broadcasting Works
/Getting Started With Redux: Why Redux?
/Building the DOM faster: speculative parsing, async, defer and preload
1 /20 Useful PHP Scripts Available on CodeCanyon
3 /How to Find and Fix Poor Page Load Times With Raygun
/Introduction to the Stimulus Framework
/Single-Page React Applications With the React-Router and React-Transition-Group Modules
/12 Best Contact Form PHP Scripts
1 /Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules
/Getting Started With the Mojs Animation Library: The Shape Module
/Getting Started With the Mojs Animation Library: The HTML Module
/Project Management Considerations for Your WordPress Project
/Introduction to the CSS Grid Layout With Examples
1 /8 Things That Make Jest the Best React Testing Framework
/Creating an Image Editor Using CamanJS: Layers, Blend Modes, and Events
/New Short Course: Code a Front-End App With GraphQL and React
/Creating an Image Editor Using CamanJS: Applying Basic Filters
/Creating an Image Editor Using CamanJS: Creating Custom Filters and Blend Modes
/Modern Web Scraping With BeautifulSoup and Selenium
/Challenge: Create a To-Do List in React
1 /Deploy PHP Web Applications Using Laravel Forge
/Getting Started With the Mojs Animation Library: The Burst Module
/10 Things Men Can Do to Support Women in Tech
/A Gentle Introduction to Higher-Order Components in React: Best Practices
/Challenge: Build a React Component
/Eloquent Mutators and Accessors in Laravel
1 /A Gentle Introduction to HOC in React: Learn by Example
/A Gentle Introduction to Higher-Order Components in React
/Understanding Recursion With JavaScript
/Creating a Blogging App Using Angular & MongoDB: Delete Post
/Creating a Blogging App Using Angular & MongoDB: Edit Post
/Creating a Blogging App Using Angular & MongoDB: Add Post
/Introduction to Mocking in Python
/Creating a Blogging App Using Angular & MongoDB: Show Post
/Creating a Blogging App Using Angular & MongoDB: Home
/Creating a Blogging App Using Angular & MongoDB: Login
/Creating Your First Angular App: Implement Routing
/Persisted WordPress Admin Notices: Part 4
/Creating Your First Angular App: Components, Part 2
/Persisted WordPress Admin Notices: Part 3
/Persisted WordPress Admin Notices: Part 2
/Create Your First Angular App: Storing and Accessing Data
/Creating Your First Angular App: Basics
/Error and Performance Monitoring for Web & Mobile Apps Using Raygun
Using Luxon for Date and Time in JavaScript
7 /How to Create an Audio Oscillator With the Web Audio API
/How to Cache Using Redis in Django Applications
/20 Essential WordPress Utilities to Manage Your Site
/Beginner’s Guide to Angular 4: HTTP
/Rapid Web Deployment for Laravel With GitHub, Linode, and RunCloud.io
/Beginners Guide to Angular 4: Routing
/Beginner’s Guide to Angular 4: Services
/Beginner’s Guide to Angular 4: Components
/Creating a Drop-Down Menu for Mobile Pages
/Introduction to Forms in Angular 4: Writing Custom Form Validators
/10 Best WordPress Booking & Reservation Plugins
/How to Auto Update WordPress Salts
/How to Download Files in Python
/10 Best WordPress Star Rating Plugins
/10 Best HTML5 Sliders for Images and Text
/Creating a Task Manager App Using Ionic: Part 2
/Introduction to Forms in Angular 4: Reactive Forms
/Deferring Tasks in Laravel Using Queues
/Introduction to Forms in Angular 4: Template-Driven Forms
/Get Rid of Bugs Quickly Using BugReplay
1 /Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
/10 Must-See Easy Digital Downloads Extensions for Your WordPress Site
/Understanding ExpressJS Routing
/Inheritance and Extending Objects With JavaScript
/Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes
/Performant Animations Using KUTE.js: Part 4, Animating Text
/Performant Animations Using KUTE.js: Part 3, Animating SVG
/New Course: Code a Quiz App With Vue.js
/Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
/Performant Animations Using KUTE.js: Part 1, Getting Started
/Single-Page Applications With ngRoute and ngAnimate in AngularJS
/How to Create a Custom Authentication Guard in Laravel
/Working With Tables in React, Part Two
/Working With Tables in React, Part One
/How to Set Up a Scalable, E-Commerce-Ready WordPress Site Using ClusterCS
/Build Web Applications Using Node.js
/New Course on WordPress Conditional Tags
/Stateful vs. Stateless Functional Components in React
/TypeScript for Beginners, Part 5: Generics
/Building With Vue.js 2 and Firebase
6 /Best Unique Bootstrap JavaScript Plugins
/Essential JavaScript Libraries and Frameworks You Should Know About
/Vue.js Crash Course: Create a Simple Blog Using Vue.js
/Build a React App With a Laravel Back End: Part 2, React
/Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API
/Bulk Import a CSV File Into MongoDB Using Mongoose With Node.js
/API Authentication With Node.js
/Command Line Basics and Useful Tricks With the Terminal
/Learn Computer Science With JavaScript: Part 3, Loops
/Learn Computer Science With JavaScript: Part 4, Functions
/Learn Computer Science With JavaScript: Part 2, Conditionals
/Learn Computer Science With JavaScript: Part 1, The Basics
/Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts
/Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts
/Create Interactive Charts Using Plotly.js, Part 3: Bar Charts
/Create Interactive Charts Using Plotly.js, Part 2: Line Charts
/Create Interactive Charts Using Plotly.js, Part 1: Getting Started
Build a To-Do API With Node, Express, and MongoDB
/Getting Started With End-to-End Testing in Angular Using Protractor
/Build a To-Do API With Node and Restify
/Testing Components in Angular Using Jasmine: Part 2, Services
/Testing Components in Angular Using Jasmine: Part 1
/Creating a Blogging App Using React, Part 6: Tags
/React Crash Course for Beginners, Part 3
/React Crash Course for Beginners, Part 2
/React Crash Course for Beginners, Part 1
/Set Up a React Environment, Part 4
1 /Set Up a React Environment, Part 3
/New Course: Get Started With Phoenix
/Set Up a React Environment, Part 2
/Set Up a React Environment, Part 1
/How to Create a Real-Time Feed Using Phoenix and React
/Creating a Blogging App Using React, Part 5: Profile Page
/Pagination in CodeIgniter: The Complete Guide
/JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG
/JavaScript-Based Animations Using Anime.js, Part 3: Values, Timeline, and Playback
/JavaScript-Based Animations Using Anime.js, Part 2: Parameters
JavaScript-Based Animations Using Anime.js, Part 1: Targets and Properties
/20 Popular WordPress User Interface Elements
/Angular vs. React: 7 Key Features Compared
/10 Elegant CSS Pricing Tables for Your Latest Web Project
/Getting Started With the Flux Architecture in React
/Getting Started With Matter.js: The Composites and Composite Modules
/Getting Started With Matter.js: The Body Module
/Getting Started With Matter.js: The Engine and World Modules
/Getting Started With Matter.js: Introduction
/10 More Popular HTML5 Projects for You to Use and Study
/Understand the Basics of Laravel Middleware
/Iterating Fast With Django & Heroku
/Creating a Blogging App Using React, Part 4: Update & Delete Posts
/Creating a jQuery Plugin for Long Shadow Design
/How to Register & Use Laravel Service Providers
2 /Unit Testing in React: Shallow vs. Static Testing
/Creating a Blogging App Using React, Part 3: Add & Display Post
/Creating a Blogging App Using React, Part 2: User Sign-Up
20 /Creating a Blogging App Using React, Part 1: User Sign-In
/Creating a Grocery List Manager Using Angular, Part 2: Managing Items
Using Celery With Django for Background Task Processing
/Dynamic Page Templates in WordPress, Part 3
/Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
/New Course: How to Hack Your Own App
/How to Install Yii on Windows or a Mac
/What Is a JavaScript Operator?
/Building Your Startup: Approaching Major Feature Enhancements
/Extending HTML by Creating Custom Tags
/How to Define State With Angular UI-Router
/Dynamic Page Templates in WordPress, Part 2
/Dynamic Page Templates in WordPress, Part 1
1 /Building Your Startup: Securing an API
/How to Draw Bar Charts Using JavaScript and HTML5 Canvas
/What Is WP-CLI? A Beginner’s Guide
/How to Zip and Unzip Files in CodeIgniter
/Programming With Yii2: Building Community With Voting, Comments, and Sharing
/How to Work With Session Data in CodeIgniter
/How to Use the jQuery Function to Select Elements
/How to Create Animations in AngularJS With ngAnimate
/AngularJS Form Validation With ngMessages
/15 Best PHP Calendar, Booking & Events Scripts
/Building Your Startup: Using Routes for Schedule With Me
/A Quick Guide to Dependency Management With Bower
/Using the Twitter API to Tweet Repetitive Content
/Getting Started With Chart.js: Scales
/New Short Course: React State Management With MobX
/Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery
/Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts
/Getting Started With Chart.js: Radar and Polar Area Charts
/How to Set Up a Project in Angular 2
/Getting Started With Chart.js: Line and Bar Charts
/How to Handle Errors & Exceptions in the Yii Framework
/Getting Started With Chart.js: Introduction
3 /Building Your Startup With PHP: Bootstrap Your Home Page
/How to Build a User Tour With Shepherd in JavaScript
/Building With the Twitter API: Analyzing Your Followers
/How to Use the WordPress REST API’s Index Route
/Programming With Yii2: Building a RESTful API
/Uploading With Rails and Carrierwave
/How to Use OmniAuth-Twitter in a Rails Application
/Uploading Files With Rails and Dragonfly
/Making a Sliding Side Navigation Menu for Responsive Designs
/Building With the Twitter API: Creating Friends to Follow
/Building Your Startup: Running Multiple Domains
/Using the Requests Module in Python
5 /Acuity Scheduling Developer Platform: OAuth, Webhooks, and Reporting
/Decoding the Proxy Class in OpenCart
/Acuity Scheduling: Embedding and Developer Integration
1 /Custom Controllers in OpenCart 2
/Building Your Startup: Error Logging
/Acuity Scheduling’s Developer-Friendly Scheduling Service
/New Short Course: Essential Gulp Tasks
/Erlang and Elixir, Part 5: Phoenix Framework
/Add a Website Calendar Using Jalendar 2
/Getting Started With Cassandra: Using CQL API and CQLSH
/Using the New York Times API to Scrape Metadata
1 /New Coffee Break Course: How to Animate Your Angular 2 App
/Make Creating Websites Fun Again With Hugo
/Get a Fake REST API Up and Running Using json-server
/Understanding Nested Routing in React
/Authentication in Rails Using Clearance
/Using Illuminate Database With Eloquent in Your PHP App Without Laravel
New Coffee Break Course: How to Use the Angular 2 HTTP Service
/Get Started Building Your Blog With Parse.js: Migration to Your Own Parse Server
/Building Your Startup: Automatic Time-Zone Detection
/Adding Custom Fields to Simple Products With WooCommerce
/New Coffee Break Course: Reactive Programming With RxJS
/Using Namespaces and Autoloading in WordPress Plugins, Part 4
/New Code eBooks Available for Subscribers
/
harriett What's up, after reading this awesome…