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.
Set the base hostname and protocol for your site in config.yml file:
baseURL: "https://my-site.com"
You can find the current favicons inside the /static/images/ directory, just replace it with your new favicons, do not change the favicon filenames.
favicon.ico
favicon.png
favicon-32.png
favicon-180.png
favicon-192.png
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:
params:
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:
Optional site banner can be set in _config.yml:
languages:
en:
banner:
text: The latest product release brings even faster workflow execution
button:
text: Learn More
url: "/blog/post/"
style: muted
size: small
Threme support Google analytics and Fantom analytics, enable by setting ID in config.yml:
params:
analytics_fantom: ANALYTICS_ID
analytics_google: ANALYTICS_ID
Enable in config.yml:
params:
navbar:
sticky: true
Set footer layout _config.yml:
params:
footer:
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
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
---
- 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.
buttons:
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.
For general markdown syntax see Cheatsheet.
Upload images to /assets/images/ folder and use this shortcode to add it in content:
{{< image src=“images/post-3.jpg” alt=“Lorem” >}}
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.
name:
other: "Name"
email:
other: "Email"
New site blocks can be added in layouts/partials/blocks/ directory.
layouts/partials/fonts.html.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",
},
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: