{"id":7960,"date":"2024-03-04T08:01:50","date_gmt":"2024-03-04T08:01:50","guid":{"rendered":"https:\/\/www.webhi.com\/how-to\/?p=7960"},"modified":"2024-03-04T08:01:56","modified_gmt":"2024-03-04T08:01:56","slug":"how-install-docusaurus-linux","status":"publish","type":"post","link":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/","title":{"rendered":"How to Install Docusaurus on linux"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en.jpg\" alt=\"setup and Configure Docusaurus Static Site Generator\" class=\"wp-image-7983\" srcset=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en.jpg 1200w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en-300x169.jpg 300w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en-1024x576.jpg 1024w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en-768x432.jpg 768w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en-150x84.jpg 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p><strong>Docusaurus<\/strong>&nbsp;is a modern static website generator optimized for creating documentation websites. It provides a great out-of-the-box documentation experience with features like search, versioning, i18n, and more. In this comprehensive tutorial, we will go through step-by-step how to install Docusaurus on your system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>Before installing Docusaurus, you need to have the following prerequisite software installed:<\/p>\n\n\n\n<ul>\n<li>Node.js (&gt;=12.13.0,&lt;13.0.0 || &gt;=14.15.0)<\/li>\n\n\n\n<li>Yarn or NPM<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nodejs\">Node.js<\/h3>\n\n\n\n<p>Docusaurus is built on React and requires Node.js to run.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ node -v<\/code><\/pre>\n\n\n\n<p>This will print the installed version of Node. If it is less than 12.13.0 or between 13.0.0 and 14.15.0, you need to upgrade Node.js on your system.<\/p>\n\n\n\n<p>To install Node.js, go to the&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">official Node.js website<\/a>&nbsp;and download the installer for your operating system. Follow the prompts to install Node.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"yarn-or-npm\">Yarn or NPM<\/h3>\n\n\n\n<p>Docusaurus uses a package manager like Yarn or NPM to manage its dependencies. You need to have either Yarn or NPM installed.<\/p>\n\n\n\n<p>To check if you have Yarn installed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ yarn --version<\/code><\/pre>\n\n\n\n<p>If Yarn is not installed, you can install it via npm:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm install --global yarn<\/code><\/pre>\n\n\n\n<p>To check if you have NPM installed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm --version<\/code><\/pre>\n\n\n\n<p>NPM usually comes bundled with Node.js installation. If you don&#8217;t have it, you can install NPM from the&nbsp;<a href=\"https:\/\/www.npmjs.com\/get-npm\" target=\"_blank\" rel=\"noreferrer noopener\">official website<\/a>.<\/p>\n\n\n\n<p>Once you have verified the prerequisites, we can move on to installing Docusaurus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installing-docusaurus\">Installing Docusaurus<\/h2>\n\n\n\n<p>There are two main ways to install Docusaurus &#8211; using the classic template or using a single command. We will cover both methods in this section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-using-the-classic-template\">1. Using the Classic Template<\/h3>\n\n\n\n<p>The classic template provides a project skeleton to get you started quickly with some example content. This is the recommended approach if you are new to Docusaurus.<\/p>\n\n\n\n<p>To install Docusaurus using the classic template:<\/p>\n\n\n\n<ol>\n<li>Create a new directory for your Docusaurus site:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ mkdir my-website\n$ cd my-website<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li>Run the Docusaurus installation script with npx:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npx @docusaurus\/init@latest init --template classic<\/code><\/pre>\n\n\n\n<p>This will install all the dependencies and create an initial project structure with some example docs, a blog, and custom pages.<\/p>\n\n\n\n<ol start=\"3\">\n<li>Start the Docusaurus development server:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ cd my-website\n$ npm start<\/code><\/pre>\n\n\n\n<p>The website will open up at&nbsp;<a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/<\/a>&nbsp;where you can start adding content.<\/p>\n\n\n\n<p>That&#8217;s it! Docusaurus is now installed and running using the classic template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-using-a-single-command\">2. Using a Single Command<\/h3>\n\n\n\n<p>You can also scaffold a bare Docusaurus site using a single npx command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npx @docusaurus\/init@latest init<\/code><\/pre>\n\n\n\n<p>This will install Docusaurus and create a minimal project structure without any docs or example content.<\/p>\n\n\n\n<p>To start the development server:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ cd my-website\n$ npm start<\/code><\/pre>\n\n\n\n<p>This approach gives you a blank slate to build your docs site however you want. But you will have to add the docs, blog, custom pages, etc yourself.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"project-structure\">Project Structure<\/h2>\n\n\n\n<p>Once Docusaurus is installed, you will see a generated folder structure like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">my-website\n\u251c\u2500\u2500 blog\n\u251c\u2500\u2500 docs\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 css\n\u2502   \u2514\u2500\u2500 pages \n\u251c\u2500\u2500 static\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 sidebars.js\n\u251c\u2500\u2500 docusaurus.config.js\n\u2514\u2500\u2500 .gitignore<\/code><\/pre>\n\n\n\n<p>Here is what each of these folders and files are for:<\/p>\n\n\n\n<ul>\n<li><code>\/blog<\/code>&nbsp;&#8211; Contains the blog posts that will appear in the blog section.<\/li>\n\n\n\n<li><code>\/docs<\/code>&nbsp;&#8211; Contains the Markdown files for the docs that will appear in the docs section.<\/li>\n\n\n\n<li><code>\/src<\/code>&nbsp;&#8211; Contains the React components, CSS files, static pages and other source code.<\/li>\n\n\n\n<li><code>\/src\/css<\/code>&nbsp;&#8211; CSS files for styling the site.<\/li>\n\n\n\n<li><code>\/src\/pages<\/code>&nbsp;&#8211; Static pages like the home page, about page, contact page etc.<\/li>\n\n\n\n<li><code>\/static<\/code>&nbsp;&#8211; Static assets like images, pdfs etc go here.<\/li>\n\n\n\n<li><code>package.json<\/code>&nbsp;&#8211; The NPM dependencies and scripts for development.<\/li>\n\n\n\n<li><code>sidebars.js<\/code>&nbsp;&#8211; Configuration for the left sidebar navigation.<\/li>\n\n\n\n<li><code>docusaurus.config.js<\/code>&nbsp;&#8211; Main site configuration file.<\/li>\n\n\n\n<li><code>.gitignore<\/code>&nbsp;&#8211; Tells git which files not to track.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"running-the-development-server\">Running the Development Server<\/h2>\n\n\n\n<p>To preview your site locally, you can run the Docusaurus development server:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm start<\/code><\/pre>\n\n\n\n<p>This will start the development server at&nbsp;<a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/<\/a>&nbsp;and rebuild the website as you make changes.<\/p>\n\n\n\n<p>The hot reloading feature will automatically refresh the page as you edit the files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuring-docusaurus\">Configuring Docusaurus<\/h2>\n\n\n\n<p>The main configuration file is&nbsp;<code>docusaurus.config.js<\/code>&nbsp;located at the root.<\/p>\n\n\n\n<p>This file contains settings for:<\/p>\n\n\n\n<ul>\n<li>Site metadata like title, tagline, url, favicon etc.<\/li>\n\n\n\n<li>Header and footer navigation links.<\/li>\n\n\n\n<li>Color theme.<\/li>\n\n\n\n<li>Custom CSS and JavaScript<\/li>\n\n\n\n<li>Custom Markdown plugins<\/li>\n\n\n\n<li>Adding custom pages<\/li>\n\n\n\n<li>Registration of Docs, Blog, Custom pages<\/li>\n\n\n\n<li>And many more configuration options.<\/li>\n<\/ul>\n\n\n\n<p>For example, to change the site title:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ docusaurus.config.js<\/em>\n\nmodule.exports = {\n  title: 'My Site Title',\n  tagline: 'The tagline of my site',\n\n  <em>\/\/ ...<\/em>\n}<\/code><\/pre>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/configuration\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus configuration docs<\/a>&nbsp;for the full list of options.<\/p>\n\n\n\n<p>The&nbsp;<code>sidebars.js<\/code>&nbsp;file is used to configure the left side navigation for the docs. It allows you to specify which documents should be included in the sidebar and in what order.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ sidebars.js<\/em>\n\nmodule.exports = {\n  tutorialSidebar: [\n    'intro',\n    'install',\n    {\n      type: 'category',\n      label: 'Guides',\n      items: [\n        'guide1',\n        'guide2'\n      ]\n    }\n  ],\n}<\/code><\/pre>\n\n\n\n<p>This maps the document&nbsp;<code>intro.md<\/code>&nbsp;to the sidebar item &#8220;Introduction&#8221;,&nbsp;<code>install.md<\/code>&nbsp;to &#8220;Installation&#8221; and so on.<\/p>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus documentation<\/a>&nbsp;provides a complete reference for all configuration options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-pages\">Creating Pages<\/h2>\n\n\n\n<p>To add a new page like &#8220;About Us&#8221;, create a JSX file at&nbsp;<code>src\/pages\/about.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ src\/pages\/about.js<\/em>\n\nimport React from 'react';\n\nfunction About() {\n  return (\n    &lt;main&gt;\n      &lt;h1&gt;About Us&lt;\/h1&gt;\n      &lt;p&gt;This page tells you all about us...&lt;\/p&gt;\n    &lt;\/main&gt;\n  )\n}\n\nexport default About;<\/code><\/pre>\n\n\n\n<p>This React component will be rendered as a page at the route&nbsp;<code>\/about<\/code>.<\/p>\n\n\n\n<p>Similarly, you can add pages like&nbsp;<code>\/contact<\/code>,&nbsp;<code>\/pricing<\/code>,&nbsp;<code>\/terms<\/code>&nbsp;etc.<\/p>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/creating-pages\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus docs on pages<\/a>&nbsp;for more details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-blog-posts\">Adding Blog Posts<\/h2>\n\n\n\n<p>To create a new blog post, add a Markdown file to the&nbsp;<code>blog<\/code>&nbsp;directory. For example:<\/p>\n\n\n\n<p><code>blog\/welcome.md<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\">---\nslug: welcome\ntitle: Welcome to my Blog\nauthor: John Doe\nauthor<em>_title: Principal Author\nauthor_<\/em>url: https:\/\/github.com\/john\nauthor<em>_image_<\/em>url: https:\/\/avatars3.githubusercontent.com\/u\/123?s=400&amp;v=4  \n<strong>tags: [hello, docusaurus]\n---<\/strong>\n\nWelcome to my new blog! This is my first post.\n\nI will write about my journey with Docusaurus and share my thoughts. Stick around for more to come!<\/code><\/pre>\n\n\n\n<p>The post attributes allow you to customize the blog header. Docusaurus will read these Markdown files and generate a nice blog page for each post.<\/p>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus blog docs<\/a>&nbsp;for more details on creating blog posts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-documentation\">Adding Documentation<\/h2>\n\n\n\n<p>To add documentation pages, create Markdown files inside the&nbsp;<code>\/docs<\/code>&nbsp;folder.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<p><code>docs\/intro.md<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\"><strong># Introduction<\/strong>\n\nWelcome to my documentation site!\n\nI will cover how to install Docusaurus and discuss key concepts.<\/code><\/pre>\n\n\n\n<p><code>docs\/install.md<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\"><strong># Installation<\/strong>\n\nYou can install Docusaurus using:\n\n```bash\nnpm init docusaurus@latest\n```\n\nThis will get you up and running quickly.<\/code><\/pre>\n\n\n\n<p>The Markdown files will be converted to HTML and rendered nicely with features like a sidebar, navigation, search etc.<\/p>\n\n\n\n<p>You can use headings, images, links, code blocks, syntax highlighting and Markdown formatting.<\/p>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/markdown-features\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus documentation docs<\/a>&nbsp;for more details on the Markdown features available.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"versioning\">Versioning<\/h2>\n\n\n\n<p>Docusaurus makes it easy to maintain documentation versions with the versions feature.<\/p>\n\n\n\n<p>To use versioning, first initialize the docs:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run docusaurus docs:version 1.0.0<\/code><\/pre>\n\n\n\n<p>This will create a&nbsp;<code>versioned_docs<\/code>&nbsp;folder and copy your existing&nbsp;<code>docs<\/code>&nbsp;folder contents into&nbsp;<code>versions\/1.0.0<\/code>&nbsp;subfolder.<\/p>\n\n\n\n<p>You can then make changes to the docs in the&nbsp;<code>docs<\/code>&nbsp;folder which will be reflected in the&nbsp;<code>latest<\/code>&nbsp;version.<\/p>\n\n\n\n<p>To create a new version:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run docusaurus docs:version 1.0.1<\/code><\/pre>\n\n\n\n<p>This will copy the current&nbsp;<code>docs<\/code>&nbsp;folder into&nbsp;<code>versions\/1.0.1<\/code>&nbsp;as a snapshot. You can switch between versions by selecting them in the version dropdown.<\/p>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/versioning\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus versioning guide<\/a>&nbsp;for more details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"themes\">Themes<\/h2>\n\n\n\n<p>Docusaurus comes with several themes including:<\/p>\n\n\n\n<ul>\n<li><strong>Classic<\/strong>&nbsp;&#8211; The classic Docusaurus theme.<\/li>\n\n\n\n<li><strong>Bootstrap<\/strong>&nbsp;&#8211; A theme with Bootstrap styles.<\/li>\n\n\n\n<li><strong>Minimal<\/strong>&nbsp;&#8211; A minimal theme with plain CSS.<\/li>\n<\/ul>\n\n\n\n<p>The theme can be configured in&nbsp;<code>docusaurus.config.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">module.exports = {\n  <em>\/\/ ...<\/em>\n  themeConfig: {\n    navbar: {\n      title: 'Site Title',\n      logo: {\n        alt: 'Site Logo',\n        src: 'img\/logo.svg',\n      } \n    },\n  },\n  themes: ['@docusaurus\/theme-classic'],\n}<\/code><\/pre>\n\n\n\n<p>You can also create&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/themes\" target=\"_blank\" rel=\"noreferrer noopener\">custom themes<\/a>&nbsp;to brand your site.<\/p>\n\n\n\n<p>Refer to the theming docs for details on theming components like navbars, footer, color palette etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deployment\">Deployment<\/h2>\n\n\n\n<p>Once your Docusaurus site is ready, you can deploy it easily.<\/p>\n\n\n\n<p>First, build the static HTML pages:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run build <\/code><\/pre>\n\n\n\n<p>This will generate a&nbsp;<code>build<\/code>&nbsp;folder containing the HTML pages, JavaScript bundles and assets.<\/p>\n\n\n\n<p>You can now deploy the&nbsp;<code>build<\/code>&nbsp;folder to any static hosting provider like GitHub Pages, Vercel, Netlify, Azure Static Web Apps etc.<\/p>\n\n\n\n<p>For example, to deploy on GitHub pages:<\/p>\n\n\n\n<ol>\n<li>Commit the&nbsp;<code>build<\/code>&nbsp;folder to a&nbsp;<code>gh-pages<\/code>&nbsp;branch on GitHub.<\/li>\n\n\n\n<li>Set the GitHub pages site to point to the&nbsp;<code>gh-pages<\/code>&nbsp;branch.<\/li>\n<\/ol>\n\n\n\n<p>Refer to the&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/deployment\" target=\"_blank\" rel=\"noreferrer noopener\">Docusaurus deployment docs<\/a>&nbsp;for guides on deploying to various platforms.<\/p>\n\n\n\n<p>And that&#8217;s it! Your Docusaurus site should now be published online.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary\">Summary<\/h2>\n\n\n\n<p>In this tutorial, we went through how to:<\/p>\n\n\n\n<ul>\n<li>Install Docusaurus using the classic template or single command<\/li>\n\n\n\n<li>Structure the project files and folders<\/li>\n\n\n\n<li>Configure Docusaurus using&nbsp;<code>docusaurus.config.js<\/code><\/li>\n\n\n\n<li>Run the development server<\/li>\n\n\n\n<li>Create React pages<\/li>\n\n\n\n<li>Add blog posts<\/li>\n\n\n\n<li>Organize documentation with Markdown<\/li>\n\n\n\n<li>Version documentation<\/li>\n\n\n\n<li>Theme Docusaurus site<\/li>\n\n\n\n<li>Deploy Docusaurus on production<\/li>\n<\/ul>\n\n\n\n<p>Docusaurus is a great tool for building documentation websites with React. It provides a nice out-of-the-box experience while giving flexibility to customize and extend anything. I hope you found this tutorial helpful in learning how to get started using Docusaurus for your docs site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Docusaurus&nbsp;is a modern static website generator optimized for creating documentation websites. It provides a great out-of-the-box documentation experience with features like search, versioning, i18n, and more. In this comprehensive tutorial, we will go through step-by-step how to install Docusaurus on your system. Prerequisites Before installing Docusaurus, you need to have the following prerequisite software installed: ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[188,69],"tags":[],"yoast_head":"\n<title>How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations<\/title>\n<meta name=\"description\" content=\"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations\" \/>\n<meta property=\"og:description\" content=\"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHi Tutorials &amp; Documentations\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webhi.technology\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T08:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T08:01:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en.jpg\" \/>\n<meta name=\"author\" content=\"webhi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@WebHiTechnology\" \/>\n<meta name=\"twitter:site\" content=\"@WebHiTechnology\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webhi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\"},\"author\":{\"name\":\"webhi\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54\"},\"headline\":\"How to Install Docusaurus on linux\",\"datePublished\":\"2024-03-04T08:01:50+00:00\",\"dateModified\":\"2024-03-04T08:01:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\"},\"wordCount\":1298,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\"},\"articleSection\":[\"CMS &amp; Web development\",\"Linux system administration\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\",\"name\":\"How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations\",\"isPartOf\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#website\"},\"datePublished\":\"2024-03-04T08:01:50+00:00\",\"dateModified\":\"2024-03-04T08:01:56+00:00\",\"description\":\"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webhi.com\/how-to\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Install Docusaurus on linux\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#website\",\"url\":\"https:\/\/www.webhi.com\/how-to\/\",\"name\":\"WebHi Tutorials &amp; Documentations\",\"description\":\"System administration and knowledge base\",\"publisher\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webhi.com\/how-to\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\",\"name\":\"WebHi Technology\",\"url\":\"https:\/\/www.webhi.com\/how-to\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png\",\"contentUrl\":\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png\",\"width\":288,\"height\":95,\"caption\":\"WebHi Technology\"},\"image\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webhi.technology\",\"https:\/\/twitter.com\/WebHiTechnology\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54\",\"name\":\"webhi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1784239260\",\"contentUrl\":\"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1784239260\",\"caption\":\"webhi\"},\"sameAs\":[\"https:\/\/www.webhi.com\/how-to\"],\"url\":\"https:\/\/www.webhi.com\/how-to\/author\/webhi\/\"}]}<\/script>\n","yoast_head_json":{"title":"How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations","description":"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/","og_locale":"en_US","og_type":"article","og_title":"How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations","og_description":"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.","og_url":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/","og_site_name":"WebHi Tutorials &amp; Documentations","article_publisher":"https:\/\/www.facebook.com\/webhi.technology","article_published_time":"2024-03-04T08:01:50+00:00","article_modified_time":"2024-03-04T08:01:56+00:00","og_image":[{"url":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_en.jpg"}],"author":"webhi","twitter_card":"summary_large_image","twitter_creator":"@WebHiTechnology","twitter_site":"@WebHiTechnology","twitter_misc":{"Written by":"webhi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#article","isPartOf":{"@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/"},"author":{"name":"webhi","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54"},"headline":"How to Install Docusaurus on linux","datePublished":"2024-03-04T08:01:50+00:00","dateModified":"2024-03-04T08:01:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/"},"wordCount":1298,"commentCount":0,"publisher":{"@id":"https:\/\/www.webhi.com\/how-to\/#organization"},"articleSection":["CMS &amp; Web development","Linux system administration"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/","url":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/","name":"How to Install Docusaurus on linux - WebHi Tutorials &amp; Documentations","isPartOf":{"@id":"https:\/\/www.webhi.com\/how-to\/#website"},"datePublished":"2024-03-04T08:01:50+00:00","dateModified":"2024-03-04T08:01:56+00:00","description":"Step-by-step guide on how to install the Docusaurus static site generator, structure your project files and folders, configure settings, create pages and blog posts, add documentation, version docs, apply themes, and deploy the site.","breadcrumb":{"@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhi.com\/how-to\/how-install-docusaurus-linux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhi.com\/how-to\/"},{"@type":"ListItem","position":2,"name":"How to Install Docusaurus on linux"}]},{"@type":"WebSite","@id":"https:\/\/www.webhi.com\/how-to\/#website","url":"https:\/\/www.webhi.com\/how-to\/","name":"WebHi Tutorials &amp; Documentations","description":"System administration and knowledge base","publisher":{"@id":"https:\/\/www.webhi.com\/how-to\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhi.com\/how-to\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhi.com\/how-to\/#organization","name":"WebHi Technology","url":"https:\/\/www.webhi.com\/how-to\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png","contentUrl":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png","width":288,"height":95,"caption":"WebHi Technology"},"image":{"@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webhi.technology","https:\/\/twitter.com\/WebHiTechnology"]},{"@type":"Person","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54","name":"webhi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/image\/","url":"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1784239260","contentUrl":"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1784239260","caption":"webhi"},"sameAs":["https:\/\/www.webhi.com\/how-to"],"url":"https:\/\/www.webhi.com\/how-to\/author\/webhi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7960"}],"collection":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/comments?post=7960"}],"version-history":[{"count":6,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7960\/revisions"}],"predecessor-version":[{"id":8004,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7960\/revisions\/8004"}],"wp:attachment":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/media?parent=7960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/categories?post=7960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/tags?post=7960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}