Creative tips and tricks

Create and edit the Docusaurus website (With Blog feature)

Feb 18, 2023
Docusaurus

Docusaurus is an internet static site generator that is quickly increasing in popularity for web-based developers.

In this blog post is in depth about the benefits of using Docusaurs to create your static web site generator as well as the reason why Docusaurs is now the top choice for web designers.

What's Docusaurus?

What makes Docusaurus different is that it is able to aid you in the development and management of your site . You can quickly and easily create a complete website, which includes blog functionality that displays what you wrote in the moment of writing.

Just a handful of factors which can make Docusaurus an excellent choice:

  • Created using React
  • Support of MDX Version 1
  • Support for React component embedding via Markdown
  • Document versioning
  • Compatible With Git, Crowdin, and other systems of management to translate documents as also for one-time or large deployment

Who are the customers of Docusaurus?

Below are a few of the most popular brands using Docusaurus currently (with more frequent use as the increasing popularity of Docusaurus):

Each day, many people join their ranks on a day to day basis.

How to Install Docusaurus

Docusaurus can be installed easily. It's only few minutes. In this tutorial, we'll build blogs and documentation sites, in addition to altering how the design of the site appears.

It's the most exciting aspect. The project will require just one hour to get everything going.

Let's dive!

Requirements

Additionally, we'll utilize Docusaurus's example site, which is available on Docusaurus's GitHub repository. You can use it , or even build a brand new version of Docusaurus for the final part of this class.

Installation Process

In order to begin the Docusaurus setup procedure you must follow the instructions listed below:

npx [email protected] classic

The theme creates an area where you can develop your own web site. It can be used as a base to build the normal template inside of it. The classic theme has several pre-configured functions, including the blog feature and custom pages, as well as the integrated CSS framework.

After you've installed servers, then you'll need follow this procedure to start local servers:

Beginning of NPM

If you want to develop an optimized version suitable for deployment, then it's suggested to use this version instead.

npm run build

Structure

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

The formats 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

There are a few things to consider in relation to a number of these folders and files:

  • blog: Contains all blogs-related files. blog.
  • Docs: Contains all the documents related to the documents. You can customize the order by changing the sidebar.js file.
  • /src: Contains all additional documents, not linked to the documentation, like pages as well as modified components.
  • pages /src/pages: All the MDX/JSX/TSX/JSX/JSX/JSX/JS to pages.
  • static: Static files which will be moved to the build folder.
  • docusaurus.config.js: Docusaurus configuration file.
  • packaged.json: Each Docusaurus website is designed using a React application. The application contains the scripts and dependencies used by React.
  • sidebar.js: This is the location in which you are able to specify the order of documents within the sidebar.

Customizing Your Docusaurus Installation

We will look at the different options of customization that are available right starting with the initial stages.

Home Page

One of the first things you're likely to to alter the default homepage in order to ensure that your homepage shows your own work. It's easy to alter the options you wish to display when you visit Docusaurus home page. Docusaurus homepage.

Configuration File

After that, we'll go through the critical docusaurus.config.js file and change some important details for our particular situation.

Name and Description

In the configuration file you will find:

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

Make changes to these details in accordance with the requirements of your website. Then, save the document.

To change the navigation bar of your PC, search for it under the menu bar section.

To illustrate our scenario here to illustrate our scenario here it would be beneficial to offer the option of linking to a separate page. The title should be changed for"Tutorial," change the title that appears on"Tutorial" item to "Starter documentation. "Tutorial" item to "Starter documentation" and also adding the logo.

It would be nice to accomplish 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 parts that comprise the contents of the footer as well as the hyperlinks within the footer.

Footer Content

Most of the information within your footer (not including a list of hyperlinks) is likely to be found within your themeConfig.footer file. It's the best spot to place the logo as well as a statement regarding copyright.

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

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

Changes to the hyperlinks within the footer can be compared with the change to the navigation bar at the top. Bar: Look for the footer area in docusaurus.config.js and edit to make sure it's in line to the needs of your site.

The way we've changed the style of the footer sections footer section so that it resembles:

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

The style that is the default style within Docusaurus utilizes the Infima CSS Framework. In this regard, Docusaurus creators have created an very useful tool which is accessible on the internet that allows you to change the colors scheme as well as various CSS declarations and elements.

When you're done making your selections in the form, it'll create the custom.css file -which includes a stunning assortment of colors that match the other in just two minutes. After that, transfer the newly created CSS file into the directory of the application's "/src/css" directory and then source.

Docusaurus' custom CSS tool.
A small part from the Docusaurus official documentation that describes their personal CSS tool that lets users use the capability of changing the hex-code of each element of the Docusaurus design.

Documentation

Everything you need to know about your website is stored in documents. documents folder. Of course, you can change the folder name in docusaurus.config.js.

---ID: the-idtitle"title"# The rest of 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. But, they'll need some additional work for them to perform as we'd prefer.

Let's suppose we create a brand-new folder of documents that's named "Starters." If we attempt to refresh our homepage using the newly included "Starters" hyperlink that is automatically displayed on our sidebar , we'll receive an error message -- because there's an index page that's not yet available in the newly created folder.

The most effective way to solve the issue is to create an _category_.json file that has an index to every page of the directory. The only thing you have to do is to insert the following code:

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

The sidebar changes to fit the format of your file structure. This is because of the reality that sidebar.js could be defined as a file that contains tutorialSidebar. tutorialSidebar"ype autogenerated' dirName:. '],

If you'd prefer to have this responsibility  then you could alter it to look something like this:

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

Blog

Docusaurus includes a blog module. Blogs on your main website could prove beneficial in letting customers know of the latest developments in the work or creating notes on the work that could serve to create an update log.

Each post is comprised of a frontmatter element like:

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

...and the most important thing is the actual contents. It also has a very valuable

The post first appeared on this page. This site

The article was published on this site

Article was first seen on here