Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update getting started experience #2576

Merged
merged 8 commits into from
Aug 22, 2020
Merged
39 changes: 24 additions & 15 deletions packages/docs/docs/guide/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
# Getting Started

::: warning Prerequisite
VuePress requires [Node.js](https://nodejs.org/en/) >= 8.6.
:::
## Prerequisites

- [Node.js](https://nodejs.org/en/) >= 8.6.
bencodezen marked this conversation as resolved.
Show resolved Hide resolved
- [Yarn Classic](https://classic.yarnpkg.com/en/) (Optional)\*

\* _If your project is using webpack 3.x, you may notice some installation issues with npm. In this case, we recommend using Yarn._

## Quick Start

The fastest way to get your VuePress project setup is to use our create-vuepress tool which will help scaffold the basic VuePress site structure for you.
The fastest way to get your VuePress project setup is to use our [create-vuepress tool](https://github.com/vuepressjs/create-vuepress/pulls) which will help scaffold the basic VuePress site structure for you.
bencodezen marked this conversation as resolved.
Show resolved Hide resolved

To use it, open up your terminal in the desired directory and run the following command:

Expand All @@ -27,43 +30,49 @@ You will then have the opportunity to configure your VuePress site’s metadata

Once it is complete, you should see your new VuePress site scaffolded in your directory! :tada:

## Manual Setup
At this time, you'll need to take one more step and update the VuePress version inside the generated project.

```bash
# Navigate into your newly created project
cd [directoryName]

# Update VuePress dependency
yarn add -D vuepress # npm install --save-dev vuepress
bencodezen marked this conversation as resolved.
Show resolved Hide resolved
```

## Manual Installation

This section will help you build a basic VuePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.

1. Create and change into a new directory

``` bash
```bash
mkdir vuepress-starter && cd vuepress-starter
```

2. Initialize with your preferred package manager

``` bash
```bash
yarn init # npm init
```

3. Install VuePress locally

``` bash
```bash
yarn add -D vuepress # npm install -D vuepress
```

::: warning
We currently recommend using [Yarn](https://classic.yarnpkg.com/lang/en/) instead of npm when installing VuePress into an existing project that has webpack 3.x as a dependency, because npm fails to generate the correct dependency tree in this case.
:::

4. Create your first document

``` bash
```bash
mkdir docs && echo '# Hello VuePress' > docs/README.md
```

5. Add some [scripts](https://classic.yarnpkg.com/en/docs/package-json#toc-scripts) to `package.json`

This step is optional but highly recommended, the rest of the documentation will assume those scripts being added.

``` json
```json
{
"scripts": {
"docs:dev": "vuepress dev docs",
Expand All @@ -74,7 +83,7 @@ This section will help you build a basic VuePress documentation site from ground

6. Serve the documentation site in the local server

``` bash
```bash
yarn docs:dev # npm run docs:dev
```

Expand Down
25 changes: 1 addition & 24 deletions packages/docs/docs/README.md → packages/docs/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
home: true
heroImage: /hero.png
actionText: Get Started →
actionLink: /guide/
actionLink: /guide/getting-started.html
footer: MIT Licensed | Copyright © 2018-present Evan You
---

Expand All @@ -24,26 +24,3 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
<p>VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.</p>
</div>
</div>

### As Easy as 1, 2, 3

``` bash
# Scaffold VuePress site
yarn create vuepress [directoryName]
# OR npx create-vuepress [directoryName]

# Navigate to your new VuePress directory
cd [directoryName]

# Start local dev server
yarn dev
# OR npm run dev

# Build static files
yarn build
# OR npm run build
```

::: warning COMPATIBILITY NOTE
VuePress requires Node.js >= 8.6.
:::