194 lines
4.0 KiB
Markdown
194 lines
4.0 KiB
Markdown
This website was created with [Docusaurus](https://docusaurus.io/).
|
|
|
|
# What's In This Document
|
|
|
|
* [Get Started in 5 Minutes](#get-started-in-5-minutes)
|
|
* [Directory Structure](#directory-structure)
|
|
* [Editing Content](#editing-content)
|
|
* [Adding Content](#adding-content)
|
|
* [Full Documentation](#full-documentation)
|
|
|
|
# Get Started in 5 Minutes
|
|
|
|
1. Make sure all the dependencies for the website are installed:
|
|
|
|
```sh
|
|
# Install dependencies
|
|
$ yarn
|
|
```
|
|
2. Run your dev server:
|
|
|
|
```sh
|
|
# Start the site
|
|
$ yarn start
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
Your project file structure should look something like this
|
|
|
|
```
|
|
my-docusaurus/
|
|
docs/
|
|
doc-1.md
|
|
doc-2.md
|
|
doc-3.md
|
|
website/
|
|
blog/
|
|
2016-3-11-oldest-post.md
|
|
2017-10-24-newest-post.md
|
|
core/
|
|
node_modules/
|
|
pages/
|
|
static/
|
|
css/
|
|
img/
|
|
package.json
|
|
sidebar.json
|
|
siteConfig.js
|
|
```
|
|
|
|
# Editing Content
|
|
|
|
## Editing an existing docs page
|
|
|
|
Edit docs by navigating to `docs/` and editing the corresponding document:
|
|
|
|
`docs/doc-to-be-edited.md`
|
|
|
|
```markdown
|
|
---
|
|
id: page-needs-edit
|
|
title: This Doc Needs To Be Edited
|
|
---
|
|
|
|
Edit me...
|
|
```
|
|
|
|
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
## Editing an existing blog post
|
|
|
|
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
|
|
|
|
`website/blog/post-to-be-edited.md`
|
|
```markdown
|
|
---
|
|
id: post-needs-edit
|
|
title: This Blog Post Needs To Be Edited
|
|
---
|
|
|
|
Edit me...
|
|
```
|
|
|
|
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
|
|
|
# Adding Content
|
|
|
|
## Adding a new docs page to an existing sidebar
|
|
|
|
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
|
|
|
```md
|
|
---
|
|
id: newly-created-doc
|
|
title: This Doc Needs To Be Edited
|
|
---
|
|
|
|
My new content here..
|
|
```
|
|
|
|
1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
|
|
|
|
```javascript
|
|
// Add newly-created-doc to the Getting Started category of docs
|
|
{
|
|
"docs": {
|
|
"Getting Started": [
|
|
"quick-start",
|
|
"newly-created-doc" // new doc here
|
|
],
|
|
...
|
|
},
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
## Adding a new blog post
|
|
|
|
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
|
|
|
|
`website/siteConfig.js`
|
|
```javascript
|
|
headerLinks: [
|
|
...
|
|
{ blog: true, label: 'Blog' },
|
|
...
|
|
]
|
|
```
|
|
|
|
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
|
|
|
|
`website/blog/2018-05-21-New-Blog-Post.md`
|
|
|
|
```markdown
|
|
---
|
|
author: Frank Li
|
|
authorURL: https://twitter.com/foobarbaz
|
|
authorFBID: 503283835
|
|
title: New Blog Post
|
|
---
|
|
|
|
Lorem Ipsum...
|
|
```
|
|
|
|
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
|
|
|
## Adding items to your site's top navigation bar
|
|
|
|
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
|
|
|
|
`website/siteConfig.js`
|
|
```javascript
|
|
{
|
|
headerLinks: [
|
|
...
|
|
/* you can add docs */
|
|
{ doc: 'my-examples', label: 'Examples' },
|
|
/* you can add custom pages */
|
|
{ page: 'help', label: 'Help' },
|
|
/* you can add external links */
|
|
{ href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
|
|
...
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
## Adding custom pages
|
|
|
|
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
|
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
|
|
|
`website/siteConfig.js`
|
|
```javascript
|
|
{
|
|
headerLinks: [
|
|
...
|
|
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
|
...
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
|
|
|
|
# Full Documentation
|
|
|
|
Full documentation can be found on the [website](https://docusaurus.io/).
|