https://docusaurus-classic-site.pages.dev
https://github.com/coding-to-music/docusaurus-classic-site
https://docusaurus-classic-site.vercel.app
https://vercel.com/coding-to-music/docusaurus-classic-site
From / By Docusaurus
https://docusaurus.io/docs/installation#scaffold-project-website
https://docusaurus.io/docs/api/misc/create-docusaurus
https://dev.to/gaurishhs/deploying-docusaurus-to-cloudflare-pages-565g
git init
git add .
git remote remove origin
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:coding-to-music/docusaurus-classic-site.git
git push -u origin mainDocusaurus is a commonly used static site generator. It is built on top of react and can be used to make any kind of site (personal website, product, blog, marketing landing pages, etc).
Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
Open up your shiny terminals and create a docusaurus app How to create: https://docusaurus.io/docs/installation#scaffold-project-website
Now, Once you've created change your directory to the project.
Then, Run the start command.
It will open up your browser to the development website: http://localhost:3000/
Now, Your Docusaurus Website is ready, Let's deploy it over cloudflare pages.
Change your docusaurus.config.js url field to https://.pages.dev or your custom domain.
Unlike Vercel and netlify, Cloudflare pages doesn't support cli deployments yet (They might come sooner or later)
So, You'll need to push all the code over github.
git init
git add -A
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/apidev234/Docusaurus-Cf-Pages.git
git push -u origin main
After Running these commands, If you check your github, You'll find the code there.
Head to your cloudflare pages dashboard, Signup for pages if you haven't yet.
Create an app and select your github repository.
Choose Create React App as your framework preset.
Create an environment variable NODE_VERSION with the value 16.13.2
Docusaurus requires a node version more than or equal to node v14, 16.13.2 is a LTS(Long time support) Version of Node.js
Then Click Deploy, Within 5mins your app would be ready :)
https://docusaurus-cf-pages.pages.dev/
Add a Custom Domain To Your App https://developers.cloudflare.com/pages/get-started#adding-a-custom-domain
Redirecting www to apex domain https://developers.cloudflare.com/pages/how-to/www-redirect
This website is built using Docusaurus 2, a modern static website generator.
$ yarn
$ yarn start
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
$ yarn build
This command generates static content into the build directory and can be served using any static contents hosting service.
Using SSH:
$ USE_SSH=true yarn deploy
Not using SSH:
$ GIT_USER=<Your GitHub username> yarn deploy
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.
https://docusaurus.io/docs/installation#scaffold-project-website
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
Docusaurus is essentially a set of npm packages.
:::tip
Use the Fast Track to understand Docusaurus in 5 minutes ⏱!
Use docusaurus.new to test Docusaurus immediately in your browser!
:::
- Node.js version 16.14 or above (which can be checked by running
node -v). You can use nvm for managing multiple Node versions on a single machine installed.- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
The easiest way to install Docusaurus is to use the command line tool that helps you scaffold a skeleton Docusaurus website. You can run this command anywhere in a new empty repository or within an existing repository, it will create a new directory containing the scaffolded files.
npx create-docusaurus@latest my-website classicWe recommend the classic template so that you can get started quickly, and it contains features found in Docusaurus 1. The classic template contains @docusaurus/preset-classic which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). You can get up and running extremely quickly with the classic template and customize things later on when you have gained more familiarity with Docusaurus.
You can also use the template's TypeScript variant by passing the --typescript flag. See TypeScript support for more information.
npx create-docusaurus@latest my-website classic --typescript:::info FB-Only
If you are setting up a new Docusaurus website for a Facebook open source project, use the facebook template instead, which comes with some useful Facebook-specific defaults:
npx create-docusaurus@latest my-website facebook:::
Alternative installation commands
You can also initialize a new project using your preferred project manager:
<Tabs>
<TabItem value="npm">
npm init docusaurus</TabItem>
<TabItem value="yarn">
yarn create docusaurus</TabItem>
<TabItem value="pnpm">
pnpm create docusaurus</TabItem>
</Tabs>
Run npx create-docusaurus@latest --help, or check out its API docs for more information about all available flags.
Assuming you chose the classic template and named your site my-website, you will see the following files generated under a new directory my-website/:
my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.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/blog/- Contains the blog Markdown files. You can delete the directory if you've disabled the blog plugin, or you can change its name after setting thepathoption. More details can be found in the blog guide/docs/- Contains the Markdown files for the docs. Customize the order of the docs sidebar insidebars.js. You can delete the directory if you've disabled the docs plugin, or you can change its name after setting thepathoption. More details can be found in the docs guide/src/- Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files here, but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing/src/pages- Any JSX/TSX/MDX file within this directory will be converted into a website page. More details can be found in the pages guide
/static/- Static directory. Any contents inside here will be copied into the root of the finalbuilddirectory/docusaurus.config.js- A config file containing the site configuration. This is the equivalent ofsiteConfig.jsin Docusaurus v1/package.json- A Docusaurus website is a React app. You can install and use any npm packages you like in them/sidebars.js- Used by the documentation to specify the order of documents in the sidebar
If you are using Docusaurus for documentation of an existing project, a monorepo may be the solution for you. Monorepos allow you to share dependencies between similar projects. For example, your website may use your local packages to showcase the latest features, instead of depending on a released version; your contributors can also conveniently update the docs as they implement features. An example monorepo folder structure is below:
my-monorepo
├── package-a # Another package, your actual project
│ ├── src
│ └── package.json # Package A's dependencies
├── website # Docusaurus root
│ ├── docs
│ ├── src
│ └── package.json # Docusaurus' dependencies
├── package.json # Monorepo's shared dependenciesIn this case, you should run npx create-docusaurus within the ./my-monorepo folder.
If you're using a hosting provider such as Netlify or Vercel, you will need to change the Base directory of the site to where your Docusaurus root is. In this case, that would be ./website. Read more about configuring ignore commands in the deployment docs.
Read more about monorepos in the Yarn documentation (Yarn is not the only way to set up a monorepo, but it's a common solution), or checkout Docusaurus and Jest for some real-world examples.
To preview your changes as you edit the files, you can run a local development server that will serve your website and reflect the latest changes.
cd my-website
npm run startBy default, a browser window will open at http://localhost:3000.
Congratulations! You have just created your first Docusaurus site! Browse around the site to see what's available.
Docusaurus is a modern static website generator so we need to build the website into a directory of static contents and put it on a web server so that it can be viewed. To build the website:
npm run buildand contents will be generated within the /build directory, which can be copied to any static file hosting service like GitHub pages, Vercel or Netlify. Check out the docs on deployment for more details.
There are many ways to update your Docusaurus version. One guaranteed way is to manually change the version number in package.json to the desired version. Note that all @docusaurus/-namespaced packages should be using the same version.
import UpgradeGuide from '@site/src/components/UpgradeGuide';
Then, in the directory containing package.json, run your package manager's install command:
npm installTo check that the update occurred successfully, run:
npx docusaurus --versionYou should see the correct version as output.
Alternatively, if you are using Yarn, you can do:
yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest:::tip
Use new unreleased features of Docusaurus with the @canary npm dist tag
:::
Ask for help on Stack Overflow, on our GitHub repository, our Discord server, or Twitter.
sidebar_position: 0 slug: /api/misc/create-docusaurus
https://docusaurus.io/docs/api/misc/create-docusaurus
A scaffolding utility to help you instantly set up a functional Docusaurus app.
npx create-docusaurus@latest [name] [template] [rootDir]The name argument will be used as the site's path as well as the name field in the created app's package.json. It can be an absolute path, or a path relative to rootDir.
The template argument can be one of the following:
classic: Uses the classic template (recommended)facebook: Uses the Facebook/Meta template, which contains some Meta-specific setup- A git repo URL (beginning with
https://orgit@), which can be cloned to the destination - A local file path relative to CWD, which contains the files to be copied to destination
The rootDir will be used to resolve the absolute path to the site directory. The default is CWD.
:::caution
This command should be preferably used in an interactive shell so all features are available.
:::
Used when the template argument is a recognized name. Currently, only classic provides a TypeScript variant.
Used when the template argument is a git repo. It needs to be one of:
deep: preserves full git historyshallow: clones with--depth=1copy: does a shallow clone, but does not create a git repocustom: enter your custom git clone command. We will prompt you for it. You can write something likegit clone --depth 10, and we will append the repository URL and destination directory.
Value should be one of npm, yarn, or pnpm. If it's not explicitly provided, Docusaurus will infer one based on:
- The lockfile already present in the CWD (e.g. if you are setting up website in an existing project)
- The command used to invoke
create-docusaurus(e.g.npm init,npx,yarn create, etc.) - Interactive prompting, in case all heuristics are not present
If provided, Docusaurus will not automatically install dependencies after creating the app. The --package-manager option is only useful when you are actually installing dependencies.
https://www.hostingadvice.com/how-to/update-npm-packages/
npm outdated
Output
Package Current Wanted Latest Location Depended by
@docusaurus/core 2.0.1 2.0.1 2.1.0 node_modules/@docusaurus/core docusaurus-classic-site
@docusaurus/module-type-aliases 2.0.1 2.0.1 2.1.0 node_modules/@docusaurus/module-type-aliases docusaurus-classic-site
@docusaurus/preset-classic 2.0.1 2.0.1 2.1.0 node_modules/@docusaurus/preset-classic docusaurus-classic-site
@mdx-js/react 1.6.22 1.6.22 2.1.3 node_modules/@mdx-js/react docusaurus-classic-site
react 17.0.2 17.0.2 18.2.0 node_modules/react docusaurus-classic-site
react-dom 17.0.2 17.0.2 18.2.0 node_modules/react-dom docusaurus-classic-site
typescript 4.7.4 4.8.4 4.8.4 node_modules/typescript docusaurus-classic-site
npm update
Output
added 12 packages, removed 4 packages, changed 85 packages, and audited 1094 packages in 1m
197 packages are looking for funding
run `npm fund` for details
21 vulnerabilities (8 moderate, 13 high)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image