Skip to main content

Creating content

Before we can actually start adding documents, start with creating a new branch for yourself from the Github Repository. Now, after locally fetching your newly created branch, open your terminal and type npm install. After installing, you can use npm run start to locally start the website.

Documents#

Documents are groups of pages connected through a sidebar and previous/next navigation.

Create your first Doc#

Create a new markdown file in the docs folder choosing an appropriate category:

docs/eva-new-stuff/hello.md
# Hello
This is my **first Developer Hub document**!

Now commit your changes. As soon as your commit is pushed to master the new document will become available at http://dev.newblack.io/dev-docs/docs/hello.

Configure the Sidebar#

The EVA Developer Hub runs on Docusaurus. Upon creation of a new document, Docusaurus automatically creates a sidebar from the docs folder and its sub-folders.

You can manage the order of your documentation using a file name prefix. So for example: 01-intro.md and 02-getting-started.md.

You can add metadata to your markdown file 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
module.exports = {  tutorialSidebar: [    {      type: 'category',      label: 'Tutorial',-     items: [...],+     items: ['hello'],    },  ],};

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 new markdown file file at blog/2021-02-28-greetings.md:

blog/2021-02-28-greetings.md
---slug: greetingstitle: Greetings!author: Steven Hanselauthor_title: Docusaurus Contributorauthor_url: https://github.com/ShinteiMaiauthor_image_url: https://github.com/ShinteiMai.pngtags: [greetings]---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.

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

Create a custom 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 dev.newblack.io/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 dev.newblack.io/my-markdown-page.

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.

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).