인기 있는 정적 사이트 생성기 개요

모든 정적 페이지 생성기에는 정적 HTML 파일과 모든 자산을 생성하는 단일하고 간단해 보이는 작업이 있습니다.

더 쉬운 캐싱, 더 빠른 로드 시간 및 전반적으로 더 안전한 환경과 같이 정적 HTML 파일을 제공하는 데에는 많은 명백한 이점이 있습니다. 각 정적 페이지 생성기는 HTML 출력을 다르게 생성합니다.

그러나 이 게시물의 목적은 메커니즘의 복잡성을 논의하고 논의하는 것이 아니라 각 프레임워크가 제공하는 기능 세트를 비교하고 모든 프레임워크의 고유한 측면과 기능을 강조하는 것입니다.

인기 있는 정적 페이지 프레임워크 개요

이 게시물에서는 Jekyll , Middleman , Hugo 및 Hexo 와 같은 정적 페이지 프레임워크를 자세히 살펴보겠습니다. 이것들이 유일한 생성기는 아니지만 대규모 커뮤니티와 많은 유용한 리소스가 지원하는 가장 일반적으로 사용되는 생성기입니다.

각각을 자세히 살펴보고 기본 기능을 비교해 보겠습니다.

• 지킬
  • 루비로 작성,
  • 기본적으로 Liquid 템플릿 엔진을 지원합니다.
• 중개자
  • 루비로 작성,
  • ERB 및 Haml 템플릿 엔진을 즉시 지원합니다.
• 휴고
  • Go로 작성,
  • 기본적으로 Go 템플릿 엔진을 지원합니다.
• 헥소
  • 자바 스크립트로 작성,
  • EJS 및 Pug를 즉시 지원합니다.

참고: 이러한 각 정적 페이지 생성기는 플러그인 및 확장을 사용하여 사용자 정의하고 확장할 수 있으므로 대부분 또는 모든 요구 사항을 충족할 수 있습니다.

정적 사이트 생성기 설정

이러한 각 프레임워크에 대한 문서는 포괄적이고 탁월하며 여기에서 얻을 수 있습니다.

지킬 문서

중개인 문서

휴고 문서

헥소 문서

설치 가이드를 따르기만 하면 몇 분 안에 개발 환경이 준비될 것입니다. 설치가 완료되면 터미널에서 명령을 실행하여 새 프로젝트를 시작할 수 있습니다.

예를 들어 다른 프레임워크에서 새 프로젝트를 시작하는 방법은 다음과 같습니다.

지킬

jekyll new my_website

중개자

middleman init my_website

휴고

hugo new my_website

헥소

hexo init my_website

구성

구성은 일반적으로 단일 파일에 저장됩니다. 각 정적 웹 사이트 생성기에는 고유한 특성이 있지만 많은 설정이 4개 모두에서 동일합니다.

소스 파일이 저장된 위치 또는 빌드된 소스를 출력할 위치를 지정할 수 있습니다. exclude 또는 skip_render 옵션을 설정하여 빌드 프로세스에서 사용하지 않을 데이터를 건너뛰는 것은 항상 유용합니다. 구성 파일을 사용하여 프로젝트 제목이나 작성자와 같은 전역 설정을 저장할 수도 있습니다.

정적 생성기로 마이그레이션

이미 Wordpress 프로젝트를 사용할 준비가 되어 있다면 비교적 쉽게 정적 페이지 생성기로 마이그레이션할 수 있습니다.

Jekyll의 경우 Jekyll Exporter 플러그인을 사용할 수 있습니다. Middleman의 경우 wp2middleman이라는 명령줄 도구를 사용할 수 있습니다. Hugo 마이그레이션을 위해 Wordpress를 Hugo Exporter로 사용할 수 있으며, Hexo의 경우 작년에 작성한 Wordpress에서 Hexo로 마이그레이션하는 방법에 대한 가이드를 읽을 수 있습니다.

원칙은 거의 동일하고 매우 간단합니다. 먼저 모든 콘텐츠를 적절한 형식으로 내보낸 다음 올바른 폴더에 포함합니다.

콘텐츠

정적 페이지 생성기는 기본 콘텐츠에 Markdown을 사용합니다. 마크다운은 강력하고 빠르게 배울 수 있습니다. Markdown으로 콘텐츠를 작성하는 것은 간단한 구문으로 인해 자연스럽게 느껴집니다. 문서가 깨끗하고 정리된 것처럼 보입니다.

전역 구성 파일에 지정된 폴더에 기사를 배치해야 합니다. 기사 이름은 생성자가 지정한 규칙을 따라야 합니다.

Jekyll에서는 _posts 디렉토리에 기사를 배치해야 합니다. 기사 이름은 YEAR-MONTH-DAY-title.MARKUP 형식이어야 합니다. 다른 생성기에도 유사한 규칙이 있으며 새 기사를 생성하기 위한 명령을 제공합니다.

Middleman, Hugo 및 Hexo에서 새 기사를 만드는 명령은 다음과 같습니다.

중개자

middleman article my_article

휴고

hugo new posts/my_article.md

헥소

hexo new post my_article

Markdown에서는 특정 구문 집합으로 제한됩니다. 운 좋게도 모든 생성기는 원시 HTML도 처리할 수 있습니다. 예를 들어 특정 클래스가 있는 앵커를 추가하려는 경우 일반 HTML 파일에서와 같이 앵커를 추가할 수 있습니다.

This is a text with <a class="my-class" href="#">a link</a> .

서문

머리말은 Markdown 파일 위에 있는 데이터 블록입니다. 더 나은 콘텐츠를 만드는 데 필요한 데이터를 저장하도록 사용자 정의 변수를 설정할 수 있습니다. 복잡하고 보기 흉한 문서 구조로 이어질 수 있는 마크다운으로 HTML을 작성하는 대신 서두에 변수를 정의할 수 있습니다.

예를 들어, 이것이 기사에 태그를 추가하는 방법입니다.

 tags: - web - dev - featured

정적 페이지 생성기의 템플릿

정적 페이지 생성기는 템플릿 언어를 사용하여 템플릿을 처리합니다. 템플릿에 데이터를 삽입하려면 태그를 사용해야 합니다. 예를 들어 Jekyll에서 페이지 제목을 표시하려면 다음과 같이 작성할 수 있습니다.

{{ page.title }}

Jekyll의 게시물에서 머리말의 태그 목록을 표시해 보겠습니다. 변수를 사용할 수 있는지 확인해야 합니다. 그런 다음 태그를 반복하여 정렬되지 않은 목록에 표시해야 합니다.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

중개자:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

휴고:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

헥소:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

참고: 빌드 프로세스가 실패하지 않도록 변수가 있는지 확인하는 것이 좋습니다. 디버깅 및 테스트 시간을 절약할 수 있습니다.

변수 사용

정적 페이지 생성기는 템플릿 전달에 사용할 수 있는 전역 변수를 제공합니다. 다른 변수 유형은 다른 정보를 보유합니다. 예를 들어, Hexo의 전역 변수 사이트는 사이트의 게시물, 페이지, 카테고리 및 태그에 대한 정보를 보유합니다.

사용 가능한 변수와 사용 방법을 아는 것은 개발자의 삶을 더 쉽게 만들 수 있습니다. Hugo는 템플릿을 위해 Go의 템플릿 라이브러리를 사용합니다. Hugo에서 변수로 작업하는 것은 컨텍스트에 익숙하지 않거나 "점"이 호출되는 방식에 익숙하지 않은 경우 문제가 될 수 있습니다.

Middleman에는 전역 변수가 없습니다. 그러나 기사 목록과 같은 일부 변수에 액세스할 수 있도록 하는 중개자 블로그 확장을 켤 수 있습니다. 전역 변수를 추가하려면 데이터를 데이터 파일로 추출하여 추가할 수 있습니다.

데이터 파일

Markdown 파일에서 사용할 수 없는 데이터를 저장하려면 데이터 파일을 사용해야 합니다. 예를 들어, 사이트 바닥글에 표시할 소셜 링크 목록을 저장해야 하는 경우입니다. 모든 정적 페이지 생성기는 YAML 및 JSON 파일을 지원합니다. 또한 Jekyll은 CSV 파일을 지원하고 Hugo는 TOML 파일을 지원합니다.

해당 소셜 링크를 데이터 파일에 저장해 보겠습니다. 모든 생성기가 YAML 형식을 지원하므로 데이터를 social.yml 파일에 저장해 보겠습니다.

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll은 기본적으로 _data 디렉토리에 데이터 파일을 저장합니다. Middleman과 Hugo는 data 디렉토리를 사용하고 Hexo는 source/_data directory 를 사용합니다.

데이터를 출력하려면 다음 코드를 사용할 수 있습니다.

지킬

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

중개자

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

휴고

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

헥소

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

도우미

템플릿은 종종 데이터 필터링을 지원합니다. 예를 들어, 제목을 대문자로 만들고 싶다면 다음과 같이 할 수 있습니다.

{{ page.title | upcase }}

Middleman의 구문은 다음과 같습니다.

<%= current_page.data.title.upcase %>

Hugo는 다음 명령을 사용합니다.

{{ .Title | upper }}

Hexo는 구문이 다르지만 결과는 동일합니다.

<%= page.title.toUpperCase() %>

정적 페이지 생성기가 자산을 처리하는 방법

자산 관리는 정적 페이지 생성기에서 다르게 처리됩니다. Jekyll은 자산 파일이 어디에 있든 컴파일합니다. Middleman은 소스 폴더에 저장된 자산만 처리합니다. Hugo에서 자산의 기본 위치는 자산 디렉토리입니다. Hexo는 자산을 글로벌 소스 디렉토리에 배치할 것을 제안합니다.

SASS

Jekyll은 기본적으로 Sass를 지원하지만 몇 가지 규칙을 따라야 합니다. Middleman은 또한 Sass를 즉시 지원합니다. Hugo는 Sass용 Hugo Pipes를 통해 Sass를 컴파일합니다. Hexo는 플러그인을 통해 이를 수행합니다.

ES6

es6의 최신 JavaScript 기능을 사용하려면 플러그인을 설치해야 합니다. 유사한 플러그인 버전이 두 개 이상 있을 수 있으므로 코드를 확인하거나 미해결 문제 또는 최신 커밋을 확인하여 최상의 플러그인을 찾는 것이 좋습니다.

이미지

이미지 최적화도 기본적으로 지원되지 않습니다. 또한 es6 플러그인과 마찬가지로 이미지를 최적화하는 플러그인이 두 개 이상 있습니다. 숙제를 하고 작업에 가장 적합한 플러그인을 찾으십시오. 또는 타사 솔루션을 사용할 수 있습니다. Hexo로 빌드한 제 블로그에서는 Cloudinary 무료 플랜을 사용하고 있습니다. Cloudinary 태그를 개발했고 Cloudinary 변환을 통해 반응형 및 최적화된 이미지를 제공하고 있습니다.

플러그인, 확장

정적 페이지 생성기에는 웹사이트를 사용자 정의할 수 있는 강력한 라이브러리가 있습니다. 각 플러그인은 다른 용도로 사용됩니다. 더 나은 개발 환경을 위한 LiveReload부터 Sitemap 또는 RSS 피드 생성에 이르기까지 다양한 플러그인을 찾을 수 있습니다.

새로운 플러그인이나 확장을 작성할 수 있습니다. 하기 전에 유사한 플러그인이 있는지 확인하십시오. Jekyll 플러그인 목록, Middleman 확장 및 Hexo 플러그인을 참조하십시오. Hugo에는 플러그인이나 확장 기능이 없습니다. 그러나 사용자 정의 단축 코드를 지원합니다.

Markdown의 단축 코드

단축 코드는 Markdown 문서에 넣을 수 있는 코드 조각입니다. 이러한 스니펫은 HTML 코드를 출력합니다. Hugo 및 Hexo는 단축 코드를 지원합니다. Hugo의 그림과 같은 내장 단축 코드가 있습니다.

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo 유튜브 단축 코드:

{% youtube video_id %}

적절한 단축 코드를 찾을 수 없으면 새 단축 코드를 만들 수 있습니다. 예를 들어, Hexo는 CanIUse 임베딩을 지원하지 않으며 저는 CanIUse 임베딩을 지원하는 새 태그를 개발했습니다. npm 또는 공식 생성기 사이트에 플러그인을 게시하는 것을 잊지 마십시오. 그렇게 하면 커뮤니티가 고마워할 것입니다.

CMS

정적 페이지 생성기는 비기술자에게 오버헤드가 될 수 있습니다. 명령이나 마크다운 사용법을 배우는 것은 누구에게나 쉬운 일이 아닙니다. 이 경우 사용자는 JAMstack 사이트용 콘텐츠 관리 시스템의 이점을 누릴 수 있습니다. 이 목록에서 귀하의 요구 사항에 가장 적합한 시스템을 찾을 수 있습니다. CMS를 구성하는 데 시간이 걸리지만 장기적으로는 귀하와 다른 사용자가 콘텐츠를 보다 효율적으로 게시하는 이점을 누릴 수 있습니다.

보너스: JAMstack 템플릿

프로젝트 구성에 너무 많은 시간을 소비하고 싶지 않다면 JAMstack 템플릿을 활용하면 됩니다. 이러한 템플릿 중 일부는 이미 CMS로 미리 구성되어 있어 많은 시간을 절약할 수 있습니다.

코드를 살펴봄으로써 많은 것을 배울 수도 있습니다. 템플릿을 설치하고 다른 템플릿과 비교하고 가장 적합한 템플릿을 선택하십시오.

마무리

정적 페이지 생성기는 웹사이트를 구축하는 빠르고 안정적인 방법입니다. 요즘에는 생성기로 사소하지 않고 고도로 맞춤화된 웹사이트를 구축할 수도 있습니다.

예를 들어, Smashing Magazine은 작년에 JAMstack으로 이전했고 사이트 속도를 크게 높일 수 있었습니다. 정적 웹사이트의 다른 성공적인 예가 있으며 모두 동일한 원칙을 공유합니다. 정적 리소스를 생성하고 콘텐츠 전송 네트워크를 통해 전달하여 더 빠른 로딩과 우수한 사용자 경험을 제공한다는 것입니다.

Wordpress REST API를 백엔드로 사용하는 것부터 Lambda 함수를 사용하는 것까지 정적 웹사이트로 할 수 있는 일이 훨씬 더 많습니다. 기본적으로 HTTPS를 사용하거나 양식 제출을 처리하는 것과 같은 간단한 웹 사이트에도 탁월한 솔루션이 있습니다.

이 정적 페이지 프레임워크의 개요가 잠재력을 깨닫고 다음에 새 프로젝트를 생각할 때 사용을 고려하는 데 도움이 되었기를 바랍니다.