Introduction is a minimalist, highly-versatile theme for Hugo. It can be configured as a single page, or as a full-featured site with multiple sections. It is multilingual, responsive, and includes a light and dark theme.
Multilingual - supports side-by-side content in different language versions
Custom index page sections from Markdown files
Projects and Blog sections
Page load fade-in CSS effect and smooth scrolling to anchor links
Introduction ships with an fully configured example site. For a quick preview:
hugo serve --themesDir ../..
Then visit http://localhost:1313/ in your browser to view the example site.
The following explains how to add content to your Hugo site. You can find sample content in the exampleSite/ folder.
hugo new home/index.md
The title frontmatter will be the first large heading.
The content of index.md will be shown as a subtitle line.
You might want to set headless to true in the frontmatter. See headless bundles for more information.
Content for the home page lives under content/home/. You may add as many files as you want to in markdown format.
Each markdown file will show as a section on the home page and can be ordered by the weight value in the file’s frontmatter. You can set image to show an image on the left side of the section. The image file must be in the content/home/ folder.
You may add a contact section by creating
hugo new home/contact.md
This will always be shown as the last section on the home page.
Introduction provides an easy way to showcase your projects. Each project can even have its own gallery, shown as an image carousel.
Start by creating an index file for the projects section:
hugo new projects/_index.md
Add a title and some optional content to the file.
Add an optional weight for ordering projects section.
To create a project, run:
hugo new projects/YourProjectName/index.md
The frontmatter of your new file contains some comments to help your configure your project.
You can set external_link to make the project link to another website.
Add images to your project by placing image files in the YourProjectName/ folder. If you add more then one photo, they will display as a carousel gallery. Images will be ordered by filename. The first image will be shown as the project preview image. You can change the order of your images by adding a weight to that resource’s parameters:
Introduction contains a default menu. If you want to override this, you can do so by defining a menu.main in config.toml.
Contact section clock
Introduction can optionally show your current local time in your contact section. This uses vanilla JS and variables you provide. You can set this up by copying the settings in the exampleSite config.toml for localTime, timeZone, and timeFormat.
You can easily use Plausible.io for analytics by setting plausible = true in your config.toml. Plausible offers a privacy-friendly alternative to Google Analytics. You’ll need your own Plausible account - see plausible.io for more.