Create and edit the Docusaurus website (With Blog feature)

Docusaurus is a static web site generator that is quickly becoming more well-known among developers.

In this blog post is a comprehensive into the advantages of making use of Docusaurs for your static website generator, and the reasons Docusaurs is now a top choice for the designers.

What's Docusaurus?

What sets Docusaurus distinct, however is the fact that it can help you build and maintain the site . It lets you quickly and efficiently build a fully-fledged site -- including blog functions that show the posts you publish immediately.

These are only a few aspects that make Docusaurus an excellent choice:

• Constructed with React
• Support for MDX version 1
• Support for React component embedding via Markdown
• Document versioning
• Compatibility With Git, Crowdin, and other management systems for document translation , as well as large or one-time deployment

Who are the users of Docusaurus?

Below are a handful of the most prominent brands use Docusaurus in the present (with coming more as Docusaurus's popularity grows):

•       Algolia DocSearch
•       Jest
•       React Native
•       Supabase

More and more become part of their ranks on every day basis.

How To Install Docusaurus

Docusaurus is easy to install  It requires a few minutes. In this tutorial, we'll build documentation sites with a blog in addition to changing the look of the website looks.

Here's the best part We'll need less than an hour to turn everything on.

Let's take a dive!

Requirements

Also, we'll use Docusaurus's example site that is available on Docusaurus's GitHub repository. You can use it, or even a new installation of Docusaurus to complete this lesson.

Installation Process

To begin the Docusaurus setup process, you must first to follow the instructions below:

npx [email protected] classic

The theme will create a folder that you can make use of to create your site and will also build a scaffold for the conventional theme inside it. The theme classic already has various pre-configured functions including the blog feature, customized pages as well as an integrated CSS framework.

Once you have installed the server, you'll have to execute this command to launch local server:

NPM start

If you are looking to create an optimized version that is suitable for deployment, you should run this instead

npm run build

Structure

When you've successfully installed your Docusaurus instance after which you'll be able access your project directory to examine the "skeleton" that will be your web-based site.

This is how the structure of the files is:

my-website +-- blog | +-- 2019-05-28-hola.md | +-- 2020-05-30-welcome.md +-- docs | +-- doc1.md | +-- mdx.md +-- src | +-- css | | +-- custom.css | +-- pages | +-- styles.module.css | +-- index.js +-- static | +-- img +-- docusaurus.config.js +-- package.json +-- README.md +-- sidebars.js +-- yarn.lock

A few points to note in relation to a number of these files and folders:

• blog: Contains all blogs related file. blog.
• Docs: Contains all the documents that are related to your docs. You can customize the order in your sidebar.js file.
• /src: Contains all other non-documentation documents like pages and modified components.
• /src/pages: All the MDX/JSX/TSX/JSX/JSX files will be converted into pages.
• static: Static files that will be moved into the build folder.
• docusaurus.config.js: Docusaurus configuration file.
• packaged.json: Every Docusaurus site is created in the form of an React application, and there are all dependencies and scripts used by React.
• sidebar.js: This is where you specify the order of documents in the sidebar.

Customizing Your Docusaurus Installation

Let's go over the options of customization that are available right starting from the very beginning.

Home Page

The first thing you're most likely to be tempted to do is customize the homepage default to ensure that it displays your own personal work. It's not difficult to change any settings you'd like in Docusaurus' homepage. Docusaurus homepage.

Configuration File

We'll then dive into the crucial docusaurus.config.js file and modify some crucial details to our specific instance.

Name and Description

Within the configuration file you'll discover:

const config = { title: 'My Site', tagline: 'Dinosaurs are cool', url: 'https://your-docusaurus-site.com', baseUrl: '/',

Change these data according to the needs of your site. Then, save the document.

Navigation Bar

To modify your navigation bar, find the menu bar item.

For our example here for this example, we would like to include an option to link to a different page, changing the title for"Tutorial," change the name of "Tutorial" item to "Starter documentation," along with adding a logo.

This is how we'd do this:

navbar: title: ' starters', logo: alt: ' Logo', src: 'img/-logo-alpha-purple.png', , items: [ label: ' starters', to: '/docs/intro', , to: '/blog', label: 'Blog', position: 'left', href: 'https://github.com/', label: 'GitHub', position: 'right', , ], ,

Footer

The customization option for the footer in Docusaurus is made up of two sections that are the contents of the footer and the hyperlinks in the footer.

Footer Content

A majority of the content in your footer (not without links lists) is likely to be contained in your themeConfig.footer file. This is the ideal spot to incorporate a logo as well as an informational notice about copyright.

This is how we've changed our footer's layout:

module.exports = themeConfig: footer: The, the, ,;

Footer Links

The changes to the footer's links are similar to altering the top navigation bar: Find this footer area within docusaurus.config.js and edit to ensure it is in line with the requirements of your site.

Here's what we've changed the appearance of our footer section to to look like:

footer: style: 'dark', links: [ title: 'Docs', items: [ label: ' starters', to: '/docs/intro', , ], , title: 'Talk with us', items: [ label: 'Discord', href: 'https://discord.gg/vjRPMhFaBA', , label: 'Support', href: 'https://.com/-support/', , label: 'Twitter', href: 'https://twitter.com/', , ], , title: 'More', items: [ label: 'Application Hosting', href: 'https://.com/application-hosting/', , label: 'Database Hosting', href: 'https://.com/database-hosting/', , label: 'WordPress Hosting', href: 'https://.com/wordpress-hosting/', , label: 'Dev', href: 'https://.com/dev/', , ], , ], ;

CSS and other colors

The default for classic style within Docusaurus makes use of an Infima CSS Framework. With this in mind, Docusaurus creators created an highly useful tool available online that lets you alter the color scheme and also different CSS elements and declarations.

Once you've finished your selections in the form, it'll create a custom.css file -which includes a gorgeous variety of tones that complement each other- in a matter of seconds. You can then copy this fresh CSS file to the project's "/src/css" directory and use it as a use as a source.

Documentation

Everything you need to know about your website will be placed in documents. document folder. Of course, you can change the folder name in docusaurus.config.js.

---ID: the-idtitle"title"# The remainder of the document

Based on the ID, Docusaurus builds the URLs for the articles in that subfolder: yourdomain.com/docs/id

You can also make subfolders that separate our documents into distinct, logical parts. But, we'll have perform a bit of extra work in order for them to function in as we'd like.

Let's suppose we create a brand new document folder which is named "Starters." If we wish to refresh the homepage by clicking on the newly created "Starters" hyperlink automatically on our sidebar , we'll receive an error message -- since there is an index page that is not yet present inside the folder we've set up.

The most effective way to fix the issue is to create the _category_.json file that provides an index for each page in this folder. All you have to do is add the following code:

 "label": "Starters", "position": 2, "link": "type": "generated-index", "description": "All Starters" , ;

You can observe that the sidebar changes to fit the structure of your files. This is because the sidebar.js is a file that contains this tutorialSidebar: [ype autogenerated', dirName:. '],

If you'd rather take charge of this , you could modify this into something like this:

tutorialSidebar: [ 'intro', 'hello', type: 'category', label: 'Tutorial', items: ['tutorial-basics/create-a-document'], , ],

Blog

Docusaurus offers a basic blog module. Blogs together with your main site could be extremely useful for letting your visitors know on the latest developments in the project or to create project notes to use as an example for a change log.

Each post is made up of a frontmatter component such as:

--- slug: docusaurus-starter title: Docusaurus Starter authors: palmiak tags: [starters, docusaurus] ---

...and, of course, the actual content. Additionally, it has a very useful

This post was first seen on here