Creative news collection

Create and edit the Docusaurus website (With Blog feature)

Feb 17, 2023
Docusaurus

Docusaurus is a static internet site generator that is quickly getting more popular among web developers.

In this blog post is detailed about the advantages using Docusaurs to create your static site generator, and the reasons Docusaurs is now the top selection for designers.

What's Docusaurus?

What sets Docusaurus different is that it is able to assist you in the creation and maintenance of the site . It lets you quickly and easily create a complete website, including blog functions that show the articles you write immediately.

Just a handful of factors that make Docusaurus a good option:

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

Who are the users of Docusaurus?

Here are some of the top brands that employ Docusaurus at present (with increasing frequency as the popularity of Docusaurus grows):

Everyday, more and more people are members of their ranks on an each day basis.

How To Install Docusaurus

Docusaurus is simple to install. It takes only a couple of minutes. In this tutorial, we'll create documentation websites with blogs, in addition to altering the way the site's appearance.

This is the most exciting part. We'll require less than one hour to start everything up.

Let's take a dive!

Requirements

Also, we'll use Docusaurus's sample site, which is accessible on Docusaurus's GitHub repository. It is possible to use it or even create a brand new version of Docusaurus, to finish this course.

Installation Process

To begin the Docusaurus configuration procedure, it is necessary to follow the instructions listed below:

npx [email protected] classic

The theme creates an area that you could utilize to build your own website. It will create a framework to build a standard theme inside it. The theme classic comes with several pre-configured functions, such as the blog feature, customized pages as well as the integrated CSS framework.

Once you have installed servers, then you'll need follow this procedure to launch local server:

NPM Start

If you want to develop an optimized version appropriate for deployment, then it is recommended to run this instead.

npm run build

Structure

When you've successfully installed your Docusaurus instance, then you'll be able to access your project directory in order to look at the "skeleton" which will become your web-based site.

This is how the format of the files are:

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 regarding a few of these folders and files:

  • blog: Contains all blogs-related files. blog.
  • Docs: Contains all the documents that are related to the docs. You can customize the order by editing your sidebar.js file.
  • /src: Contains all other documents not related to documentation such as pages as well as modified components.
  • pages /src/pages: All the MDX/JSX/TSX/JSX/JSX/JSX/JS to pages.
  • static: Static files that will be moved into the building folder.
  • docusaurus.config.js: Docusaurus configuration file.
  • packaged.json: Every Docusaurus website is built in the form of an React application. In the application are all scripts and dependencies utilized by React.
  • sidebar.js: This is the place where you can specify the ordering of documents in the sidebar.

Customizing Your Docusaurus Installation

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

Home Page

The first thing you're most likely to to alter the default homepage to make sure that the homepage displays your personal work. It's simple to modify the settings you want to see on Docusaurus the homepage. Docusaurus homepage.

Configuration File

Then, we'll dive into the crucial docusaurus.config.js file and change some important details for our specific instance.

Name and Description

Inside the configuration file, there are:

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 website. Then, save the document.

To change the navigation bar of your computer, locate it in the Menu bar item.

To illustrate our scenario here in this instance, we'd want to provide the option of linking to another page. changing the title for"Tutorial," change the name of the "Tutorial" item to "Starter documentation" as well as adding the logo.

We'd like to 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', , ], ,

The option to customize the footer in Docusaurus is made up of two sections which comprise the content of the footer as well as the hyperlinks within the footer.

Footer Content

Most of the information within your footer (not without list of links) will likely be contained in the themeConfig.footer file. It is the perfect place to include a logo and a notice about copyright.

Here's how we've altered our footer's layout:

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

The changes to the links in the footer are comparable as changing the navigation bar at the top. bar: Find this footer area in docusaurus.config.js and edit to ensure that it's line with the requirements of your website.

This is what we've altered the design for our section's footer section so that it looks similar to:

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 different colors

The style that is the default within Docusaurus makes use of an Infima CSS Framework. With this in mind, Docusaurus creators created an extremely useful tool that is available on the internet that lets you alter the scheme of colors and various CSS declarations and elements.

When you're done making your choices within the form, it'll generate an custom.css file -which has a beautiful array of colors that compliment the other in just a couple of minutes. Then, you can copy the freshly created CSS file to the directory of the project's "/src/css" directory and then source.

Docusaurus' custom CSS tool.
A tiny portion of Docusaurus official documentation that outlines their own CSS tool, which gives users the ability of making hex-code changes to each element of the Docusaurus design.

Documentation

All you have to know about your website is stored within documents. document folder. Of course, you can change the folder name in docusaurus.config.js.

---ID: the-idtitle"title"# The remaining portion of the text

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

You can also make subfolders which divide our content into distinct, distinct parts. However, they'll require an additional task in order for them to perform as we'd prefer.

Let's say we set up an entirely new folder for documents that's named "Starters." If we attempt to refresh our homepage using the newly added "Starters" hyperlink automatically on our sidebar , we'll receive an error message -- because there's an index page not yet present inside the new folder.

The best way to resolve the issue is to create an _category_.json file that contains an index to each page in the directory. All you need do is to add the following code:

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

You can observe that the sidebar adapts to the structure of your files. This is due to the fact that sidebar.js can be described as a file that includes this tutorialSidebar"ype autogenerated' dirName:. '],

If you'd prefer to be in charge of this , you can change it to look something like this:

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

Blog

Docusaurus has a blog-based module. Blogs in conjunction with your primary site could be extremely useful for letting your visitors know on the latest developments in the work or creating notes on the project that can be used as an example of an update log.

Each post is composed of a frontmatter component such as:

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

...and, of course, the actual contents. It also has a very useful

This post was first seen here. this site

Article was posted on here