Extend Docusaurus layouts using React
Docusaurus is powered by React, allowing developers to extend or customize the website layout. You can create custom components or pages while maintaining the existing global header and footer.
Docusaurus Documentation
website·Indexed 29 days ago
https://statuesque-centaur-3dbfb8.netlify.app/A static-site generator (Jamstack) designed for quickly setting up websites. It features built-in support for Markdown and React pages, documentation versioning, i18n translation, and a blogging system with tags and RSS feeds.
What's inside Docusaurus
Add syntax-highlighted code blocks with titles
Docusaurus supports Markdown code blocks with syntax highlighting. You can optionally add a title to the code block to indicate the filename or path.```jsx title="src/components/HelloDocusaurus.js" function HelloDocusaurus() { return <h1>Hello, Docusaurus!</h1>; }Create standalone pages using React or Markdown
To create a standalone page, add a Markdown (.md) or React (.js) file to the
src/pagesdirectory. The file system path determines the URL route. For example:src/pages/index.jsmaps to/src/pages/foo.mdmaps to/foosrc/pages/foo/bar.jsmaps to/foo/bar
Create interactive blog posts using MDX in Docusaurus
Docusaurus blog posts support MDX, which allows the use of React components and JSX directly within Markdown files. This enables the creation of interactive elements, such as buttons with event handlers, inside blog content.<button onClick={() => alert('button clicked!')}>Click me!</button>Generate a new Docusaurus site using the classic template
You can create a new Docusaurus project using the classic template by running thenpm initcommand. This process automatically adds the template to your project and installs all necessary dependencies.npm init docusaurus@latest my-website classicTest a Docusaurus production build locally
Before deploying to a live server, you can test the contents of thebuildfolder locally. Running the serve command will host the static files at http://localhost:3000/.npm run serveCreate callouts using Admonitions
Docusaurus provides a special syntax for creating admonitions (callouts) such as tips and danger warnings using the:::type[Title]syntax.:::tip[My tip] Use this awesome feature option ::: :::danger[Take care] This action is dangerous :::Limit blog post length in list views using truncate comments
To limit the amount of content displayed for a blog post in the list view, insert a<!-- truncate -->HTML comment within the post content. Content appearing after this comment will be hidden in the list view and only visible on the full post page.This text will appear in the blog list view. <!-- truncate --> This text will only appear on the full blog post page.Create a new document in Docusaurus
Documents in Docusaurus are groups of pages connected via sidebars, previous/next navigation, and versioning. To create a new document, create a Markdown file within thedocs/directory. For example, creatingdocs/hello.mdwill make the document available at/docs/hello.# Hello This is my **first Docusaurus document**!Embed images in Docusaurus Markdown
Images can be embedded using absolute paths referencing thestaticdirectory or relative paths to colocate images with Markdown files. Start the Docusaurus development server
After generating your site, navigate into the project directory and run the start script. This builds the website locally and serves it at http://localhost:3000/. The server supports hot-reloading, meaning changes made to files (such asdocs/intro.md) will be displayed automatically.cd my-website npm run startCreate a new documentation version in Docusaurus
Docusaurus allows you to snapshot your current documentation into a specific version. Running the versioning command copies the contents of the
docsfolder into a new directory underversioned_docs/and updates theversions.jsonfile.After creating a version (e.g., '1.0'), the site will host two sets of docs:
- The versioned docs (e.g.,
1.0) at/docs/. - The current, unreleased development docs at
/docs/next/.
npm run docusaurus docs:version 1.0- The versioned docs (e.g.,