Vuepress란 무엇인가

1. SSG (Static Site Generator)이란?

JAM stack

• Javascript + APIs + Markup
• 자바스크립트: 클라이언트 요청 처리관리
• APIs: 데이터베이스, 서버 관련 기능 처리
• 마크업: SSG 등으로 마크업을 미리 만들어내는 것
• 장점
  • 백엔드 기술을 API로 분리하여 보안 취약점을 줄일 수 있다.
  • CDN을 통해 웹 성능이나 속도를 높일 수 있다.
• 잼스택 생태계가 커져가면서 정적 사이트 생성기 즉, SSG도 함께 성장하였다.

SSG의 개념

• 정적 페이지 기반 웹사이트를 만들어주는 도구
• 콘텐츠와 파일을 읽어 이를 HTML로 적절히 변환해주는 기술
• 마크다운으로 작성 → html로 만들어줌 → 서버로 올림 → 서버에서 전달
• 빠르다!

Static page vs Dynamic page

• 정적 페이지: 클라이언트가 요청을 보낸 후 서버는 따로 추가 처리 과정을 거치지 않는다. 모든 사용자들에게 개발자가 입력한 그대로의 웹사이트를 보여준다.
  • SSG를 이용해 구축할 수 있다.
• 동적 페이지: 클라이언트 요청 이후 서버에서 사용자 요청을 해석하여 데이터를 가져오거나 특정 기능을 수행한다. 그래서 같은 웹사이트 주소여도 사용자마자 보이는 콘텐츠가 다를 수 있다.
  • ex) SNS 댓글창, 쇼핑 검색 결과 등 사용자마자 다르게 보이는 웹사이트

SSG 오픈소스

• Jeykyll
  • Ruby 기반
  • 깃허브 페이지와 함께 사용하기 좋다.
  • 깃허브 창시자가 만들었다.
  • …github.io
• Hugo
  • Go 기반
  • 스티븐 프란시아가 개발 (2016년부터 구글에서 고 언어 제품 개발 진행 중)
  • 빠른 배포 속도
  • 여러 운영체제 지원
• Gatsby
  • React의 발전으로 퍼지고 있는 기술
  • 리액트 기반 웹사이트를 좀 더 쉽게 만들 수 있게 도와준다.
  • 데이터를 외부에서 가져오는 플러그인 기능 개발에 투자 중
  • GraphQL 적극 활용 중
• GitBook
  • 콘텐츠를 올리는 과정에서 git 원리를 적용
  • 주요 고객 = 개발자
  • 기술 번역 문서, API 문서, 사용자 매뉴얼, 개발 지식 등을 작성할 때 주로 활용된다.

Vuepress

---

설정 파일과 마크다운으로 작성된 글을 HTML로 변환해주는 오픈소스 Vue.js 기반의 SSG

• Vue.js 공식 도큐먼트 페이지가 vuepress로 만들어졌다.
• 마크다운을 사용하고 그 이외에는 사용 불가
• 매우 가볍고 렌더링 속도가 매우 빠르다.

설치

https://vuepress.vuejs.org/guide/getting-started.html#quick-start

1. 설치 커멘드
2. npx create-vuepress-site [optionDirectoryName]
3. 메타데이터 설정
   • Project Name
   • Description
   • Maintainer Email
   • Maintainer Name
   • Repository URL
4. 설치 완료
5. 실행
6. cd [optionDirectoryName] npm install npm run dev

• 기존 프로젝트에 추가 설치하기
  1. npm install -D vuepress
  2. docs/… 마크다운 파일 만들기
     • 특정 메뉴 아래 파일을 만들려고 하면 그 메뉴 폴더를 만들고 그 아래 md 파일을 만든다.
  3. package.json에 스크립트 추가하기
  4. { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
  5. 실행
  6. npm run docs:dev

주요 구성

• docs > .vuepress
  • components: 마크다운 글 작성시 사용할 HTML 구성 요소 정의 ex) 댓글
  • publics/assets: favicon, image 관리
  • styles/pallette.style: 텍스트, 바탕색 등 색깔 정의
  • config.js: 메뉴 구조 정의

    module.exports = {
    	base: '/레포지토리명/',
    }
    

  • https://유저명.github.io/리포지토리명/
• docs > README.md
  • 첫 페이지의 구조 정의
• .github > workflow > page.yml
  • github action (CI/CD pipeline)을 정의한 파일
  • push → CI/CD 실행 → HTML 변환, master 브랜치에 HTML 복사
• docs 폴더 아래에 config.js에 등록한 각 메뉴별로 디렉토리를 만들어 관리

github.io 만들기

organization 생성

1. organization에 새로운 repository 생성
   • 이때 이름은 반드시 <organization>.github.io로 만들어야 한다.
   • ex) ibmcp.github.io
2. github이 자동으로 웹접근 도메인을 레포지토리와 동일한 이름으로 만들어 준다.
3. push할 때 사용할 인증 토큰을 만든다.
   • Settings > Secret에서 만든다.
   • Name, value 아무거나 지정한다. 이때 Name은 page.yml이랑 싱크 맞춰야 한다.
4. 샘플 소스를 pull하고 git clone하기
5. 파일 생성하고 수정하기
   1. config.js 파일에서 메뉴 구조 정의
   2. README.md 파일에서 첫페이지 구조 정의
6. git push → CI/CD 실행 → github.io에 정상 반영!

툴

• awesome-vuepress: 관련 플러그인이나 예제
• vuepree tools: 플러그인 검색 가능