Startup Theme Documentation

Table Of Contents

Installation and Development

Install Hugo.

Install dependencies: npm install

To start developing: npm run dev

To get out of developing mode you need to do Ctrl+c twice.

Basic theme setup

Site URL

Set the base hostname and protocol for your site in config.yml file:

baseURL: ""

Update favicons

You can find the current favicons inside the /static/images/ directory, just replace it with your new favicons, do not change the favicon filenames.


Update OG image

This is the default image when a page is shared on social media, it si located inside the /static/images/ directory og.png. To set a OG image on any page add image: "/images/someimage.png" variable to the front matter.

The theme uses two logo files one dark for display on light backgrounds and one light logo for display on dark backgrounds. If you don’t intend to use dark navigation backgrounds you don’t need to upload the light logo. Add your logo image files to /static/images/ directory, then specify the logo files in config.yml:

  logo: "/images/logo.svg"
  logo_light: "/images/logo-light.svg"

Theme uses four default Hugo menus, these can be set in config.yml under relevant language:

  • Navbar
  • Navbar CTA
  • Footer
  • Social icons

Site banner

Optional site banner can be set in _config.yml:

      text: The latest product release brings even faster workflow execution
        text: Learn More
        url: "/blog/post/"
        style: muted 
        size: small


Threme support Google analytics and Fantom analytics, enable by setting ID in config.yml:

  analytics_fantom: ANALYTICS_ID
  analytics_google: ANALYTICS_ID

Enable in config.yml:

    sticky: true

Set footer layout _config.yml:

    layout: footer #footer-2

Set footer to centered layout and footer-2 for left aligned layout.



All available block demos are included in pages, just copy and paste them when creating a new page, variables and they options are included as comments.

Theme uses blocks layout as source of content for pages. The blocks layout and contents are defined in page front matter, example:

layout: blocks
- block: hero
  superheading: Lorem
  heading: "**Supercharge your Hugo site** with Startup"
  subheading: Morbi eget neque vel turpis vel turpis lacinia lacinia eget neque vel turpis.
  image: images/blue-4.jpg

Common block options

- block: gallery-1
  mode: muted #options: gradient-1 muted primary secondary outline
  padding: top #options: top, bottom, none, leave blank for both
  superheading: Lorem
  heading: "**Supercharge your Hugo site** with Startup"
  subheading: Morbi eget neque vel turpis vel turpis lacinia lacinia eget neque.

Button options

  text: Learn more
  url: "#"
  style: secondary #options: gradient-1 muted primary secondary outline
  size: large #options: large small, leave blank for medium


Navbar dropdown menus and some block have options to display icons, the icons are located in layouts/partials/icons/ folder, when specifying icons in block reference only the iocn file name without the .svg extension.

Post content

For general markdown syntax see Cheatsheet.

Image shortcode

Upload images to /assets/images/ folder and use this shortcode to add it in content:

{{< image src=“images/post-3.jpg” alt=“Lorem” >}}

String translation

Set your default language code in config.yml:

defaultContentLanguage: "en"

Theme strings can be translated in i18n/en.yml, duplicate the current English translation en.yml file, then replace en with your new language code.

  other: "Name"
  other: "Email"


New site blocks can be added in layouts/partials/blocks/ directory.

Google fonts update

  1. Update the Google font mebed links inlayouts/partials/fonts.html.
  2. Update the font family in tailwind.config.js, replace 'Wix Madefor Display' with your new font:
fontFamily: {
  sans: "'Wix Madefor Display',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",

Brand colors

Modify in tailwind.config.js:

colors: {
  primary: {
    100: '#e0e7ff',
    500: '#6366f1',
    600: '#4f46e5',
  secondary: {
    800: '#3730a3',
    900: '#312e81',

Modify text highlight and button gradients in assets/css/main.css:

h1 strong, h2 strong, h3 strong, .text-highlight {
  @apply font-bold;
  @apply text-transparent;
  @apply bg-clip-text; 
  @apply bg-indigo-600; 
  @apply bg-gradient-to-r;
  @apply from-indigo-600;
  @apply via-purple-600;
  @apply to-pink-600;

.button {
  @apply bg-indigo-600; 
  @apply bg-gradient-to-r;
  @apply from-indigo-600;
  @apply via-purple-600;
  @apply to-pink-600;


Customer support is provided through email for up to six months from the purchase date and is provided Monday to Friday during the business week. We aim to answer all support requests daily, most are handled within 24h.

Support email address is in your purchase receipt, please when contacting us use the same email address you used to purchase the theme.

Before contacting support please:

  • Read this documentation
  • Describe your problem in detail
  • Include links
  • Attach screenshots