2. Getting Started

Prerequisites

• Hugo version 0.115.2+ extended (required). Most features will likely work fine on older versions but aren't fully tested.
• git (recommended)
• Netlify hosting (optional but recommended). This theme has a handful of features that play well with Netlify such as a basic deployment config, Netlify Forms support, and Netlify security headers/redirects.
• npm (optional). Not necessary unless utilizing PostCSS and Autoprefixer.

Installation

These instructions are similar to those found in the Hugo Quickstart.

The recommended way to get started is with git submodules. You can also download the source as a .zip and copy it into the themes directory of your project.

Hugo modules

Support for Hugo modules was added in v3.2.3 (instructions coming soon). If you are using git submodules instead you can safely ignore Hugo modules.

Add theme

Enter the following commands in your terminal to install the theme.

hugo new site my-new-site
cd my-new-site
git init
git submodule add https://github.com/wjh18/hugo-liftoff.git themes/hugo-liftoff

Copy over the contents of exampleSite to your project root (see Example Config & Content for more info) or add theme = 'hugo-liftoff' to your hugo.toml.

Start the development server with hugo server and navigate to localhost:1313 in your browser.

Note: If you simply add the theme field to your config you'll see a barebones skeleton of the theme running. This is expected. Once you add the recommended config files from exampleSite to the project the theme will start to take shape.

git

Note: These are all very basic git operations but I wanted to add this section for completeness and to help less technical users.

Here's a simple .gitignore file that I use for my own site. Add it to the root of your project so you don't accidentally commit any unnecessary files.

### Hugo ###
/public/
/resources/_gen/
.hugo_build.lock
# Hugo Pipes
/assets/jsconfig.json
hugo_stats.json
# Hugo executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

### JS ###
/node_modules

### Netlify ###
/netlify

### System
.DS_Store

Next, create a new remote repository, add it as a remote and commit/push your changes.

git status
git add .
git commit -m "first commit"
git remote add origin https://github.com/<user>/<repo-name>.git
git push -u origin master

Updating

If you added the theme as a git submodule, you can update it in the future by running the following command from the root directory where your repo was initialized:

git submodule foreach git pull origin master

Alternatively, cd into themes/hugo-liftoff and git pull from there.

Then commit the changes.

Otherwise, you'll need to download the latest version of the theme and update your themes directory manually.

As always, please take caution with updates as it's impossible to account for every custom configuration and small bugs are a possibility. I recommend at least creating a branch for updates and merging in the changes if everything looks okay.

Please open an issue on GitHub if you come across anything that needs fixing.

Example Config & Content

Hugo Liftoff has example config and content files included to get you started quickly. Here's how to add them.

• First, delete the existing hugo.toml and content directory in the root of your project.
• Copy the entire config and content directories within themes/hugo-liftoff/exampleSite/ and paste them into the root of your project.
• If you want to add custom CSS and JS to your site at some point, copy the assets directory from themes/hugo-liftoff/exampleSite/ into the root of your project (or simply create an assets directory with custom.css and custom.js files). If you don't see a need for adding custom CSS or JS, comment out the custom_css and custom_js fields in params.toml to avoid build errors.
• Run the development server and you should see a complete example site.

Next steps

In the next section, we'll start customizing our config and site content.