feat: add tutorial (#1381)

* feat: add tutorial

* feat: complete tutorial

* Fix link

docs/tutorial-create-new-site.md

@@ -0,0 +1,62 @@
+---
+id: tutorial-create-new-site
+title: Create a New Site
+---
+
+In this section we'll get our Docusaurus site up and running for local development. The process takes less than a few minutes.
+
+<img alt="Docusaurus browser" src="/img/undraw_docusaurus_browser.svg" style="max-width: 400px; margin: 3rem auto"/>
+
+## Scaffold the Site
+
+1. Execute the `docusaurus-init` command.
+
+The following contents will be created for you in the directory you are in (TODO).
+
+```sh
+├── Dockerfile
+├── docker-compose.yml
+├── docs-examples-from-docusaurus
+│   ├── doc1.md
+│   ├── doc2.md
+│   ├── doc3.md
+│   ├── exampledoc4.md
+│   └── exampledoc5.md
+└── website
+    ├── README.md
+    ├── blog-examples-from-docusaurus
+    │   ├── 2016-03-11-blog-post.md
+    │   ├── 2017-04-10-blog-post-two.md
+    │   ├── 2017-09-25-testing-rss.md
+    │   ├── 2017-09-26-adding-rss.md
+    │   └── 2017-10-24-new-version-1.0.0.md
+    ├── core
+    │   └── Footer.js
+    ├── package.json
+    ├── pages
+    │   └── en
+    │       ├── help.js
+    │       ├── index.js
+    │       └── users.js
+    ├── sidebars.json
+    ├── siteConfig.js
+    ├── static
+    │   ├── css
+    │   │   └── custom.css
+    │   └── img
+    │       ├── docusaurus.svg
+    │       ├── favicon
+    │       │   └── favicon.ico
+    │       ├── favicon.png
+    │       └── oss_logo.png
+    └── yarn.lock
+```
+
+There would be some example documentation and blog pages generated.
+
+2. Run `cd website` to go into the `website` directory.
+1. Run `npm start` or `yarn start`.
+
+A browser window will open up at http://localhost:3000.
+
+Congratulations, you have just made your first Docusaurus site! Click around the pages generated for you to see what's available.

docs/tutorial-create-pages.md

@@ -0,0 +1,81 @@
+---
+id: tutorial-create-pages
+title: Create Pages
+---
+
+In this section we will learn about creating two new types of pages in Docusaurus, a regular page and a documentation page.
+
+<img alt="Docusaurus process" src="/img/undraw_docusaurus_process.svg" style="max-width: 400px; margin: 3rem auto"/>
+
+## Creating a Regular Page
+
+1. Go into the `pages/en` directory and create a file called `hello-world.js` with the following contents:
+
+```
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+function HelloWorld(props) {
+  return (
+    <div className="docMainWrapper wrapper">
+      <Container className="mainContainer documentContainer postContainer">
+        <h1>Hello World!</h1>
+        <p>This is my first page!</p>
+      </Container>
+    </div>
+  );
+}
+
+module.exports = HelloWorld;
+```
+
+2. Go to http://localhost:3000/hello-world (TODO) and you should be able to see the new page.
+1. Change the text within the `<p>...</p>` to "I'm at F8!". The browser should refresh automatically to reflect the changes.
+
+React is being used as a templating engine for rendering static markup. You can leverage on the expressability of React to build rich web content. Learn more about creating pages [here](custom-pages).
+
+![Docusaurus React](/img/undraw_docusaurus_react.svg)
+
+## Create a Documentation Page
+
+1. Create a new file in the `docs` folder called `f8.md`.
+1. Paste the following contents:
+
+```
+---
+id: f8
+title: Hello F8
+---
+
+Hello F8! I'm at the Docusaurus classroom session!
+
+## Using Docusaurus to Create Open Source Websites
+
+In this session, we learned how Docusaurus makes it really simple to create a website for open source project documentation and get hands on by creating a Docusaurus website.
+```
+
+3. Go to `sidebars.json` and add `"f8"` after `"doc1"`.
+
+```diff
+{
+  "docs": {
++    "Docusaurus": ["doc1", "f8"],
+-    "Docusaurus": ["doc1"],
+    "First Category": ["doc2"],
+    "Second Category": ["doc3"]
+  },
+  "docs-other": {
+    "First Category": ["doc4", "doc5"]
+  }
+}
+```
+
+4. Navigate to http://localhost:3000/docs/f8. (TODO)
+
+You've created your first documentation page on Docusaurus! The `sidebars.json` is where you specify the order of your documentation pages and in the front matter of the Markdown file is where you provide metadata about that page.
+
+Learn more about creating docs pages [here](navigation).

docs/tutorial-publish-site.md

@@ -0,0 +1,34 @@
+---
+id: tutorial-publish-site
+title: Publish the Site
+---
+
+<img alt="Docusaurus Facebook" src="/img/undraw_docusaurus_fb.svg" style="max-width: 300px; margin: 3rem auto"/>
+
+Next we'll learn how to publish the site to the WWW for everyone to browse! For the purpose of the tutorial, we'll use GitHub pages to host our website. But you can use any static file hosting service that you want, e.g. Netlify, Amazon S3, etc.
+
+## Put the Site Online
+
+In to `website/siteConfig.js`, fill in the following fields:
+
+```
+const siteConfig = {
+  ...
+  url: 'https://USERNAME.github.io', // Replace USERNAME with your GitHub username.
+  baseUrl: '/docusaurus-tutorial/', // The name of your GitHub project.
+  projectName: 'docusaurus-tutorial',  // The name of your GitHub project. Same as above.
+  organizationName: 'USERNAME' // Your GitHub username.
+  ...
+}
+```
+
+2. In the `website` directory, run `npm run build` or `yarn build`. This will generate a `build` directory inside the `website` directory containing the `.html` files from all of your docs and other pages included in `pages`. Make sure the `build` directory is there before running the next step.
+3. Replace `<GIT_USER>` with your GitHub username and run the following command.
+
+```
+$ GIT_USER=<GIT_USER> CURRENT_BRANCH=master USE_SSH=true npm run publish-gh-pages
+```
+
+The built code will be pushed to the `gh-pages` branch of your repository.
+
+4. Go to `https://USERNAME.github.io/docusaurus-tutorial/` and view your site in action!

docs/tutorial-setup.md

@@ -0,0 +1,74 @@
+---
+id: tutorial-setup
+title: Setting Up
+---
+
+This tutorial is geared at first-time users who want detailed instructions on how to go from zero to a Docusaurus that is versioned. Let's start!
+
+<img alt="Docusaurus campfire" src="/img/undraw_docusaurus_mountain.svg" style="max-width: 600px; margin: 3rem auto"/>
+
+## Install Node.js
+
+Node.js is an environment that can run JavaScript code outside of a web browser and is used to write and run server-side JavaScript apps.
+
+> Docusaurus' minimum supported Node.js version is Node 8, but more recent versions will work as well.
+
+1. Open your Terminal.
+1. Run the following command to install Node and `npm` the package manager that allows you to install npm modules from your terminal.
+
+```sh
+brew install node
+```
+
+Alternatively, you can download an installer from the [Node.js homepage][https://nodejs.org/en/].
+
+## Check your Node.js installation
+
+Check that you have the minimum required version installed by running the following command:
+
+```sh
+node -v
+```
+
+You should see a version larger than Node 8.
+
+```sh
+node -v
+v8.15.1
+```
+
+## Install Yarn (Optional)
+
+We highly recommend you to install Yarn, an alternative package manager that has superb performance for managing your NPM dependencies. Check it out [here](https://yarnpkg.com/en/docs/install).
+
+> You can still proceed with the tutorial without Yarn.
+
+## Create a GitHub Repository
+
+1. Go to https://github.com/ and sign up for an account if you don't already have one.
+1. Click on **"New Repository"** or go to https://github.com/new.
+1. Name your repository without spaces. For e.g. `docusaurus-tutorial`.
+1. Proceed to create the repository without adding `.gitignore` or a license.
+1. Clone your repository to your local machine:
+
+```sh
+git clone git@github.com:USERNAME/docusaurus-tutorial.git
+```
+
+6. `cd` into the repository which you just created.
+
+## Install the Docusaurus init command
+
+Docusaurus comes with a command line tool to help you scaffold a Docusaurus site with some example templates. Let's install the installer!
+
+1. Run the following command:
+
+```sh
+npm install --global docusaurus-init
+```
+
+or if you have Yarn:
+
+```sh
+yarn global add docusaurus-init
+```

website-1.x/sidebars.json

@@ -21,5 +21,13 @@
       "api-pages",
       "site-config"
     ]
+  },
+  "tutorial": {
+    "Tutorial": [
+      "tutorial-setup",
+      "tutorial-create-new-site",
+      "tutorial-create-pages",
+      "tutorial-publish-site"
+    ]
   }
 }

website-1.x/siteConfig.js

@@ -21,6 +21,7 @@ const siteConfig = {
   editUrl: 'https://github.com/facebook/docusaurus/edit/master/docs/',
   headerLinks: [
     {doc: 'installation', label: 'Docs'},
+    {href: '/docs/en/next/tutorial-setup', label: 'Tutorial'},
     {page: 'help', label: 'Help'},
     {page: 'users', label: 'Users'},
     {page: 'about-slash', label: 'About /'},