diff --git a/blog/2017/12/14/introducing-docusaurus.html b/blog/2017/12/14/introducing-docusaurus.html index 8b63fa0058..406c2c6ec2 100644 --- a/blog/2017/12/14/introducing-docusaurus.html +++ b/blog/2017/12/14/introducing-docusaurus.html @@ -30,43 +30,43 @@

When you run docusaurus-init, you will see a structure similar to:

root-of-repo
 ├── docs-examples-from-docusaurus
-│ └── doc1.md
-│ └── doc2.md
-│ └── doc3.md
-│ └── exampledoc4.md
-│ └── exampledoc5.md
-└── website
-│ └── blog-examples-from-docusaurus
-│     └── 2016-03-11-blog-post.md
-│     └── 2017-04-10-blog-post-two.md
-│ └── core
-│     └── Footer.js
-│ └── node_modules
-│ └── package.json
-│ └── pages
-│ └── sidebars.json
-│ └── siteConfig.js
-│ └── static
+│   ├── doc1.md
+│   ├── doc2.md
+│   ├── doc3.md
+│   ├── exampledoc4.md
+│   └── exampledoc5.md
+├── website
+│   ├── blog-examples-from-docusaurus
+│   │   ├── 2016-03-11-blog-post.md
+│   │   └── 2017-04-10-blog-post-two.md
+│   ├── core
+│   │   └── Footer.js
+│   ├── node_modules
+│   ├── package.json
+│   ├── pages
+│   ├── sidebars.json
+│   ├── siteConfig.js
+│   └── static

With the exception of node_modules and package.json, all the directories and files you see are where you customize and add content to your Docusaurus-based website. The docs folder is where you add your markdown that represents your documentation; the blog folder is where you add your markdown for your blog posts; siteConfig.js is where you make most of the customizations for your site; sidebars.json is where you maintain the layout and content of the sidebar for your documentation; the pages folder is where you add custom pages for your site; the static folder is where all of your static assets go (e.g., css stylesheets and images); and the core folder is where you can customize core components of the site, in this case the footer.

How does Docusaurus work?

Docusaurus is written primarily in JavaScript and React, replacing the Jekyll we had in the old template. We use Remarkable for our markdown rendering and highlight.js for our code block syntax highlighting. The core of Docusaurus' functionality is in the lib directory of the Docusaurus repo. The general structure looks like:

root-of-Docusaurus
 ├── lib
-│ └── core
-│ └── server
-│     └── generate.js
-│     └── server.js
-│     └── ...and more files
-│ └── static
-│ └── build-files.js
-│ └── copy-examples.js
-│ └── generate-feed.js
-│ └── publish-gh-pages.js
-│ └── rename-version.js
-│ └── start-server.js
-│ └── versions.js
-│ └── write-translations.js
+│   ├── core
+│   ├── server
+│   │   ├── generate.js
+│   │   ├── server.js
+│   │   └── ...and more files
+│   ├── static
+│   ├── build-files.js
+│   ├── copy-examples.js
+│   ├── generate-feed.js
+│   ├── publish-gh-pages.js
+│   ├── rename-version.js
+│   ├── start-server.js
+│   ├── versions.js
+│   └── write-translations.js

The key files here are build-files.js and start-server.js. There are many similarities between these two files: build-files.js is used to build the physical artifacts for serving by an external web server. start-server.js is used to run the Docusaurus server and locally test your site. Both go through the following general process to take all of the markdown and configuration to create a runnable website:

    @@ -86,16 +86,16 @@

    The final structure of your compiled site will look similar to:

    build
 ├── website
-│ └── CNAME
-│ └── blog
-│ └── css
-│ └── docs
-│ └── en
-│ └── help.html # custom page
-│ └── img
-│ └── index.html # landing page
-│ └── sitemap.xml
-│ └── users.html # custom page
+│   ├── CNAME
+│   ├── blog
+│   ├── css
+│   ├── docs
+│   ├── en
+│   ├── help.html # custom page
+│   ├── img
+│   ├── index.html # landing page
+│   ├── sitemap.xml
+│   └── users.html # custom page

    Community

    Docusaurus

    diff --git a/docs/en/next/custom-pages.html b/docs/en/next/custom-pages.html index 4e5f06e311..bb5fc2ee69 100644 --- a/docs/en/next/custom-pages.html +++ b/docs/en/next/custom-pages.html @@ -12,18 +12,18 @@

    Docusaurus provides some simple example pages in the website/pages/en directory, including index.js, users.js, and help.js. These are good examples to showcase how to create a custom page for Docusaurus.

    root-of-repo
 ├── docs
-└── website
-│   └── blog
-│   └── core
-│       └── Footer.js
-│   └── node_modules
-│   └── package.json
-│   └── pages
-│       └── index.js
-│       └── users.js
-│       └── help.js
-│   └── sidebars.json
-│   └── siteConfig.js
+├── website
+│   ├── blog
+│   ├── core
+│   │   └── Footer.js
+│   ├── node_modules
+│   ├── package.json
+│   ├── pages
+│   │   ├── index.js
+│   │   ├── users.js
+│   │   └── help.js
+│   ├── sidebars.json
+│   ├── siteConfig.js
 │   └── static

    Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found here. Information on how to link to your different pages in the header navigation bar can be found here.

    diff --git a/docs/en/next/installation.html b/docs/en/next/installation.html index e22f35e614..7a5fff4363 100644 --- a/docs/en/next/installation.html +++ b/docs/en/next/installation.html @@ -23,22 +23,22 @@

    Along with previously existing files and directories, your root directory will now contain a structure similar to:

    root-of-repo
 ├── docs-examples-from-docusaurus
-│   └── doc1.md
-│   └── doc2.md
-│   └── doc3.md
-│   └── exampledoc4.md
+│   ├── doc1.md
+│   ├── doc2.md
+│   ├── doc3.md
+│   ├── exampledoc4.md
 │   └── exampledoc5.md
-└── website
-│   └── blog-examples-from-docusaurus
-│       └── 2016-03-11-blog-post.md
-│       └── 2017-04-10-blog-post-two.md
-│   └── core
-│       └── Footer.js
-│   └── node_modules
-│   └── package.json
-│   └── pages
-│   └── sidebars.json
-│   └── siteConfig.js
+├── website
+│   ├── blog-examples-from-docusaurus
+│   │   ├── 2016-03-11-blog-post.md
+│   │   └── 2017-04-10-blog-post-two.md
+│   ├── core
+│   │   └── Footer.js
+│   ├── node_modules
+│   ├── package.json
+│   ├── pages
+│   ├── sidebars.json
+│   ├── siteConfig.js
 │   └── static

    Running the Docusaurus initialization script, docusaurus-init, produces a runnable, example website to base your site upon.

    diff --git a/docs/en/next/site-creation.html b/docs/en/next/site-creation.html index 2c398cabec..3d3bfcd877 100644 --- a/docs/en/next/site-creation.html +++ b/docs/en/next/site-creation.html @@ -10,15 +10,15 @@

    Your site structure looks like the following:

    root-of-repo
 ├── docs
-└── website
-│   └── blog
-│   └── core
-│       └── Footer.js
-│   └── node_modules
-│   └── package.json
-│   └── pages
-│   └── sidebars.json
-│   └── siteConfig.js
+├── website
+│   ├── blog
+│   ├── core
+│   │   └── Footer.js
+│   ├── node_modules
+│   ├── package.json
+│   ├── pages
+│   ├── sidebars.json
+│   ├── siteConfig.js
 │   └── static
    diff --git a/docs/en/next/site-preparation.html b/docs/en/next/site-preparation.html index 4d6713d61a..f41aba6f83 100644 --- a/docs/en/next/site-preparation.html +++ b/docs/en/next/site-preparation.html @@ -9,22 +9,22 @@

    As shown after you installed Docusaurus, the initialization script created a directory structure similar to:

    root-of-repo
 ├── docs-examples-from-docusaurus
-│   └── doc1.md
-│   └── doc2.md
-│   └── doc3.md
-│   └── exampledoc4.md
+│   ├── doc1.md
+│   ├── doc2.md
+│   ├── doc3.md
+│   ├── exampledoc4.md
 │   └── exampledoc5.md
-└── website
-│   └── blog-examples-from-docusaurus
-│       └── 2016-03-11-blog-post.md
-│       └── 2017-04-10-blog-post-two.md
-│   └── core
-│       └── Footer.js
-│   └── node_modules
-│   └── package.json
-│   └── pages
-│   └── sidebars.json
-│   └── siteConfig.js
+├── website
+│   ├── blog-examples-from-docusaurus
+│   │   ├── 2016-03-11-blog-post.md
+│   │   └── 2017-04-10-blog-post-two.md
+│   ├── core
+│   │   └── Footer.js
+│   ├── node_modules
+│   ├── package.json
+│   ├── pages
+│   ├── sidebars.json
+│   ├── siteConfig.js
 │   └── static