3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-09 23:27:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: add versioning to tutorial (#1413)

Browse source 
* docs: add versioning to tutorial

* docs: address Endilie's comments
This commit is contained in:
Yangshun Tay 2019-04-29 09:51:42 -07:00 • committed by GitHub
parent 6f16335fa9
commit 2fe73edc22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 118 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

20
docs/tutorial-create-pages.md
View file

@ -5,7 +5,7 @@ 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" class="docImage"/>
<img alt="Docusaurus MacBook" src="/img/undraw_docusaurus_tree.svg" class="docImage"/>
## Creating a Regular Page
@ -33,9 +33,14 @@ function HelloWorld(props) {
module.exports = HelloWorld;
```
2. Go to http://localhost:3000/hello-world (TODO) and you should be able to see the new page.
2. Go to http://localhost:3000/hello-world 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.
```diff
- <p>This is my first page!</p>
+ <p>I'm at F8!</p>
```
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).
<img alt="Docusaurus React" src="/img/undraw_docusaurus_react.svg" class="docImage"/>
@ -58,13 +63,15 @@ Hello F8! I'm at the Docusaurus classroom session!
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"`.
3. Go to `sidebars.json` and add `"f8"` after `"doc1"`. This ID should be the same one as in the Markdown file above.
```diff
{
"docs": {
+ "Docusaurus": ["doc1", "f8"],
- "Docusaurus": ["doc1"],
"Docusaurus": [
"doc1",
+ "f8"
],
"First Category": ["doc2"],
"Second Category": ["doc3"]
},
@ -74,7 +81,8 @@ In this session, we learned how Docusaurus makes it really simple to create a we
}
```
4. Navigate to http://localhost:3000/docs/f8. (TODO)
4. Kill your webserver (<kbd>Cmd</kbd> + <kbd>C</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>) and restart it (with `npm run start`) because a server restart is needed for sidebar changes.
5. Navigate to http://localhost:3000/docs/f8.
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.