Visual Studio를 사용하여 Jekyll 웹 사이트 구축

Jekyll은 Markdown 콘텐츠를 가져오고 템플릿을 통해 렌더링하여 정적 페이지를 생성한 다음 GitHub Pages과 같은 호스팅 서비스에 업로드할 수 있는 인기 있는 정적 사이트 생성기입니다.

저는 가능할 때마다 IDE를 사용하는 것을 좋아하는 사람이고, 저와 같이 Visual Studio가 설치되어 있는 Windows 개발자라면 이미 Jekyll을 위한 훌륭한 개발 환경을 갖추고 있는 것입니다. Visual Studio Code와 같은 경량 편집기도 잘 작동하지만 더 좋지는 않지만 이미 Visual Studio가 있으므로 사용했습니다.

Jekyll 웹 사이트를 부트스트랩했으면(지침은 Jekyll documentation 참조) 파일 탐색기에서 웹 사이트 폴더를 마우스 오른쪽 단추로 클릭하고 Visual Studio에서 열기를 선택합니다. 기본적으로 HTML/CSS, _config.yml 및 Gemfile를 포함하여 처리할 대부분의 파일 형식에 대한 지원을 받을 수 있습니다. 내가 만든 두 가지 삶의 질 개선 사항은 Markdown 지원 및 로컬 서버 시작을 위한 사용자 지정 작업과 관련이 있습니다.

마크다운 지원

Jekyll 웹 사이트의 대부분의 콘텐츠는 일반적으로 Markdown을 사용하여 작성되지만 Visual Studio의 기본 제공 Markdown 지원은 다소 부족합니다. 이 문제는 구문 강조 표시를 개선하고 실시간 미리 보기를 추가하는 Visual Studio Marketplace의 뛰어난 확장Markdown Editor을 사용하여 쉽게 해결할 수 있습니다.

참고: VS Code는 이러한 기능을 기본적으로 지원하며 확장이 필요하지 않습니다.

사용자 지정 시작 작업

Jekyll은 bundle exec jekyll serve를 실행하여 로컬에서 웹 사이트를 테스트하는 쉬운 방법을 제공합니다. IDE를 떠나지 않고 서버를 실행할 수 있도록 이를 위한 사용자 지정 시작 작업을 만들었습니다. 이렇게 하려면 솔루션 탐색기에서 파일을 마우스 오른쪽 단추로 클릭하고 작업 구성을 선택합니다. 열리는 tasks.vs.json 파일에서 작업 섹션을 다음으로 바꿉니다.

"tasks": [
    {
      "taskLabel": "Local Server",
      "appliesTo": "*",
      "type": "default",
      "command": "${env.COMSPEC}",
      "args": [
        "bundle exec jekyll serve"
      ]
    }
]

이제 솔루션 탐색기에서 파일을 마우스 오른쪽 단추로 클릭하면 로컬 서버 실행 옵션이 표시됩니다. 이것을 클릭하면 서버가 시작되고 Jekyll 로그가 출력 패널로 이동합니다. IDE에서 파일 편집을 계속할 수 있으며 Jekyll은 자동으로 변경 사항을 선택합니다. Visual Studio를 닫으면 서버가 종료됩니다. 이 작업을 수동으로 수행해야 하는 경우(예: _config.yml 를 변경하는 경우) 메뉴에서 빌드 > 취소를 선택하거나 Ctrl+Break 바로 가기를 사용합니다.

참고: VS Code는 사용자 지정 작업에 거의 동일한 파일tasks.json을 사용합니다. 자세한 내용은 documentation을 참조하십시오.