Version: 2.0.0-alpha.43

Creating Pages

In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages like a showcase page, playground page or support page.

Adding a new page

In the /src/pages/ directory, create a file called hello.js with the following contents:

import React from 'react';
import Layout from '@theme/Layout';
function Hello() {
return (
<Layout title="Hello">
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50vh',
fontSize: '20px',
Edit <code>pages/hello.js</code> and save to reload.
export default Hello;

Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/hello, you will see the new page you just created.

Each page doesn't come with any styling. You will need to import the Layout component from @theme/Layout and wrap your contents within that component if you want the navbar and/or footer to appear.


If you are familiar with other static site generators like Jekyll and Next, this routing approach will feel familiar to you. Any JavaScript file you create under /src/pages/ directory will be automatically converted to a website page, following the /src/pages/ directory hierarchy. For example:

  • /src/pages/index.js<baseUrl>
  • /src/pages/foo.js<baseUrl>/foo
  • /src/pages/foo/test.js<baseUrl>/foo/test
  • /src/pages/foo/index.js<baseUrl>/foo/

In this component-based development era, it is encouraged to co-locate your styling, markup and behavior together into components. Each page is a component, and if you need to customize your page design with your own styles, we recommend co-locating your styles with the page component in its own directory. For example, to create a "Support" page, you could do one of the following:

  • Add a /src/pages/support.js file
  • Create a /src/pages/support/ directory and a /src/pages/support/index.js file.

The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For e.g. a CSS module file (styles.module.css) with styles meant to only be used on the "Support" page. Note: this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (support/index.js).

├── src
│ └── pages
│ ├── styles.module.css
│ ├── index.js
│ └── support
│ ├── index.js
│ └── styles.module.css

Using React

React is used as the UI library to create pages. Every page component should export a React component and you can leverage on the expressiveness of React to build rich and interactive content.

Last updated on by Yangshun Tay