Develop a Docusaurus Template

Preparing a local development workspace is necessary to quickly preview your customizations.

Important: Heretto CCMS integrates with the Docusaurus v2 framework that is still in development. The available templates (the look and feel of your site) may be modified without notice.
Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
  1. Customize the look and feel of the Docusaurus publishes by doing any of the following:
    1. To change the site logo, see Customize the Docusaurus Site Logo.
    2. To change the site favicon, see Customize the Docusaurus Site Favicon.
    3. To customize the site footer, see Customize the Docusaurus Site Footer.
    4. To customize the site styling, see Customize the Docusaurus Site Styling.
    Tip: The “Jorsek Template” is based on the “classic” Docusaurus template.
    For more information about Docusaurus customizations, see:
  2. To add a search functionality, see Add Algolia Search to Docusaurus Sites or Add Offline Search to Docusaurus Sites.
  3. To quickly modify the content that shows in the Docusaurus preview, see Locally Modify Docusaurus Content.
    Tip: Locally modifying content is useful if you want to troubleshoot your template.
  4. Create a Git repository for the template files.
Create a Docusaurus publishing scenario and associate the scenario with your template on a Git repository. See Create a Docusaurus Scenario.

Prepare a Local Docusaurus Development Workspace

You need to set up a local development environment to customize the look and feel of your Docusaurus static sites.

Install the required tools for local Docusaurus development. For more information, see Docusaurus Docs: Requirements.
Note: This procedure assumes that you use Yarn as your package manager. While it's possible to use NPM as well, the Docusaurus documentation recommends using Yarn.
Prepare Docusaurus project files for local development
  1. In the CCMS, publish a static site by using a Docusaurus scenario. see Publish Content with Docusaurus.
  2. Download the full_project.zip key asset.
    Key Assets menu
  3. Unzip the downloaded archive.
  4. Navigate to the unzipped folder and unzip the full_project.zip file.
Initialize a local Docusaurus development environment
  1. In the terminal, navigate to the unzipped full_project folder by entering cd publish_filepath
    Where, publish_filepath is the path to the build folder.
    Enter:
    • cd C:\users\your_username\Downloads\publish_name\full_project (Windows)
    • cd /Users/your_username/Downloads/publish_name/full_project (macOS)
    Where:
    • your_username is the name of the account that you are currently logged on your workstation
    • publish_name is the name of the folder that contains the published static site
  2. Enter yarn add docusaurus
  3. Enter yarn run start
The site preview (http://localhost:3000) opens in your web browser.

Customize the Docusaurus Site Logo

You can change the default logo by overwriting the logo.svg file or by specifying the path to a logo in a different format.

Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
  1. If you have an SVG logo, replace the full_project/static/img/logo.svg file with your own logo.svg file.
    Where full_project is the location of your local Docusaurus project.
  2. If you have a logo in a different format than SVG (for example, PNG):
    1. Paste your logo to the following folder full_project/static/img/custom_logo
      Where:
      full_project
      is the location of your local Docusaurus project
      custom_logo
      is the name and extension of your logo file (for example, logo.png)
    2. In the full_project/docusaurus.config.js file, replace src: 'img/logo.svg' with the path to your logo.
          navbar: {
            title: 'My Site',
            logo: {
              alt: 'My Site Logo',
              src: 'img/logo.png',
            },
    3. Save the docusaurus.config.js file.
Apply other customizations or proceed with the theme deployment. See Develop a Docusaurus Template.

Customize the Docusaurus Site Favicon

You can change the default favicon by overwriting the favicon.ico file or by specifying the path to a favicon in a different format.

Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
  1. If you have an ICO favicon, replace the full_project/static/img/favicon.ico file with your own favicon.ico file.
    Where full_project is the location of your local Docusaurus project.
  2. If you have a favicon in a different format than ICO (for example, SVG):
    1. Paste your favicon to the following folder full_project/static/img/custom_favicon
      Where:
      full_project
      is the location of your local Docusaurus project
      custom_favicon
      is the name and extension of your favicon file (for example, favicon.svg)
    2. In the full_project/docusaurus.config.js file, replace favicon: 'img/favicon.ico' with the path to your favicon.
      favicon: 'img/favicon.svg'
    3. Save the docusaurus.config.js file.
Apply other customizations or proceed with the theme deployment. See Develop a Docusaurus Template.

Customize the Docusaurus Site Footer

You can customize the default footer by editing the docusaurus.config.js file.

Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
  1. In the full_project/docusaurus.config.js file, edit the following code:
    Where full_project is the location of your local Docusaurus project.
        footer: {
          style: 'dark',
          links: [],
          copyright: `Copyright © ${new Date().getFullYear()} Heretto, Inc. Built with Docusaurus.`,
        },
    Figure 1. Default Footer
    Default footer screenshot
        footer: {
          style: 'light', //Color scheme. Can take the following values: 'dark' or 'light'
          logo: { //A logo that displays at the bottom of the footer
            alt: 'logo',
            src: 'img/logo.svg',
            href: '#home',
          },
          links: [
            {
              title: 'Company Name, Inc.', //Column title
              items: [
                { //Embedded HTML
                  html: `
                  <p>3345 Wilson Street <br/>
                  Suite 404 <br/>
                  Palm Springs, California <br/>
                  Toll Free: 1-234-557-1122</p>
                  `,
                },
              ],
            },
            {
              title: 'Related Information', //Column title
              items: [
                {
                  label: 'Home Page', //Link text
                  href: '#home', //Link target
                },
                {
                  label: 'About',
                  href: '#about',
                },
                {
                  label: 'FAQ',
                  href: '#faq',
                },
                {
                  label: 'Support',
                  href: '#support',
                },
              ],
            },
            {
              title: 'Community', //Column title
              items: [
                {
                  label: 'Blog',
                  href: '#blog',
                },
                {
                  label: 'Slack',
                  href: '#slack',
                },
              ],
            },
          ],
          copyright: `Copyright © ${new Date().getFullYear()} Company Name, Inc. Website Built with Docusaurus.`, //The text visible at the bottom of the footer
        },
    Figure 2. Custom Footer Example
  2. Save the docusaurus.config.js file.
Apply other customizations or proceed with the theme deployment. See Develop a Docusaurus Template.

Customize the Docusaurus Site Styling

You can adjust the default site styling by adding your customizations to the custom.css file.

Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
  1. Apply customizations by editing the full_project/src/css/custom.css file.
    Where full_project is the location of your local Docusaurus project.
    Tip: The code in the custom.css impacts the entire site. To restrict your customizations to the central content area, make sure that you select the div.markdown container first.

    For more information, see https://v2.docusaurus.io/docs/styling-layout/.

    /* stylelint-disable docusaurus/copyright-header */
    /**
     * Any CSS included here will be global. The classic template
     * bundles Infima by default. Infima is a CSS framework designed to
     * work well for content-centric websites.
     */
    /* You can override the default Infima variables here. */
    :root {
        --ifm-color-primary: #25c2a0;
        --ifm-color-primary-dark: rgb(33, 175, 144);
        --ifm-color-primary-darker: rgb(31, 165, 136);
        --ifm-color-primary-darkest: rgb(26, 136, 112);
        --ifm-color-primary-light: rgb(70, 203, 174);
        --ifm-color-primary-lighter: rgb(102, 212, 189);
        --ifm-color-primary-lightest: rgb(146, 224, 208);
        --ifm-code-font-size: 95%;
    }
    .docusaurus-highlight-code-line {
        background-color: rgb(72, 77, 91);
        display: block;
        margin: 0 calc(-1 * var(--ifm-pre-padding));
        padding: 0 var(--ifm-pre-padding);
    }
    table {
        width: 100%;
    }
    div.markdown li > p {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    /****** CUSTOMIZATIONS */
    
    /*** Global Typography - START*/
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    * {
        font-family: 'Roboto', sans-serif;
        font-size: 0.9rem;
        color: #404040;
    }
    /*** Global Typography - END*/
    
    /*** Content Headers - START */
    /* Colors */
    div.markdown > h1,
    div.markdown > h2,
    div.markdown > h3,
    div.markdown > h4,
    div.markdown > h5,
    div.markdown > h6 {
        color: darkred;
    }
    /* Size */
    div.markdown > h1 {
        font-size: 2.4rem;
    }
    div.markdown > h2 {
        font-size: 2.0rem;
    }
    div.markdown > h3 {
        font-size: 1.6rem;
    }
    div.markdown > h4,
    div.markdown > h5,
    div.markdown > h6 {
        font-size: 1.2rem;
    }
    /*** Content Headers - END */
    Docusaurus style guide screenshot
  2. Save the custom.css file.
Apply other customizations or proceed with the theme deployment. See Develop a Docusaurus Template.

Locally Modify Docusaurus Content

Locally modifying content is useful if you want to troubleshoot your template.

Set up a local development environment. See Prepare a Local Docusaurus Development Workspace.
The full_project/docs folder contains the site content.

The full_project/sidebar.js file contains references to the content files and constitutes the left-hand table of contents.

Where full_project is the location of your local Docusaurus project.

For more information, see https://v2.docusaurus.io/docs/docs-introduction/.
  • To edit content, in the full_project/docs folder, edit the Markdown (MD) files.
    Note: Editing Markdown files IDs may break links on your site.
  • To add content:
    1. In the full_project/docs folder, create a new Markdown file.
    2. At the beginning of the file add the Docusaurus header.
      For more information about Docusaurus headers, see https://v2.docusaurus.io/docs/markdown-features/#markdown-headers.
      ---
      id: "New-File"
      title: "New File"
      hide_title: true
      ---
    3. Below the decoration, add Markdown or HTML5 content.
    4. Save the Markdown file.
    5. In the full_project/sidebar.js file, add the ID of the Markdown file.
      module.exports = {"someSidebar":["Introduction","Getting-Started","Common-Tasks","New-File"]};
    6. Save the JS file.
  • To remove content:
    1. In the full_project/docs folder, remove a Markdown file.
    2. From the full_project/sidebar.js file, remove the ID of the Markdown file.
      module.exports = {"someSidebar":["Introduction","Getting-Started","Common-Tasks","New-File"]};
    3. Save the JS file.