https://www.devkuma.com/en/tags/docusaurus/ https://www.devkuma.com/en/tags/docusaurus/logo/180x180.jpg https://www.devkuma.com/en/tags/docusaurus/ Recent content in Docusaurus on devkuma Hugo -- gohugo.io en kc@example.com (kc kim) kc@example.com (kc kim) The devkuma https://www.devkuma.com/en/docs/docusaurus/getting-started/ Mon, 11 Mar 2024 01:03:00 +0900 kc@example.com (kc kim) https://www.devkuma.com/en/docs/docusaurus/getting-started/ <p><img src="https://www.devkuma.com/docs/docusaurus/docusaurus-eyecatch-960x504.png" alt="docusaurus"></p> <h2 id="what-is-docusaurus">What Is Docusaurus?</h2> <p>Docusaurus is an <a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener">open-source project<i class="fas fa-external-link-alt"></i></a> created by Facebook for building static websites. It is especially used by developers to write and host technical documentation. It is a React-based, user-friendly documentation tool, and documents can be written easily with Markdown.</p> <p>Main features include user-friendly documentation, Markdown and MDX support, customizable layouts and themes, search integration through Algolia, responsive design, internationalization, a plugin system, and document versioning.</p> <h2 id="environment">Environment</h2> <p>The article was verified in a macOS environment with Node.js and npx installed.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-zsh" data-lang="zsh"><span style="display:flex;"><span>% node -v </span></span><span style="display:flex;"><span>v21.6.2 </span></span><span style="display:flex;"><span>% npx -v </span></span><span style="display:flex;"><span>10.2.4 </span></span></code></pre></div><h2 id="creating-a-project">Creating a Project</h2> <p>Docusaurus provides a scaffold command for project creation.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-zsh" data-lang="zsh"><span style="display:flex;"><span>$ npx @docusaurus/init@latest init <span style="color:#ce5c00;font-weight:bold">[</span>siteName<span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">[</span>template<span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">[</span>rootDir<span style="color:#ce5c00;font-weight:bold">]</span> </span></span><span style="display:flex;"><span>$ npx @docusaurus/init@latest init devkuma-mysite classic </span></span></code></pre></div><p>After creation, move into the directory and start the site.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-zsh" data-lang="zsh"><span style="display:flex;"><span>$ <span style="color:#204a87">cd</span> devkuma-mysite </span></span><span style="display:flex;"><span>$ npm start </span></span></code></pre></div><p>The generated project contains directories such as <code>blog/</code>, <code>docs/</code>, <code>src/</code>, and <code>static/</code>, along with configuration files such as <code>docusaurus.config.js</code> and <code>sidebars.js</code>.</p> <h2 id="customization">Customization</h2> <p>The first page can be customized by editing <code>src/pages/index.js</code>. The site header and navigation are configured in <code>docusaurus.config.js</code>, not in each individual page. Docusaurus automatically reloads the browser during development, so changes can be checked quickly.</p> <h2 id="summary">Summary</h2> <p>Docusaurus is a useful tool for creating and managing documentation sites with Markdown, React, and a structured sidebar. For documentation-focused projects, the main files to edit are usually <code>docs/</code>, <code>docusaurus.config.js</code>, and <code>sidebars.js</code>.</p> Docusaurus Blog