Pular para o conteúdo principal

Create a Page

Add Markdown or React files to src/pages to create a standalone page:

  • src/pages/index.js → localhost:3000/
  • src/pages/foo.md → localhost:3000/foo
  • src/pages/foo/bar.js → localhost:3000/foo/bar

Create your first React Page​

Create a file at src/pages/my-react-page.js:

src/pages/my-react-page.js
import React from 'react';
import Layout from '@theme/Layout';

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

A new page is now available at http://localhost:3000/my-react-page.

Create your first Markdown Page​

Create a file at src/pages/my-markdown-page.md:

src/pages/my-markdown-page.md
# My Markdown page

This is a Markdown page

A new page is now available at http://localhost:3000/my-markdown-page.

Congratulations!​

You have just learned the basics of Docusaurus and made some changes to the initial template.

Docusaurus has much more to offer!

Anything unclear or buggy in this tutorial? Please report it!

What's next?​

Deploy your site

Docusaurus is a static-site-generator (also called Jamstack).

It builds your site as simple static HTML, JavaScript and CSS files.

Build your site​

Build your site for production:

npm run build

The static files are generated in the build folder.

Deploy your site​

Test your production build locally:

npm run serve

The build folder is now served at http://localhost:3000/.

You can now deploy the build folder almost anywhere easily, for free or very small cost (read the Deployment Guide).

  // Even if you don't use internationalization, you can use this field to set
  // useful metadata like html lang. For example, if your site is Chinese, you
  // may want to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: "pt-BR",
    locales: ["pt-BR"],
  },

Create a Document​

Documents are groups of pages connected through:

  • a sidebar
  • previous/next navigation
  • versioning

Create your first Doc​

Create a Markdown file at docs/hello.md:

docs/hello.md
### Hello

This is my **first Docusaurus document**!

A new document is now available at http://localhost:3000/docs/hello.

Configure the Sidebar​

Docusaurus automatically creates a sidebar from the docs folder.

Add metadata to customize the sidebar label and position:

docs/hello.md
---
sidebar_label: 'Hi!'
sidebar_position: 3
---

### Hello

This is my **first Docusaurus document**!

It is also possible to create your sidebar explicitly in sidebars.js:

sidebars.js
export default {
  tutorialSidebar: [
    'intro',
    'hello',
    {
      type: 'category',
      label: 'Tutorial',
      items: ['tutorial-basics/create-a-document'],
    },
  ],
};

Create a Blog Post​

Docusaurus creates a page for each blog post, but also a blog index page, a tag system, an RSS feed...

Create your first Post​

Create a file at blog/2021-02-28-greetings.md:

blog/2021-02-28-greetings.md
---
slug: greetings
title: Greetings!
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [greetings]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.

A new blog post is now available at http://localhost:3000/blog/greetings.