Skip to main content

Tutorial Intro

Let's discover Docusaurus and Github page.

Getting Started​

Get started by creating a personal site with docusaurus and creating a personal repository with Github page.

tip

Name of the repository must be username.github.io (username is GitHub user name).

Environment​

note

When installing Apps, you are recommended to check all checkboxes related to dependencies.

Generate a new site​

Generate a new Docusaurus site using the classic template.

The classic template will automatically be added to your project after you run the command:

npm init docusaurus@latest my-website classic

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

The command also installs all necessary dependencies you need to run Docusaurus.

Configure your site​

Modify the directory to my-website，input code . to open the workspace with the vscode.

cd my-website
code .

The cd command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.

Then, modify the docusaurus.config.js with vscode.

organizationName: 'xxx', // GitHub username

projectName: 'xxx.github.io', // GitHub repository name

deploymentBranch: 'main', // deploymentBranch of GitHub Page

trailingSlash: false,

Run the development server:

npm run start

The npm run start command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.

Open docs/intro.md (this page) and edit some lines: the site reloads automatically and displays your changes.

Create build​

npm run start

Deploy you site to github​

You can deploy the site on the github by the git, see the tutorial.

info

Sometimes, this way is difficult for the novice.

We also deploy the my-website/build to the repo by the github desktop, then you can view your personal website on the https://xxx.github.io/ (xxx isyour github username).