Build complete website with Docusaurus

In this post, we'll look at how to build an end to end product website including landing page(s), docs pages and blogs using Docusaurus.

Installing Docusaurus

For building a Docusaurus website we have to install it first with a starter website skeleton. Run the below command:

npx create-docusaurus@latest my-website classic

After the successful installation you will get the basic website which you can run right away and start customizing it according to you needs.

Seeing website in development server

To run the development server go to the root directory of the project and run the the following command.

npm start

After starting the development server you will can see your site on http://localhost:3000/. It will look something like the following image.

This boiler plate we get after installing the Docusaurus have the following folder structure

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

Here we can see different directories which contain different files. Let us discuss about all those things.
On first we have the blog directory. It contains the Markdown files of the blogs you want to show in the website.
The docs directory contains the docs of the website.
In src you have CSS files and your pages directory which have your landing page of the website and here you can add other custom pages to according to your requirements.
In static directory we have our assets like images and company logo.

Customizing Home Page

src/pages/index.js is the homepage for the website. It exports a React component that is rendered between navbar and footer. we will also see how to customise navbar and footer later.

The boiler plate code of the home page is :

import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';

import styles from './index.module.css';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro">
            Docusaurus Tutorial - 5min ⏱️
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

you can edit here like you would edit a normal react component and it will change in the website.

Customizing Navbar

In the docusaurus.config.js we have themeConfig object where we can customize our Navbar and Footer.

For navbar customization, we can do it in this object

 navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],

Here in title you can give title on the website. In logo you can add the company's logo. In items you can have the the links of different pages or different sections.
The key position in item object decides the position of that item in the navbar.

Customizing the footer

footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },

In links object each object is a column in the footer which contains links.

Creating a new page

To create a new page for your website you can add it in src/pages directory.

├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
│       └── new-page.js

Here as we added new-page.js it became a route itself.
you can navigate to /new-page in the browser to see.

Conclusion

In this post we saw how to setup a custom website with Docusaurus and also learnt how to customize the navbar, footer etc.

Blog