vuepress

vuepress : 정적 사이트 generator, 기술 문서를 편리하게 작성할 수 있다.



셋팅

  1. vuepress 설치
npm install -D vuepress
  1. 디렉토리 셋팅
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
  1. package.json 런 스트립트 추가
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. config.js 셋팅
module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around',
    base: '/<리파지토리 이름>/'
}
  1. gh-pages 빈 브랜치 만들기
git checkout --orphan gh-pages
git rm -rf .
git add index.html
git commit -m "First commit"
$git push origin gh-pages
  1. github setting tab에서 github pages - Source - gh-pages branch 설정
  2. deploy.sh 만들기
#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run docs:build

# navigate into the build output directory
cd docs/.vuepress/dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

git push -f https://github.com/mmmoikim/vuepress-setting.git master:gh-pages

cd -

docs:dev 빌드시 TypeError: res.getHeader is not a function 에러

  • npm install webpack-dev-middleware@3.6.0 설치

plugin

    plugins: [
        ['@vuepress/last-updated'],//git에 마지막 커밋
        ['@vuepress/back-to-top', true],//위로 올라가기
        '@vuepress/pagination',//다음글, 이전글
        ['@vuepress/search', {//검색창
            searchMaxSuggestions: 10
        }],
        ['@vuepress/active-header-links', {//헤더 바로가기
            sidebarLinkSelector: '.sidebar-link',
            headerAnchorSelector: '.header-anchor',
            headerTopOffset: 120
        }]
    ]

theme

  • node_module - vuepress - lib - default-theme.vuepress - theme 에 복사해 놓고 스타일 찾으며 수정
  • <Content>가 페이지 내용 컴포넌트
  • config.js에 themeConfig로 설정해 놓은 값들은 $site전역변수에 들어 있음
  • 테마 갤러리
  • awesome-vuepress

뱃지


warn tip error
<Badge text="warn" type="warn"/>
<Badge text="tip" vertical="middle"/>
<Badge text="error" type="error"/>
Last Updated: 5/23/2019, 4:51:28 PM