Skip to content

Commit 0e78453

Browse files
authored
docs: update getting started experience (#2576)
* docs: bring user straight to the guide * docs: use index instead of README * docs: update CTA to go to get started guide * docs: add update step for generator and remove older warnings * docs: add warning for webpack 3 with less prominence * docs: update node prerequisite version * docs: fix link for create-vuepress * docs: remove upgrade step
1 parent 6b25140 commit 0e78453

File tree

2 files changed

+17
-43
lines changed

2 files changed

+17
-43
lines changed

packages/docs/docs/guide/getting-started.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
# Getting Started
22

3-
::: warning Prerequisite
4-
VuePress requires [Node.js](https://nodejs.org/en/) >= 8.6.
5-
:::
3+
## Prerequisites
4+
5+
- [Node.js 10+](https://nodejs.org/en/)
6+
- [Yarn Classic](https://classic.yarnpkg.com/en/) (Optional)\*
7+
8+
\* _If your project is using webpack 3.x, you may notice some installation issues with npm. In this case, we recommend using Yarn._
69

710
## Quick Start
811

9-
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.
12+
The fastest way to get your VuePress project setup is to use our [create-vuepress-site generator](https://github.com/vuepressjs/create-vuepress-site/) which will help scaffold the basic VuePress site structure for you.
1013

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

1316
```bash
14-
yarn create vuepress [directoryName]
15-
# OR npx create-vuepress [directoryName]
17+
yarn create vuepress-site [optionalDirectoryName]
18+
# OR npx create-vuepress-site [optionalDirectoryName]
1619
```
1720

18-
You will be prompted to choose which boilerplate you prefer. For most users, the `docs` boilerplate is what you will want.
19-
2021
You will then have the opportunity to configure your VuePress site’s metadata such as:
2122

2223
- Project Name
@@ -27,43 +28,39 @@ You will then have the opportunity to configure your VuePress site’s metadata
2728

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

30-
## Manual Setup
31+
## Manual Installation
3132

3233
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.
3334

3435
1. Create and change into a new directory
3536

36-
``` bash
37+
```bash
3738
mkdir vuepress-starter && cd vuepress-starter
3839
```
3940

4041
2. Initialize with your preferred package manager
4142

42-
``` bash
43+
```bash
4344
yarn init # npm init
4445
```
4546

4647
3. Install VuePress locally
4748

48-
``` bash
49+
```bash
4950
yarn add -D vuepress # npm install -D vuepress
5051
```
5152

52-
::: warning
53-
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.
54-
:::
55-
5653
4. Create your first document
5754

58-
``` bash
55+
```bash
5956
mkdir docs && echo '# Hello VuePress' > docs/README.md
6057
```
6158

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

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

66-
``` json
63+
```json
6764
{
6865
"scripts": {
6966
"docs:dev": "vuepress dev docs",
@@ -74,7 +71,7 @@ This section will help you build a basic VuePress documentation site from ground
7471

7572
6. Serve the documentation site in the local server
7673

77-
``` bash
74+
```bash
7875
yarn docs:dev # npm run docs:dev
7976
```
8077

packages/docs/docs/README.md renamed to packages/docs/docs/index.md

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
home: true
33
heroImage: /hero.png
44
actionText: Get Started →
5-
actionLink: /guide/
5+
actionLink: /guide/getting-started.html
66
footer: MIT Licensed | Copyright © 2018-present Evan You
77
---
88

@@ -24,26 +24,3 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
2424
<p>VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.</p>
2525
</div>
2626
</div>
27-
28-
### As Easy as 1, 2, 3
29-
30-
``` bash
31-
# Scaffold VuePress site
32-
yarn create vuepress [directoryName]
33-
# OR npx create-vuepress [directoryName]
34-
35-
# Navigate to your new VuePress directory
36-
cd [directoryName]
37-
38-
# Start local dev server
39-
yarn dev
40-
# OR npm run dev
41-
42-
# Build static files
43-
yarn build
44-
# OR npm run build
45-
```
46-
47-
::: warning COMPATIBILITY NOTE
48-
VuePress requires Node.js >= 8.6.
49-
:::

0 commit comments

Comments
 (0)