docusaurus/docs/getting-started-preparation.md
2017-11-01 09:48:14 -07:00

2.8 KiB

id title
site-preparation Site Preparation

After installing Docusaurus, you now have a skeleton to work from for your specific website. With a few changes, you can verify that Docusaurus was installed correctly by running the site locally.

Directory Structure

As shown after you installed Docusaurus, the initialization script created a directory structure similar to:

root-of-repo
├── docs-examples-from-docusaurus
│   └── doc1.md
│   └── doc2.md
│   └── doc3.md
│   └── exampledoc4.md
│   └── exampledoc5.md
└── website
│   └── blog-examples-from-docusaurus
│       └── 2016-03-11-blog-post.md
│       └── 2017-04-10-blog-post-two.md
│   └── core
│       └── Footer.js
│   └── node_modules
│   └── package.json
│   └── pages
│   └── sidebars.json
│   └── siteConfig.js
│   └── static
  • The website/core/Footer.js file is a React component that acts as the footer for the site generated by Docusaurus and should be customized by the user.
  • The website/blog-examples-from-docusaurus folder contains examples of blog posts written in markdown.
  • The docs-examples-from-docusaurus folder contains example documentation files written in markdown.
  • The website/pages folder contains example top-level pages for the site.
  • The website/static folder contains static assets used by the example site.
  • The website/siteConfig.js file is the main configuration file used by Docusaurus.

You will need to keep the website/siteConfig.js and website/core/Footer.js files, but may edit them as you wish.

You should keep the website/pages and website/static folders, but may change the content inside them as you wish. At the bare minimum you should have an en/index.js or en/index.html file inside website/pages and an image to use as your header icon inside website/static.

The website/blog-examples-from-docusaurus and docs-examples-from-docusaurus folders contain example blog and document markdown files. As shown below when you verify that the example site runs correctly, if you wish to run Docusaurus with these files, you need to rename the folders to website/blog and docs, respectively.

Verifying Installation

Running the Docusaurus initialization script, docusaurus-init, produces a runnable, example website to base your site upon.

  1. In your root, rename docs-examples-from-docusaurus to docs.
  2. cd website
  3. Rename blog-examples-from-docusaurus to blog.
  4. Run the local webserver via yarn run start or npm run start.
  5. Load the example site at http://localhost:3000. You should see the example site loaded in your web browser.