Create and Customize a Docusaurus Site (With Blog Feature)

1. Install Docusaurus:

First, you will need to install Docusaurus. To do this, you will need to have Node.js and npm installed. Once you have these installed, you can install Docusaurus by running the following command in your terminal:

npm install –global docusaurus

2. Create a Docusaurus Site:

Once you have installed Docusaurus, you can create a new site by running the following command in your terminal:

docusaurus init

This will create a new directory with the necessary files and folders for your Docusaurus site.

3. Customize Your Site:

Once you have created your Docusaurus site, you can customize it to your liking. You can edit the configuration files, add new pages, and customize the look and feel of your site.

4. Add a Blog Feature:

To add a blog feature to your Docusaurus site, you will need to create a new folder in the “docs” directory called “blog”. Inside this folder, you can create markdown files for each blog post. You can also add images and other media to your blog posts.

Once you have created your blog posts, you can add a link to them in the navigation bar of your site. You can also add a “Latest Posts” section to your homepage to showcase your latest blog posts.

5. Deploy Your Site:

Once you have finished customizing your Docusaurus site, you can deploy it to a web server. You can use a service like Netlify or Vercel to deploy your site for free.

These are the steps to create and customize a Docusaurus site with a blog feature. With Docusaurus, you can easily create a professional-looking website with a blog feature.
[ad_1]

For lightweight websites, applications, and other small projects, more and more developers are turning to static site generators over WordPress or other content management systems (CMSs). Static sites offer a simple and effective way to create websites and applications that are fast, secure, and easy to maintain.

Docusaurus is one such static site generator — and it’s rapidly gaining in popularity in the development community.

In this post, we’ll take a deep dive into the benefits of using Docusaurs as your static site generator and why it’s a growing favorite among developers.

What Is Docusaurus?

Docusaurus is a popular static site generator that uses React, one of the top JavaScript libraries, as its UI library for page creation. Like other such generators, it’s easy to set up and easy to modify, and — most importantly — it provides you with everything you need to hit the ground running with your static website.

What sets Docusaurus apart, however, is that helps you create and manage a website where content plays a key role. It allows you to quickly and easily build a full website — complete with a blog feature — that spotlights your content from the get-go.

Because content is the focus with Docusaurus, it’s perfect for creating documentation sites like wikis. It also utilizes markdown, which is ideal both for collaboration and storage in a git repository. What’s more, it’s got a ton of amazing features like i18n, search, and custom themes, which we’ll discuss in more detail later on.

Here are just a few of the standout features that make Docusaurus a solid option:

  • Built using React
  • Support for MDX v1
  • Support for React component embedding via Markdown
  • Document versioning
  • Compatibility with Git, Crowdin, and other translation managers for document translation and bulk or individual deployment

Who Uses Docusaurus?

Docusaurus was created by Facebook, so it’s no surprise that it’s currently being used by many big brands and companies across the web.

Here are just a few of the largest brands using Docusaurus today (with more soon to come as Docusaurus’ popularity continues to grow):

And more are joining their ranks every day.

How To Install Docusaurus

Docusaurus is very simple to install and only requires a few minutes. In this tutorial, we’ll be building a documentation site with a blog, and we’ll customize how the website looks.

And here’s the coolest part: It will take us less than an hour to spin everything up.

Let’s dive in!

Requirements

Docusarus requires Node.js 16.14 or newer. It’s a flat-file SSG, which means you won’t need an additional database.

If you don’t already have Node.js 16.14+ available, you will need to begin by installing Node.js or upgrading your current version. Then you can move on to the Docusaurus installation process below.

We’re also going to be using the sample Docusaurus site from this GitHub repository. You may use it or a clean installation of Docusaurus for this tutorial.

Installation Process

To begin the Docusaurus installation process, you first need to run the following command:

npx [email protected]  classic

This will create a folder for your project and scaffold the classic theme inside of it. The classic theme already contains some preconfigured features like a blog, custom pages, and a CSS framework.

After installation, you then need to run the following command to start the local server:

npm start

If you want to build an optimized version that is ready for deployment, you should run this instead:

npm run build

Structure

Once you’ve installed your Docusaurus instance, you’ll be able to open your project directory and take a closer look at the “skeleton” of your new site.

Here’s what the file structure looks like:

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

  • /blog: Contains all the files related to your blog.
  • /docs: Contains all the files related to your docs. You can customize their order in the sidebar.js file.
  • /src: Contains all non-documentation files like pages or custom components.
  • /src/pages: All the JSX/TSX/MDX files will be transformed into pages.
  • /static: Static files that will be copied to the final build folder.
  • docusaurus.config.js: Docusaurus configuration file.
  • packaged.json: Each Docusaurus site is a React app, so here you will find all the dependencies and scripts that it uses for React.
  • sidebar.js: Here you can specify the order of documents in the sidebar.

Customizing Your Docusaurus Installation

As you can see from the simplicity of its file structure, Docusaurus is easy to use and navigate. Likewise, customizing your Docusaurus site is a breeze. You can open and edit these files using your favorite text editor or IDE.

Let’s go over some of the customization options you’ll have right out of the box.

Homepage

The first thing you’ll probably be itching to do is customize the default homepage to exhibit your own project instead. Luckily, it’s not complicated to make any changes you want to the Docusaurus homepage.

To alter the homepage, open the src/pages/index.js file and make adjustments right in there. It’s a typical React page, so you can alter or rebuild it by changing the content or creating custom React components.

Configuration File

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

Name and Description

In the configuration file, you’ll find:

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

Just change these details to suit your site’s needs, then save the file.

Navigation Bar

To edit your navigation bar, locate the navbar item.

For our example here, we want to add a link to Kinsta, rename the “Tutorial” item to “Starter documentation,” and add the Kinsta logo.

Here’s how we’d go about it:

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

Footer

Footer customization in Docusaurus is made up of two sections: the footer content itself, and the footer links.

Footer Content

The main bulk of your footer content (not including the links list) can be placed in your themeConfig.footer file. This is the ideal spot to add a logo and a copyright notice.

Here’s how we’ve modified our footer configuration:

module.exports = {
  themeConfig: {
    footer: {
      logo: {
        alt: 'Kinsta Logo',
        src: 'img/kinsta-logo.png',
        href: 'https://kinsta.com',
        width: 160,
        height: 51,
      },
      copyright: `Copyright © ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`,
    },
  },
};
Footer Links

Changing the footer links is similar to changing the top navbar: Find the footer section in docusaurus.config.js and edit until it fits your needs.

Here’s what we’ve changed our footer section to look like:

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

Colors and CSS

The classic preset for Docusaurus uses the Infima CSS framework. With this in mind, Docusaurus creators made a very useful web tool to help you change the colors and other CSS elements and declarations.

Once you’ve entered your preferences on the page, the tool will generate a custom.css file — complete with a lovely suite of complementing tones — in a matter of seconds. You can then copy this new CSS file into your project’s /src/css directory for reference.

Docusaurus' custom CSS tool.
A portion of the Docusaurus official documentation, exhibiting their custom CSS tool with fields to enter hex code adjustments for each individual element in the Docusaurus design.

Documentation

All the documentation on your new website is stored in the /docs folder. Of course, you can change the folder name in docusaurus.config.js.

Just create the markdown files in your text or HTML editor and drop them in that folder. Each file should look like this:

---
id: the-id
title: Title
---
# Rest of the document

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

We can also create subfolders if want to divide our documentation into different, logical sections. However, we’ll need to do a little additional work for these subdirectories to function the way we’d expect.

Say we create a new documents folder called “Starters.” If we were to then refresh the homepage and click on the new “Starters” link automatically added to our sidebar, we’ll get an error — because there is no index page yet in our new folder.

The easiest way to fix this is to create a _category_.json file that will generate the index of all pages that are stored in this folder. You only need to add the following code:

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

As you can see, the sidebar regenerates to match the structure of your files. That’s because the sidebar.js file contains this tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

If you prefer to take care of this on your own, you can just change this to something like this:

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

Blog

Docusaurus includes a slick blog module. Having a blog in place alongside your main website can be very useful to inform your user base of changes happening in your project, or to keep running project notes as a form of changelog.

Each post consists of a frontmatter part, like this:

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

…and, of course, the content itself. It also has a very useful <!--truncate--> tag, which helps to limit the post summary displayed on all post listings.

It’s also a great idea to create an authors.yml file for credits. The file looks like this:

palmiak:
name: Maciek Palmowski
title: DevRel
url: https://github.com/palmiak
image_url: https://github.com/palmiak.png

Thanks to this file, you’ll have all the author’s data in one place for easy reference.

How To Deploy Your Docusaurus Website at Kinsta

On top of WordPress sites, stand-alone applications, and databases, Kinsta can host static websites.

This means it’s perfect for your Docusaurs sites — and for managing all your web projects — directly from your MyKinsta dashboard.

Once your application has been deployed, you’ll be able to review your application’s ongoing analytics, both live and historical, with measurements including:

  • Bandwidth usage
  • Build time
  • Run time
  • CPU usage
  • Memory usage

From start to finish, the deployment process through MyKinsta takes only a few minutes.

Let’s get started!

Prerequisites: Configuring Your Docusaurus Project

To host your Docusaurus project on Kinsta’s Application Hosting platform, you’ll need to:

  1. Include a name field in your package.json file. (This can be anything and will not affect your deployment.)
  2. Include a build script in your package.json file. (Your Docusaurus project should already include this.)
  3. Install the serve npm package and set the start script to serve build.

Once those are checked off, you can move on to actually deploying your site.

Deploying Your Docusaurus Project

Follow these simple steps to connect to your GitHub account and launch your Docusaurus site:

  1. Log in to your MyKinsta account and navigate to the Applications tab from the left-hand menu.
  2. Click on the blue Add service button and choose Application from the dropdown.

    Choose
    The Applications tab in the MyKinsta dashboard with the mouse hovering over the “Application” option after clicking on the blue “Add service” button.

  3. If you haven’t yet connected to your GitHub account through MyKinsta, you’ll be shown a modal encouraging you to do so. Click the Continue with GitHub button to proceed.

    Integrating MyKinsta with GitHub.
    A modal with the text “GitHub integration: Connect kinsta to your GitHub namespace here to import your existing repositories.” At the bottom-right are a white “Cancel” button and a blue “Continue with GitHub” button.

  4. A new window will open, requesting your permission to authorize Kinsta to access and manage your GitHub resources. Make sure you’re signed in to the correct GitHub account, then click on the green Authorize Kinsta button near the bottom.

    Authorizing Kinsta at GitHub.
    An authorization modal from GitHub with the text “Kinsta by Kinsta would like permission to: Verify your GitHub identity (kinstauser); Know which resources you can access; Act on your behalf” with both a gray “Cancel” button and a green “Authorize Kinsta” button at the bottom.

  5. You’ve now come to the GitHub integration wizard. This is the last step before you can deploy your site. Carefully consider the fields presented and fill them out according to your GitHub configuration and your project’s requirements. If you have a Dockerfile in your repository, you can use this to set up the container image; otherwise, Kinsta will automatically set up a container image for you. Note that you may need to edit your GitHub permissions before you’ll be able to proceed, particularly if this is your first deployment through Kinsta.
    Edit GitHub permissions.
    The new application wizard in MyKinsta showing the mouse hand hovering over the “Edit GitHub permissions” dropdown option for the “GitHub repository” field.

    You can choose whether to grant Kinsta access to all repositories, or only specific ones. These permissions can be adjusted at any time from your GitHub account’s Applications settings.

    Choosing which GitHub permissions to grant Kinsta.
    The GitHub “Permissions” section, showing two options in the “Repository access” section: “All repositories” or “Only select repositories”.

  6. After you’ve made your selections and confirmed your choices, you’ll be shown your deployment details, as well as options to Change settings or Redeploy.
    Successful deployment of application via MyKinsta.
    The “Deployment details” page in MyKinsta showing information pertaining to the deployed app, including the deployed branch name, commit number, accompanying commit message, deployment times, and the selected data center location.

    This is also where you’ll see any errors that occurred during deployment, along with details on what caused the failure so you can address it easily. If you find yourself struggling to fix the problem, additional guidance on rollout errors can be found in Kinsta’s documentation.

    An error titled “Build process failed” along with “Unknown build fail type” above a details pane that lists the individual errors that contributed to the failure.

If you’ve come this far without errors, then congratulations — you’ve just successfully deployed your Docusaurus site through Kinsta! Your application (i.e., your static site) is available as soon as you’ve completed the wizard. You can view it at your application’s URL, which is commonly https://your-docusaurus-site.kinsta.app.

Here’s our first look at our sample site on Kinsta:

Our deployed Docusaurus site.
The deployed Docusaurus homepage, at the top of which is a green banner with the headline “My Site” and tagline “Dinosaurs are cool” in white text.

Summary

With its surprisingly powerful features, friendly design, intuitive navigation, and focus on content, it’s not hard to see why Docusaurus is considered an excellent tool for any developer looking to easily deploy and maintain a streamlined, well-organized static documentation site and/or blog.

Once you’ve filled your site with content that your visitors will value, you’ll begin to take note of additional built-in features that come in handy. For instance, Docusaurus’ search engine optimization capabilities are perfect for helping you gain improved visibility through a wider audience while you work on other techniques for advancing in SEO rankings.

Have you built anything with Docusaurus? Share your projects and experience with us in the comments section below.


Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

  • Easy setup and management in the MyKinsta dashboard
  • 24/7 expert support
  • The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
  • An enterprise-level Cloudflare integration for speed and security
  • Global audience reach with up to 35 data centers and 275 PoPs worldwide

Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.



[ad_2]

Source link

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

GSTIN is 03EGRPS4248R1ZD.

Contact
Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00