Hugo Atlantic Theme

Atlantic is a clean and modern Tailwind 3 theme for Hugo.

Live Demo | Zerostatic Themes

Features

• Tailwind CSS v3
• PostCSS v8
• Uses PostCSS with postcss-import and postcss-nested
• Full Hugo blog functionality
• Beautfifuly designed responsive blog and post layouts
• Blog categories
• Blog pagination
• Responsive design
• Responsive menu
• 100/100 Google Lighthouse speed score ⚡
• 100/100 Google Lighthouse seo score 🏆
• 94/100 Google Lighthouse accessibility score (but this is just because of the green text color contrast)
• Page size is 8.7kB without images. You could load this site on a 56k modem in 1.5 seconds.
• Robust example content included
• Royalty free illustrations included
• Netlify ready - netlify.toml included

Installation

1. Install Hugo

To use this theme you will first need to have Hugo installed. Please follow the official installation guide

⚠️ Note: Check your Hugo version - Hugo Extended is required!

This theme uses Hugo Pipes to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run hugo version. Make sure you see /extended after the version number, for example Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown You do not need to use version v0.51 specifically, it just needs to have the /extended part.

2. Create a new Hugo site

This will create a fresh Hugo site in the folder mynewsite.

hugo new site mynewsite

3. Install the theme

Download or git clone this theme into the sites themes folder mynewsite/themes. You should end up with the following folder structure mynewsite/themes/hugo-atlantic-theme

cd mynewsite
git clone https://github.com/zerostaticthemes/hugo-atlantic-theme.git themes/hugo-atlantic-theme

4. Copy the example content

Copy the entire contents of the mynewsite/themes/hugo-atlantic-theme/exampleSite/ folder to root folder of your Hugo site, ie mynewsite/. To copy the files using terminal, make sure you are still in the projects root, ie the mynewsite folder.

cp -a themes/hugo-atlantic-theme/exampleSite/. .

5. Update config.toml

After you copy the config.toml into the root folder of your Hugo site you will need to update the baseURL, themesDir and theme values in mynewsite/config.toml

baseURL = "/"
themesDir = "themes"
theme = "hugo-atlantic-theme"

6. Install Node Modules

This theme uses npm modules to run Tailwind.

npm install

7. Run the development server

npm run start

Now enter localhost:1313 in the address bar of your browser.

Other Versions

• Jekyll Atlantic Theme (Github)