Skip to content

Commit

Permalink
docs: update getting started experience (#2576)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
bencodezen authored Aug 22, 2020
1 parent 6b25140 commit 0e78453
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 43 deletions.
35 changes: 16 additions & 19 deletions packages/docs/docs/guide/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
# Getting Started

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

- [Node.js 10+](https://nodejs.org/en/)
- [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-site generator](https://github.com/vuepressjs/create-vuepress-site/) which will help scaffold the basic VuePress site structure for you.

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

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

You will be prompted to choose which boilerplate you prefer. For most users, the `docs` boilerplate is what you will want.

You will then have the opportunity to configure your VuePress site’s metadata such as:

- Project Name
Expand All @@ -27,43 +28,39 @@ 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
## 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 +71,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.
:::

0 comments on commit 0e78453

Please sign in to comment.