This website was created with Docusaurus.
- Make sure all the dependencies for the website are installed:
# Install dependencies
$ yarn
- Run your dev server:
# Start the site
$ yarn start
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
Edit docs by navigating to docs/
and editing the corresponding document:
docs/doc-to-be-edited.md
---
id: page-needs-edit
title: This Doc Needs To Be Edited
---
Edit me...
For more information about docs, click here
Edit blog posts by navigating to website/blog
and editing the corresponding post:
website/blog/post-to-be-edited.md
---
id: post-needs-edit
title: This Blog Post Needs To Be Edited
---
Edit me...
For more information about blog posts, click here
- Create the doc as a new markdown file in
/docs
, exampledocs/newly-created-doc.md
:
---
id: newly-created-doc
title: This Doc Needs To Be Edited
---
My new content here..
- Refer to that doc's ID in an existing sidebar in
website/sidebar.json
:
// 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
- Make sure there is a header link to your blog in
website/siteConfig.js
:
website/siteConfig.js
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
- Create the blog post with the format
YYYY-MM-DD-My-Blog-Post-Title.md
inwebsite/blog
:
website/blog/2018-05-21-New-Blog-Post.md
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: New Blog Post
---
Lorem Ipsum...
For more information about blog posts, click here
- Add links to docs, custom pages or external links by editing the headerLinks field of
website/siteConfig.js
:
website/siteConfig.js
{
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/proximax-storage', label: 'GitHub' },
...
],
...
}
For more information about the navigation bar, click here
- Docusaurus uses React components to build pages. The components are saved as .js files in
website/pages/en
: - If you want your page to show up in your navigation header, you will need to update
website/siteConfig.js
to add to theheaderLinks
element:
website/siteConfig.js
{
headerLinks: [
...
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
...
],
...
}
For more information about custom pages, click here.
Full documentation can be found on the website.