Build complete website with Docusaurus
Tags: javascript, webdev, tutorial, react
Published: 2022-10-22 15:40:27

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.

![Docusaurus UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ymums73ggx3ijjvyb42.png)

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.