# Hinode

> Hinode is a production-ready Hugo theme built on Bootstrap 5. Open source, actively maintained, and built for developers.

## Pages

- [Hinode](https://gethinode.com/index.md): Hinode is a production-ready Hugo theme built on Bootstrap 5 — open source, actively maintained, and built for developers.
- [Contact](https://gethinode.com/contact/index.md): Get in touch with the Hinode team. Report bugs, request features, contribute via pull requests, or enquire about professional services including hosting, CMS setup, and custom theme design.
- [Services](https://gethinode.com/services/index.md): Professional services built on the Hinode open-source foundation.


## Docs

- [Major releases](https://gethinode.com/docs/migration/releases/index.md): A chronological overview of key releases since the initial launch of Hinode.
- [Layout](https://gethinode.com/docs/configuration/layout/index.md): Hinode uses a grid-based, responsive design for the home page, single pages and list pages.
- [Abbr](https://gethinode.com/docs/components/abbr/index.md): Use the abbr shortcode to show the long form of an abbreviation.
- [Markdown fundamentals](https://gethinode.com/docs/content/markdown-fundamentals/index.md): Use a mix of Markdown and HTML syntax to style your content.
- [Content management](https://gethinode.com/docs/content/content-management/index.md): Use Markdown and templates to define the content for your website.
- [Introduction](https://gethinode.com/docs/getting-started/introduction/index.md): Get started with Hinode, a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
- [Credits](https://gethinode.com/docs/about/credits/index.md): Hinode is fully open source and uses several open-source frameworks and libraries.
- [Overview](https://gethinode.com/docs/advanced-settings/overview/index.md): Configure and customize Hinode to your liking using modules, npm, and mounted folders.
- [Styles](https://gethinode.com/docs/advanced-settings/styles/index.md): Use extensible Sass files to generate the stylesheets for your website.
- [License](https://gethinode.com/docs/about/license/index.md): Hinode's open-source license for the codebase and documentation.
- [Accordion](https://gethinode.com/docs/components/accordion/index.md): Use the accordion shortcode to show a group of vertically collapsing and expanding items.
- [Colors](https://gethinode.com/docs/configuration/colors/index.md): Use Bootstrap's color system to easily adjust your website's colors.
- [Content organization](https://gethinode.com/docs/content/content-organization/index.md): A structured approach to organize and present content.
- [Upgrading to Hugo modules](https://gethinode.com/docs/migration/upgrading-hinode-v0-16/index.md): Upgrade your existing Hinode site to take advantage of Hugo modules introduced in v0.16.
- [Commands](https://gethinode.com/docs/getting-started/commands/index.md): Use npm commands to automate the build process and to keep track of dependencies.
- [Upgrading to Hinode v1](https://gethinode.com/docs/migration/upgrading-hinode-v1/index.md): Upgrade your existing Hinode site to take advantage of content blocks introduced in v1.
- [Color modes](https://gethinode.com/docs/configuration/color-modes/index.md): Add light mode and dark mode support to your website.
- [Hosting and deployment](https://gethinode.com/docs/getting-started/hosting-and-deployment/index.md): Deploy your Hinode site to popular hosting providers.
- [Alert](https://gethinode.com/docs/components/alert/index.md): Use the alert shortcode to display a contextual feedback message.
- [Scripts](https://gethinode.com/docs/advanced-settings/scripts/index.md): Bundle local and external JavaScript files by intent and rendering impact.
- [Upgrading to Hinode v2](https://gethinode.com/docs/migration/upgrading-hinode-v2/index.md): Upgrade your existing Hinode site to take advantage of the refactored architecture introduced in v2.
- [Links and cross-references](https://gethinode.com/docs/content/links-and-cross-references/index.md): Generate internal links and external links using native Markdown.
- [Fonts](https://gethinode.com/docs/configuration/fonts/index.md): Configure a specific font to style your website.
- [Animation](https://gethinode.com/docs/components/animation/index.md): Use the animation shortcode to show an After Effects animation.
- [Icons](https://gethinode.com/docs/advanced-settings/icons/index.md): Configure secure access to icons from Bootstrap and Font Awesome.
- [Upgrading to Hinode v3](https://gethinode.com/docs/migration/upgrading-hinode-v3/index.md): Upgrade your existing Hinode site to the v3 module generation with its redesigned argument validation engine.
- [Args](https://gethinode.com/docs/components/args/index.md): Use the args shortcode to generates a table of structured arguments.
- [Partial development](https://gethinode.com/docs/advanced-settings/partial-development/index.md): Develop custom partials and shortcodes following Hinode's coding conventions.
- [Languages](https://gethinode.com/docs/configuration/languages/index.md): Configure multiple languages to enable multilingual sites.
- [Images and figures](https://gethinode.com/docs/content/images-and-figures/index.md): Use the image shortcode to display a responsive image with optional caption.
- [Private modules and packages](https://gethinode.com/docs/getting-started/private-modules-and-packages/index.md): Configure tokens to access private Hugo modules and npm packages.
- [Navigation](https://gethinode.com/docs/configuration/navigation/index.md): Help the user navigate your website using configurable navigation elements.
- [Tables](https://gethinode.com/docs/content/tables/index.md): Enhance out-of-the-box Markdown tables with Bootstrap styling.
- [Module development](https://gethinode.com/docs/advanced-settings/module-development/index.md): Develop your own Hugo modules compatible with Hinode.
- [Badge](https://gethinode.com/docs/components/badge/index.md): Use the badge shortcode to enrich headings.
- [Documentation](https://gethinode.com/docs/configuration/documentation/index.md): Configure versioned documentation
- [Server headers](https://gethinode.com/docs/advanced-settings/server-headers/index.md): Configure the server headers to refine the content security policy.
- [Contribute](https://gethinode.com/docs/about/contribute/index.md): Contribute to the open-source development of Hinode.
- [Icons](https://gethinode.com/docs/content/icons/index.md): Use out-of-the-box Font Awesome icons to style your website.
- [Breadcrumb](https://gethinode.com/docs/components/breadcrumb/index.md): Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy.
- [Server-side redirection](https://gethinode.com/docs/advanced-settings/server-side-redirection/index.md): Enable server-side redirection (Netlify only)
- [Analytics](https://gethinode.com/docs/configuration/analytics/index.md): Enable analytics for your website to view usage statistics and more.
- [Button Group](https://gethinode.com/docs/components/button-group/index.md): Use the button-group shortcode to display a group of buttons.
- [Troubleshooting](https://gethinode.com/docs/getting-started/troubleshooting/index.md): Review common issues and resolutions.
- [Modules](https://gethinode.com/docs/configuration/modules/index.md): Customize and extend Hinode with Hugo modules.
- [Button](https://gethinode.com/docs/components/button/index.md): Use the button shortcode to display a button with a hyperlink.
- [Cookie consent](https://gethinode.com/docs/configuration/cookie-consent/index.md): Configure cookie consent to comply with regulatory requirements.
- [Card Group](https://gethinode.com/docs/components/card-group/index.md): Use the card-group shortcode to display a group of cards.
- [Digital Asset Managers](https://gethinode.com/docs/configuration/digital-asset-managers/index.md): Configure Digital Asset Managers to delegate the transformation of images
- [Card](https://gethinode.com/docs/components/card/index.md): Use the card shortcode to display a card that links to a content page.
- [Carousel](https://gethinode.com/docs/components/carousel/index.md): Use the carousel shortcode to display a carousel of several images.
- [Collapse](https://gethinode.com/docs/components/collapse/index.md): Use the collapse shortcode to reveal or hide a panel.
- [Command](https://gethinode.com/docs/components/command/index.md): The command shortcode generates terminal output for either Bash, PowerShell, or SQL shell languages.
- [Docs](https://gethinode.com/docs/components/docs/index.md): The docs shortcode captures a code snippet from a supported input file.
- [Example](https://gethinode.com/docs/components/example/index.md): The example shortcode displays a code example and renders a preview of the same input.
- [File](https://gethinode.com/docs/components/file/index.md): The file shortcode prints the full content of any given file with syntax highlighting.
- [Icon](https://gethinode.com/docs/components/icon/index.md): Use the icon shortcode to add a Font Awesome or custom icon with ease.
- [Image](https://gethinode.com/docs/components/image/index.md): Use the image shortcode to display a responsive image with an optional aspect ratio.
- [Ins](https://gethinode.com/docs/components/ins/index.md): Use the ins shortcode to underline text.
- [Kbd](https://gethinode.com/docs/components/kbd/index.md): Use the kbd shortcode to show a keyboard input element.
- [Link](https://gethinode.com/docs/components/link/index.md): Use the link shortcode to add a managed link to your page content.
- [Map](https://gethinode.com/docs/components/map/index.md): Use the map shortcode to show an interactive map.
- [Mark](https://gethinode.com/docs/components/mark/index.md): Use the mark shortcode to highlight text.
- [Mermaid](https://gethinode.com/docs/components/mermaid/index.md): Use the mermaid shortcode to add diagrams and charts powered by Mermaid.
- [Navbar](https://gethinode.com/docs/components/navbar/index.md): Use the navbar shortcode to display a navigation header with a toggler.
- [Navs and tabs](https://gethinode.com/docs/components/navs-and-tabs/index.md): Use the nav shortcode to show a group of multiple tab panes.
- [Persona](https://gethinode.com/docs/components/persona/index.md): Use the persona shortcode to display a custom card.
- [Release](https://gethinode.com/docs/components/release/index.md): Use the release shortcode to indicate the availability of a specific feature in a tagged release.
- [Spinner](https://gethinode.com/docs/components/spinner/index.md): Use the spinner shortcode to indicate the loading state of a component or page.
- [Sub](https://gethinode.com/docs/components/sub/index.md): Use the sub shortcode to display text in subscript.
- [Sup](https://gethinode.com/docs/components/sup/index.md): Use the sup shortcode to display text in superscript.
- [Table](https://gethinode.com/docs/components/table/index.md): Use the table shortcode to make your Markdown table responsive.
- [Testimonial](https://gethinode.com/docs/components/testimonial/index.md): Use the testimonial shortcode to display a quote with attribution.
- [Timeline](https://gethinode.com/docs/components/timeline/index.md): Use the timeline shortcode to show items ordered on a vertical timeline.
- [Toast](https://gethinode.com/docs/components/toast/index.md): Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
- [Tooltip](https://gethinode.com/docs/components/tooltip/index.md): Use the tooltip shortcode to display a tooltip for a hyperlink.
- [Video](https://gethinode.com/docs/components/video/index.md): Use the video shortcode to embed a responsive video on your site.
- [About](https://gethinode.com/docs/blocks/about/index.md): Use the about content block to display a lead text next to a featured illustration.
- [Approach](https://gethinode.com/docs/blocks/approach/index.md): Use the approach block to show a featured image with one or more steps.
- [Articles](https://gethinode.com/docs/blocks/articles/index.md): Use the articles block to show a group of article cards.
- [Cards](https://gethinode.com/docs/blocks/cards/index.md): Use the cards block to show a group of content cards.
- [Contact form](https://gethinode.com/docs/blocks/contact-form/index.md): Use the contact form content block to display a contact form with server-side forms integration.
- [CTA](https://gethinode.com/docs/blocks/cta/index.md): Use the CTA content block to display an action link with an optional contact.
- [FAQ](https://gethinode.com/docs/blocks/faq/index.md): Shows an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.
- [Featured](https://gethinode.com/docs/blocks/featured/index.md): Use the featured content block to feature a specific article or downloadable asset.
- [Heading](https://gethinode.com/docs/blocks/heading/index.md): Use the heading content block to show a heading with optional regular content.
- [Hero](https://gethinode.com/docs/blocks/hero/index.md): Shows a hero banner on the top of the page. The section supports a background image with an overlay to improve contrast. The hero includes a headline and optional breadcrumb for site navigation.
- [List](https://gethinode.com/docs/blocks/list/index.md): Use the list content block to show a list of articles.
- [Menu](https://gethinode.com/docs/blocks/menu/index.md): Use the menu content block to render a grid of level 1 and level 2 menu items.
- [Panels](https://gethinode.com/docs/blocks/panels/index.md): Use the panels content block to display multiple toggable panels.
- [Preview](https://gethinode.com/docs/blocks/preview/index.md): Display live URL previews with switchable device views (desktop, tablet, mobile). Shows websites or web applications in an iframe with device-specific dimensions and responsive controls.
- [Releases](https://gethinode.com/docs/blocks/releases/index.md): Use the releases content block to display a timeline with release information.
- [Separator](https://gethinode.com/docs/blocks/separator/index.md): Adds a section separator. The separator spans the entire page from edge to edge on smaller devices. On larger screens, the separator is bound by the maximum container width that contains the section.
- [Team](https://gethinode.com/docs/blocks/team/index.md): Use the team content block to show a group of team members.
- [Testimonials](https://gethinode.com/docs/blocks/testimonials/index.md): Use the testimonials content block to display one or more client testimonials.
- [Video message](https://gethinode.com/docs/blocks/video-message/index.md): Features a video with optional messages.


## Tutorials

- [Creating your first site with Hinode](https://gethinode.com/tutorials/creating-first-site-hinode/index.md): Set up your Hinode site with version control using npm, GitHub and VS Code.
- [Customizing the appearance of your site](https://gethinode.com/tutorials/customizing-appearance-site/index.md): Guide on how to use custom layouts to override single page elements and create fully custom content type layouts.
- [Optimizing the user experience](https://gethinode.com/tutorials/optimizing-user-experience/index.md): Guide on how to optimize the user experience of your site.
- [Developing Hugo modules](https://gethinode.com/tutorials/developing-hugo-modules/index.md): Guide on how to develop Hugo modules compatible with Hinode.
- [Automating dependency updates](https://gethinode.com/tutorials/automating-dependency-updates/index.md): Guide on how to automate npm and hugo dependencies with GitHub actions.
- [Generating LLM-ready content](https://gethinode.com/tutorials/generating-llm-content/index.md): Guide on how to make your Hinode site accessible to large language models using the mod-llm module.


## Showcases

- [AdaptiQ](https://gethinode.com/showcases/adaptiq/index.md): A custom design with GSAP animations, light/dark mode, and multi-language support.
- [Agency](https://gethinode.com/showcases/agency/index.md): A dark Hinode theme, including a sample blog in multiple languages.
- [gethinode.com](https://gethinode.com/showcases/gethinode/index.md): The landing page and official documentation of the Hinode Theme.
- [Hinode](https://gethinode.com/showcases/classic/index.md): The classic Hinode theme, including a sample blog in multiple languages.
- [Squadra](https://gethinode.com/showcases/squadra/index.md): A custom design with 500+ pages migrated from multiple domains.

## Component Reference

- [Component Reference](https://gethinode.com/llms-components.json): Machine-readable JSON schema for all shortcodes and content blocks, including argument definitions, types, defaults, and descriptions.