포트폴리오를 위한 깃허브 페이지: VSCode 개발 설정

이번에는 비주얼 스튜디오 코드(Visual Studio Code; VSCode)로 깃허브 페이지(GitHub Pages)를 개발하기 위한 기본 설정을 수행합니다. 최소실행에 필요한 파일을 몇 개 작성하고, 개발에 유용한 VSCode 확장을 설치합니다. 또한 간단한 단축키로 테스트를 수행할 수 있도록 테스크를 작성합니다.

VSCode를 포함한 개발도구가 이미 설치되어 있다고 가정하고 시작합니다. 아직 준비가 되지 않았다면 로컬 테스트 환경 구정 포스트를 참고하여 도구를 설치한 뒤 진행합니다.

기본파일 생성

깃허브 페이지는 웹페이지 생성기로 지킬(Jekyll)을 사용합니다. 정적 웹 페이지를 생성하는 최소한의 파일은 _config.yml, index.md입니다. 이 파일들은 깃 명령으로 복제한 로컬 저장소 디렉토리 아래 생성합니다.

_config.yml:

title: 웹페이지 제목
author: 작성자
email: 작성자의 메일주소

이 파일은 YAML형식으로 작성한 지킬 사이트 생성 설정 파일입니다. 이 파일을 변경하는 경우 변경 내용을 적용하려면 jekyll serve 명령을 다시 실행해야 합니다.

index.md:

---
# 프론트메타

---

# 환영합니다

index.md 또는 index.html은 세 개의 대시(-) 로 구분한 프론트메타 영역이 있습니다. 이 프론트메타는 내용 없이 존재하기만 해도 지킬에게 변환해야 할 파일이라고 알려주는 역할을 합니다. 프론트메타 안은 YAML 문법을 사용합니다. 프론트메타 안에서 사용하는 # 는 주석을 의미합니다. 프론트 메타 밖의 #은 마크다운 문법에서 제목을 의미합니다.

이제 이 상태로 (bundle exec) jekyll serve (-H 0.0.0.0 -P 8080)(괄호 안은 옵션) 명령을 실행한 뒤 설정한 URL로 접속하면 다음과 같은 웹페이지가 보입니다.

확장 설치 및 작업 영역 설정

• Liquid : 리퀴드 언어 지원

VSCode가 리퀴드 언어 문법 강조와 자동완성을 지원할 수 있도록 해주는 확장을 설치합니다. 이후 .vscode/settings.json 파일을 생성하여 작업 영역에 적용되는 설정을 지정합니다.

{
  "editor.formatOnSave": true,
    "html.validate.styles": false,
    "html.validate.scripts": false,
    "liquid.format": true,
    "[html]": {
        "editor.defaultFormatter": "sissel.shopify-liquid"
    }
}

• editor.formatOnSave: 문서를 저장할 때 자동으로 문서 포맷을 다듬게 됩니다.
• html.validate.styles: HTML 태그의 <style>태그나 style="" 속성의 오류를 무시합니다. 속성에 리퀴드 문법을 사용해도 오류를 표시하지 않습니다.
• html.validate.scripts: HTML 태그의 <scripts>태그나 액션 속성의 오류를 무시합니다. 속성에 리퀴드 문법을 사용해도 오류를 표시하지 않습니다.
• liquid.format: 리퀴드 포매터를 활성화합니다.
• [html]
  • editor.defaultFormatter: *.html 파일에 적용하는 포매터를 지정합니다.

테스크 설정

.vscode/tasks.json 파일을 생성합니다. 테스크(task)과정에서 실행할 명령은 다음과 같습니다.

이 명령은 리눅스나 WSL읠 위한 명령입니다:

JEKYLL_GITHUB_TOKEN=$(cat .user) bundle exec jekyll serve -H 0.0.0.0 -P 8080 -l

• JEKYLL_GITHUB_TOKEN=$(cat .user): 환경변수를 설정합니다. 이 환경변수는 깃허브 토큰을 담은 .token파일의 내용을 가져옵니다.
• bundle exec jekyll serve: 번들러를 거쳐 지킬을 실행합니다.
• -H 0.0.0.0: --host 구문의 축약형입니다. 페이지를 내부 IP 0.0.0.0으로 호스팅합니다.
• -P 8080: --port 구문의 축약형입니다. 페이지를 호스팅할 포트를 지정합니다.
• -l: --livereload 옵션의 축약형입니다. 생성한 테스트 페이지가 자동으로 새로고침됩니다.

여기서 본격적으로 지킬을 시작하기 전에 설정하는 환경변수 JEKYLL_GITHUB_TOKEN는 지킬 플러그인 GitHub Metadata이 사용합니다. 이 플러그인은 깃허브를 위한 맞춤설정을 자동으로 등록하며 템플릿을을 작성할 때 정보를 {{ site.github }}로 접근할 수 있습니다.

이제 테스크 파일을 작성합니다. 필요하다면 깃허브 엑세스 토큰 관리 메뉴에서 저장소를 읽을 수 있는 권한을 가진 토큰을 생성하여 .token파일에 담을 수 있습니다. 이경우 .gitignore 파일에 .token을 추가하여 커밋이나 푸시를 통해 토큰이 서버에 업로드되는 일이 없도록 합니다.

.vscode/tasks.json 파일 내용:

{
    "version": "2.0.0",
    "tasks": [
        {
              "label": "jekyll serve",
              "command": "JEKYLL_GITHUB_TOKEN=$(cat .token) bundle exec jekyll serve -H 0.0.0.0 -P 8080 -l",
              "type": "shell",
              "dependsOn": [
                  "tsc-watch",
              ],
              "presentation": {
                  "echo": true,
                  "reveal": "always",
                  "focus": false,
                  "panel": "shared",
                  "showReuseMessage": true,
                  "clear": true,
                  "group": "jekyll"
              },
              "group": {
                  "kind": "build",
                  "isDefault": true
              }
          }
    ]
}

작업 명령인 Tasks: Run Build Task(Ctrl + Shift + B)을 실행하면 설정한 테스크 작업을 실행합니다.