vncnt-hugo is a minimal Hugo theme for building a single-page personal landing site, built on the Barebones CSS framework and Font Awesome icons.
What is vncnt-hugo?
vncnt-hugo is a simple theme for the Hugo static site generator, created by GitHub user fncnt, that serves as a template for personal landing pages. It takes a Hugo site configuration and content files as input and generates a static HTML page with configurable contact links, theming, and tracking. The theme ships with a sample config.toml, CSS files, Raleway fonts, and Font Awesome webfonts, so a user can clone it and publish without pulling from external CDNs.
Key Features
Barebones CSS foundation — The layout is built on the Barebones CSS framework; the included normalize.css and barebones.css files are both MIT licensed.
Font Awesome icons — Contact links use Font Awesome, with brand icons and webfonts included under the SIL Open Font License 1.1.
Configurable contact links — Add a service by inserting a key into the params.contact section of config.toml, e.g. linkedin with a full URL; links can be defined verbosely to control icon style and ordering.
rel="me" support — Opt-in setting of the rel="me" attribute helps verify profiles on services like GitHub or Mastodon.
Automatic dark mode — On browsers that support the prefers-color-scheme media query, the theme switches to a dark palette when the operating system does.
Google Analytics integration — Uses Hugo's internal Google Analytics templates, activated via the googleAnalytics and privacy configuration values.
Local fonts — Raleway font files are bundled in static/fonts under the SIL OFL 1.1 license, avoiding external font requests.
Who is it for?
Developers creating a personal landing page — Clone or submodule the theme into a Hugo site's themes folder, copy the sample config.toml, and adjust baseURL and params to produce a static profile page.
Mastodon and social media users — Use the opt-in rel="me" setting to verify profile links from a personal domain.
Privacy-oriented site owners — Because the theme keeps fonts and icons local, a static Hugo site can be deployed without third-party requests beyond optional analytics.
Design-conscious users — The minimal aesthetic pairs well with an automatic dark mode that matches the visitor's OS preference.
What can you do with vncnt-hugo?
Personal landing page: Present your name, email, and social profiles on a single static page generated by Hugo.
Profile verification: Enable rel="me" for individual contact links to claim your Mastodon or GitHub profiles from your own domain.
Traffic tracking: Turn on Google Analytics through Hugo's built-in template support by setting the googleAnalytics value in config.toml.
Custom icon sets: Choose any Font Awesome brand icon or non-brand style when defining verbose contact entries.
How does vncnt-hugo work?
Installation follows Hugo's standard theme workflow: clone or git submodule add the repository into the themes directory, copy the theme's config.toml to your site root, and edit baseURL plus the [params] and [params.contact] sections. After running hugo, the theme renders your landing page with the configured contact links, fonts, and optional analytics. The README notes that simple contact keys are ordered lexicographically because of Hugo's range action, so use verbose entries when you need a specific order.
Pros and cons
Pros:
- Simple to set up — Requires only copying config.toml and running Hugo.
- Self-contained assets — Fonts and icons are bundled, reducing external dependencies.
- Automatic dark mode — Works on browsers supporting prefers-color-scheme.
Cons:
- No blog support yet — The project roadmap lists "add support for blog-like content" as an upcoming feature, so the theme currently targets one-page landing sites.
FAQ
Does vncnt-hugo support blog posts?
No. According to the project roadmap, blog-like content support is planned but not yet available; the theme currently focuses on personal landing pages.
How do I add a contact link to my social profile?
Open config.toml, find the params.contact section, and add a key matching a Font Awesome brand icon with the profile URL as the value. For more control over ordering and icon style, use the verbose entry format described in the theme's sample config.
How do I enable dark mode?
The theme reads the visitor's OS preference via the prefers-color-scheme media query. Dark mode activates automatically when the browser supports it and the user's OS is set to dark.
How do I set up Google Analytics?
Enable Hugo's internal template by setting googleAnalytics in config.toml, then optionally configure privacy settings. No theme-specific code changes are needed.
Is vncnt-hugo free to use?
Yes, the theme is publicly available on GitHub. Its included components are MIT licensed or SIL Open Font License, and you can clone or submodule it freely into your Hugo site.
