Vuepress 시작하기

Vuepress 란?

간단하게 정의 하면 "Vue기반으로 정적 사이트를 생성해주는 도구!"
정적 사이트의 자세한 개념은 넘어 가겠습니돠. 나도 잘 몰라서....😅

Vuepress 이 외 정적사이트 생성기는
1. Gatsby(React)
2. Hugo(Go)
3. Hexo(Javascript)
4. Jekyll(Ruby)
5. Gridsome(Vue)
6. GitBook(Javascript)
이 외에도 다양하게 있다.

 

Vuepress프로젝트 생성하기

Vuepress프로젝트 생성방법은 총 2가지가 있다.

1. Quick Start
   • Vuepress프로젝트 생성과 동시에 기본적인 구조를 자동 생성해주는 방법
2. Manual Installation
   • 직접 구조를 처음부터 만드는 방법

 

Manual Installation 방법

폴더생성

1. 먼저, 폴더를 생성한다.
2. 현재 예제에서는 "blog"폴더를 생성 했다.

 

설치

npm init

1. 당연! 위에서 생성한 blog폴더에서 터미널을 열고 위 npm init명령어를 입력 해야 된다.
2. 가~~끔 엉뚱한 곳에서 명령어 치고 안된다고 삽질 해본적이 있오소.....🙃

 

package.json에 script추가

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "vuepress dev --port 8000",
  "build": "vuepress build"
},

 

Vuepress 첫번째 문서 생성

# VuePress Starter!!
index page 입니다.

1. blog폴더 아래에 index.md파일을 만든다
2. 위 내용을 작성 한다
3. npm run dev로 vuepress를 실행 시킨다
4. 8000번호로 접속하면 첫문서가 만들어진다

 

지금까지 폴더 구조

. blog
  ├─ node_modules
  ├─ index.md
  ├─ package-lock.json
  └─ package.json