docs(v2): install, create pages, docs, deploy (#1522)

* docs(v2): install, create pages, docs, deploy

* docs(v2): Docs review changes for installation, create pages, docs,
deploy

* docs(v2): more docs!
This commit is contained in:
Endi 2019-05-29 15:08:06 +07:00 committed by Yangshun Tay
parent 9bb6ba113d
commit 404983c32b
7 changed files with 257 additions and 45 deletions

View file

@ -3,9 +3,56 @@ id: creating-pages
title: Creating Pages
---
TODO: Explain the default pages routing behavior and talk about the official pages plugin.
In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages.
#### References
### Creating Pages
- https://docusaurus.io/docs/en/custom-pages
- https://www.gatsbyjs.org/docs/creating-and-modifying-pages/
<!-- TODO: What will the user see if pages/ is empty? -->
In the `pages` directory, create a file called `hello.js` with the following contents:
```js
import React from 'react';
import Layout from '@theme/Layout';
function Hello() {
return (
<Layout title="Hello">
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50vh',
fontSize: '20px',
}}>
<p>
Edit <code>pages/hello.js</code> and save to reload.
</p>
</div>
</Layout>
);
}
export default Hello;
```
Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/hello, you will see the new page you just created.
Any file you create under `pages` directory will be automatically converted to a page, converting the directory hierarchy into paths. For example:
- `pages/index.js``<baseUrl>/`
- `pages/test.js``<baseUrl>/test`
- `pages/foo/test.js``<baseUrl>/foo/test`
- `pages/foo/index.js``<baseUrl>/foo`
### Using React
React is used as the UI library to create pages. You can leverage on the expressibility of React to build rich web content.
<!--
TODO:
- Explain that each page needs to be wrapped with `@theme/Layout`.
- That v2 is different from v1, users can write interactive components with lifecycles.
-->