diff --git a/docs/getting-started-installation.md b/docs/getting-started-installation.md index 5d3de40990..f38f3069d1 100644 --- a/docs/getting-started-installation.md +++ b/docs/getting-started-installation.md @@ -24,6 +24,7 @@ root-of-repo │ └── 2016-03-11-blog-post.md │ └── 2017-04-10-blog-post-two.md │ └── core +│ └── Footer.js │ └── node_modules │ └── package.json │ └── pages diff --git a/docs/getting-started-preparation.md b/docs/getting-started-preparation.md index 38fe4b7337..71868a9ff4 100644 --- a/docs/getting-started-preparation.md +++ b/docs/getting-started-preparation.md @@ -3,57 +3,33 @@ id: site-preparation title: Site Preparation --- -After [installing Docusaurus](getting-started-installation.md), you will want to install and run the example site included. This serves dual purposes. +After [installing Docusaurus](getting-started-installation.md), you now have a skeleton to work from for your specific website. With a few changes, you can verify that Docusaurus was installed correctly by running the site locally. -1. Verifying that Docusaurus was installed correctly. -1. Providing you the skeleton to create your site. +## Directory Structure -## Verifying Installation - -1. Generate the files for the example site by running `examples` using `yarn` or `npm`. - - ``` - npm run examples - ``` - - or - - ``` - yarn run examples - ``` - - > If any of the files created by `[yarn | npm] run examples` already exists, Docusaurus will not overwrite them. - -1. Run the server. - - ``` - npm run start - ``` - - or - - ``` - yarn run start - ``` - -1. Load the example site at http://localhost:3000. You should see the example site loaded in your web browser. - -## Example Site Configuration - -Loading the example site will create the following files/folders: +As shown after you [installed Docusaurus](getting-started-installation.md), the initialization script created a directory structure similar to: +```bash +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 ``` -website/core/Footer.js -website/pages/... -website/static/img/... -website/siteConfig.js -website/blog-examples-from-docusaurus/... -docs-examples-from-docusaurus/... -``` - -> The `docs-examples-from-docusaurus` folder will be at the same directory level as `website`, not in it. - -The provided example files contain configurations that can be used as starting points for your site: - The `website/core/Footer.js` file is a React component that acts as the footer for the site generated by Docusaurus and should be customized by the user. - The `website/blog-examples-from-docusaurus` folder contains examples of blog posts written in markdown. @@ -66,4 +42,16 @@ You will need to keep the `website/siteConfig.js` and `website/core/Footer.js` f You should keep the `website/pages` and `website/static` folders, but may change the content inside them as you wish. At the bare minimum you should have an `en/index.js` or `en/index.html` file inside `website/pages` and an image to use as your header icon inside `website/static`. -The `website/blog-examples-from-docusaurus` and `docs-examples-from-docusaurus` folders contain example blog and document markdown files. If you wish to run Docusaurus with these files, you need to rename the folders to `website/blog` and `docs`, respectively. +The `website/blog-examples-from-docusaurus` and `docs-examples-from-docusaurus` folders contain example blog and document markdown files. As shown below when you verify that the example site runs correctly, if you wish to run Docusaurus with these files, you need to rename the folders to `website/blog` and `docs`, respectively. + +## Verifying Installation + +Running the Docusaurus initialization script, `docusaurus-init`, produces a runnable, example website to base your site upon. + +1. In your root, rename `docs-examples-from-docusaurus` to `docs`. +1. `cd website` +1. Rename `blog-examples-from-docusaurus` to `blog`. +1. Run the local webserver via `yarn run start` or `npm run start`. +1. Load the example site at http://localhost:3000. You should see the example site loaded in your web browser. + +![](/img/getting-started-preparation-verify.png) diff --git a/package-lock.json b/package-lock.json index 6158cf0afc..39fbe46d41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "docusaurus", - "version": "1.0.0-beta.5", + "version": "1.0.0-beta.8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 05773f01d9..a67baed2f2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "scripts": { - "test": "true" - }, + "test": "true" + }, "dependencies": { "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", diff --git a/website/static/img/getting-started-preparation-verify.png b/website/static/img/getting-started-preparation-verify.png new file mode 100644 index 0000000000..b79dfc75d6 Binary files /dev/null and b/website/static/img/getting-started-preparation-verify.png differ