Hello VuePress in Mac OS

Install Yarn

우선 Yarn을 이용하는 것이 요즘 대세이더군요. 그래서 Yarn을 설치해 주도록 합니다.

# npm 없을 때
curl -o- -L https://yarnpkg.com/install.sh | bash

# npm 있을 때
npm install -g yarn

이제 설치가 되어서 지금 사용하고 있는 콘솔에서는 yarn 명령이 듣지 않을 테니 콘솔을 끄고 다시 새로 열어서 작업해 주도록 해야 합니다. 이때 yarn 명령이 제대로 동장하는지 확인 하기 위해 which yarn명령을 사용해 yarn의 설치 경로가 나타나면 정상 작동 하는 것입니다.

정상적으로 설치가 되었다면, 자신이 사용할 디렉토리를 정하고 해당 디렉토리로 이동(cd {project_root}) 합니다. 이제 본격적으로 vuepress를 설치하고 정상설치 되었는지 확인하는 작업을 합니다.

Install VuePress Preject

# 뷰프레스를 어디서든 접근 가능하게 global 옵션으로 설치합니다.
yarn global add vuepress # OR npm install -g vuepress

# README.md 파일을 작성한다.
echo '# Hello VuePress' > README.md

# 개발용 서버를 시작합니다.
vuepress dev

정상 실행이 되었다면 아래와 같은 문구가 나옵니다.

success [20:41:23] Build 8b6f7a finished in 108 ms! ( http://localhost:8080/ )

이는 서버가 실행되고 있다는 것이고 이 상태에서 Ctrl + C를 눌러 종료 할 수 있습니다. 종료 시키기 전에는 http://localhost:8080 주소로 접속해 정상적으로 웹이 나타나는지 확인하실 수 있습니다. 그럼 이제 종료 하시고 결과 파일을 만들어 보겠습니다.

# build
vuepress build

이와 같은 정상적인 결과를 받으셨다면 {project dir}/.vuepress/dist 경로에 만들어진 파일들을 확인하실 수 있습니다.

Inside an Existing Project

기존 프로젝트가 있고 프로젝트 내부에 설명서를 보관하려면 VuePress를 로컬 종속성으로 설치하십시오. 또한 이 설정을 통해 CI 또는 Netliify와 같은 서비스를 푸시 시 자동 배포에 사용할 수 있습니다.

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir blog

# create a markdown file
echo '# Hello VuePress' > docs/README.md

현재 webpack 3.x가 있는 기존 프로젝트에 VuePress를 종속성으로 설치할 때, npm이 올바른 종속성 트리를 생성하지 못하므로 이 경우 NPM 대신 YARN을 사용하는 것이 좋습니다.

그리고 package.json 파일에 다음과 같은 내용을 추가해 주셔야 합니다.

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

이제 다음 명령으로 내부 프로젝트를 실행 시킬 수 있습니다.

yarn docs:dev # OR npm run docs:dev

빌드도 마찬가지로 이와 같이 실행할 수 있죠.

yarn docs:build # OR npm run docs:build