docusaurus/docs/getting-started-site-creati...

---
id: site-creation
title: Creating your site
---

Docusaurus was created to hopefully make it super simple for you to create a site and documentation for your open source project.

After [installation](getting-started-installation.md) and [preparation](getting-started-preparation.md), much of the work to create a basic site for your docs is already complete.

## Site Structure

Your site structure looks like the following:

```bash
root-directory
├── docs
└── website
    ├── blog
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    ├── sidebars.json
    ├── siteConfig.js
    └── static
```

> This assumes that you removed the example `.md` files that were installed with the [initialization](getting-started-installation.md) script.

All of your documentation files should be placed inside the `docs` directory as markdown `.md` files. Any blog posts should be inside the `blog` directory.

> The blog posts must be formatted as `YYYY-MM-DD-your-file-name.md`

## Create Your Basic Site

To create a fully functional site, you only need to do a few steps:

1.  Add your documentation to the `/docs` directory as `.md` files, ensuring you have the proper [header](api-doc-markdown.md#documents) in each file. One example header would be the following, where `id` is the link name (e.g., `docs/intro.html`) and the `title` is the webpage's title.

    ```yaml
    ---
    id: intro
    title: Getting Started
    ---
    My new content here..
    ```

1.  Add zero or more docs to the [`sidebars.json`](guides-navigation.md#adding-docs-to-a-sidebar) file so that your documentation is rendered in a sidebar if you choose them to be.

> If you do not add your documentation to the `sidebars.json` file, the docs will be rendered, but they can only be linked to from other documentation and visited with the known URL.

3.  Modify the `website/siteConfig.js` file to [configure your site](api-site-config.md), following the comments included in the [docs](api-site-config.md) and the `website/siteConfig.js` to guide you.
1.  Create any [custom pages](guides-custom-pages.md#customizing-your-site-footer) and/or [customize](guides-custom-pages.md#customizing-your-site-footer) the `website/core/Footer.js` file that provides the footer for your site.
1.  Place assets, such as images, in the `website/static/` directory.
1.  Run the site to see the results of your changes.

```bash
cd website
yarn run start # or `npm run start`
# Navigate to http://localhost:3000
```

## Special Customization

### Docs Landing Page

If you prefer to have your landing page be straight to your documentation, you can do this through a redirect.

1.  Remove the `index.js` file from the `website/pages` directory, if it exists.
1.  Add a [custom static `index.html` page](guides-custom-pages.md#adding-static-pages) in the `website/static` directory with the following contents:

```html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="refresh"
      content="0; url=docs/id-of-doc-to-land-on.html"
    />
    <script type="text/javascript">
      window.location.href = 'docs/id-of-doc-to-land-on.html';
    </script>
    <title>Your Site Title Here</title>
  </head>
  <body>
    If you are not redirected automatically, follow this
    <a href="docs/id-of-doc-to-land-on.html">link</a>.
  </body>
</html>
```

> You will get the `id` of the document to land on the `.md` metadata of that doc page.

### Blog Only

You can also use Docusaurus to host your [blog only](guides-blog.md#i-want-to-run-in-blog-only-mode).
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00			`---`
			`id: site-creation`
			`title: Creating your site`
			`---`

Update site creation docs (#204) 2017-11-01 12:48:28 -04:00			`Docusaurus was created to hopefully make it super simple for you to create a site and documentation for your open source project.`
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
Update links in site creation doc 2017-08-15 17:17:30 -04:00			`After [installation](getting-started-installation.md) and [preparation](getting-started-preparation.md), much of the work to create a basic site for your docs is already complete.`
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
			`## Site Structure`

Update site creation docs (#204) 2017-11-01 12:48:28 -04:00			`Your site structure looks like the following:`

			```bash
Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			`root-directory`
Update site creation docs (#204) 2017-11-01 12:48:28 -04:00			`├── docs`
Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			`└── website`
			`├── blog`
			`├── core`
			`│ └── Footer.js`
			`├── package.json`
			`├── pages`
			`├── sidebars.json`
			`├── siteConfig.js`
			`└── static`
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00			```

Update site creation docs (#204) 2017-11-01 12:48:28 -04:00			> This assumes that you removed the example `.md` files that were installed with the [initialization](getting-started-installation.md) script.

Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			All of your documentation files should be placed inside the `docs` directory as markdown `.md` files. Any blog posts should be inside the `blog` directory.
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
Fix typo and formatting in docs (#523) 2018-04-04 00:51:51 -04:00			> The blog posts must be formatted as `YYYY-MM-DD-your-file-name.md`
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
			`## Create Your Basic Site`

			`To create a fully functional site, you only need to do a few steps:`

docs(v1): remove exclusive language (#1961) * Initial commit to replace easy, easily, simple, just, of course * Revert ordered list change 2019-11-11 17:06:54 -05:00			1. Add your documentation to the `/docs` directory as `.md` files, ensuring you have the proper [header](api-doc-markdown.md#documents) in each file. One example header would be the following, where `id` is the link name (e.g., `docs/intro.html`) and the `title` is the webpage's title.
Update navigation and sidebar docs (#216) 2017-11-09 14:12:45 -05:00
Use proper syntax highlighting for code blocks (#615) * Better syntax highlighting * Better syntax highlighting 2018-04-28 01:51:38 -04:00			```yaml
Update navigation and sidebar docs (#216) 2017-11-09 14:12:45 -05:00			`---`
			`id: intro`
			`title: Getting Started`
			`---`
Use proper syntax highlighting for code blocks (#615) * Better syntax highlighting * Better syntax highlighting 2018-04-28 01:51:38 -04:00			`My new content here..`
Update navigation and sidebar docs (#216) 2017-11-09 14:12:45 -05:00			```

docs: fix typo for `docs` folder (#1484) * docs: fix typo for `docs` folder * docs: request change for #1484 * Update api-doc-markdown.md 2019-05-17 13:26:55 -04:00			1. Add zero or more docs to the [`sidebars.json`](guides-navigation.md#adding-docs-to-a-sidebar) file so that your documentation is rendered in a sidebar if you choose them to be.
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			> If you do not add your documentation to the `sidebars.json` file, the docs will be rendered, but they can only be linked to from other documentation and visited with the known URL.
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			3. Modify the `website/siteConfig.js` file to [configure your site](api-site-config.md), following the comments included in the [docs](api-site-config.md) and the `website/siteConfig.js` to guide you.
			1. Create any [custom pages](guides-custom-pages.md#customizing-your-site-footer) and/or [customize](guides-custom-pages.md#customizing-your-site-footer) the `website/core/Footer.js` file that provides the footer for your site.
			1. Place assets, such as images, in the `website/static/` directory.
			`1. Run the site to see the results of your changes.`
Creating a site basics (#48) 2017-08-08 14:45:57 -04:00
Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			```bash
			`cd website`
			yarn run start # or `npm run start`
			`# Navigate to http://localhost:3000`
			```
Add docs for docs-based landing page Fixes #459 2018-04-23 18:31:10 -04:00
			`## Special Customization`

			`### Docs Landing Page`

			`If you prefer to have your landing page be straight to your documentation, you can do this through a redirect.`

Reformat, proofread and tidy up docs (#749) 2018-06-10 11:02:04 -04:00			1. Remove the `index.js` file from the `website/pages` directory, if it exists.
			1. Add a [custom static `index.html` page](guides-custom-pages.md#adding-static-pages) in the `website/static` directory with the following contents:
Add docs for docs-based landing page Fixes #459 2018-04-23 18:31:10 -04:00
			```html
misc: add command to run prettier on docs (#2102) * misc: add command to run prettier on docs * Fix GH issue template * Fix tests * Add prettier-docs command to precommit 2019-12-08 00:56:30 -05:00			`<!DOCTYPE html>`
Add docs for docs-based landing page Fixes #459 2018-04-23 18:31:10 -04:00			`<html lang="en-US">`
Use proper syntax highlighting for code blocks (#615) * Better syntax highlighting * Better syntax highlighting 2018-04-28 01:51:38 -04:00			`<head>`
misc: add command to run prettier on docs (#2102) * misc: add command to run prettier on docs * Fix GH issue template * Fix tests * Add prettier-docs command to precommit 2019-12-08 00:56:30 -05:00			`<meta charset="UTF-8" />`
			`<meta`
			`http-equiv="refresh"`
			`content="0; url=docs/id-of-doc-to-land-on.html"`
			`/>`
Use proper syntax highlighting for code blocks (#615) * Better syntax highlighting * Better syntax highlighting 2018-04-28 01:51:38 -04:00			`<script type="text/javascript">`
			`window.location.href = 'docs/id-of-doc-to-land-on.html';`
			`</script>`
			`<title>Your Site Title Here</title>`
			`</head>`
			`<body>`
misc: add command to run prettier on docs (#2102) * misc: add command to run prettier on docs * Fix GH issue template * Fix tests * Add prettier-docs command to precommit 2019-12-08 00:56:30 -05:00			`If you are not redirected automatically, follow this`
			`<a href="docs/id-of-doc-to-land-on.html">link</a>.`
Use proper syntax highlighting for code blocks (#615) * Better syntax highlighting * Better syntax highlighting 2018-04-28 01:51:38 -04:00			`</body>`
Add docs for docs-based landing page Fixes #459 2018-04-23 18:31:10 -04:00			`</html>`
			```

			> You will get the `id` of the document to land on the `.md` metadata of that doc page.

			`### Blog Only`

			`You can also use Docusaurus to host your [blog only](guides-blog.md#i-want-to-run-in-blog-only-mode).`