This website was created with Docusaurus.
# Install dependencies $ yarn
# 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 sidebars.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
/docs
, example docs/newly-created-doc.md
:--- id: newly-created-doc title: This Doc Needs To Be Edited --- My new content here..
website/sidebars.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
website/siteConfig.js
:website/siteConfig.js
headerLinks: [ ... { blog: true, label: 'Blog' }, ... ]
YYYY-MM-DD-My-Blog-Post-Title.md
in website/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
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/facebook/docusaurus', label: 'GitHub' }, ... ], ... }
For more information about the navigation bar, click here
website/pages/en
:website/siteConfig.js
to add to the headerLinks
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.