2020 년 상위 10 개의 정적 사이트 생성기

(Onat Arzoglu) (2020 년 8 월 27 일)

오래 전 인터넷 시대에 먼 옛날 웹 사이트는 단순한 HTML 페이지로만 만들어졌습니다. 이러한 정적 웹 사이트는 스타일링이 거의 필요하지 않았고 모든 것이 완벽하게 단순했습니다.

그 후 웹은 코딩과 프로그래밍에 대한 지식이 거의 또는 전혀없는 온라인 존재를 원하는 비전문 사용자에게 개방되었습니다. 그때는 WordPress , Joomla 와 같은 콘텐츠 관리 시스템 (CMS), Drupal 이 도입되었습니다. 이들은 파일, 이미지, 복잡한 콘텐츠 또는 플러그인이나 템플릿을 찾을 수있는 모든 기능을 관리 할 수 ​​있습니다.

하지만 이러한 종류의 동적 사이트를 만드는 것이 더 편리해 보이지만 건물과 로딩 시간이 느려집니다. 사용자 지정에 대한 제한과 보안 문제가있는 것은 여러분을 괴롭힐 수있는 다른 문제 중 일부입니다.

그리고 이러한 모든 문제는 미래로 돌아가는 솔루션 인 정적 사이트 생성기를위한 단계를 설정했습니다. !

정적 사이트 생성기 란 무엇입니까?

정적 사이트 생성기는 사이트 콘텐츠를 의미하는 소스 파일을 가져 와서 템플릿에 적용한 다음 방문자에게 전달할 준비가 된 순전히 정적 인 사이트.

정적 사이트 생성기는 수작업으로 코딩 된 정적 사이트와 CMS 기능 간의 가치있는 절충안을 제공합니다. 이를 통해 높은 수준의 생산성과 효율성으로 최신 프레임 워크와 워크 플로를 사용하여 웹 사이트를 구축 할 수 있습니다.

앞서 언급했듯이 정적 사이트는 웹이 시작된 이래로 우리 세상에있었습니다. 하지만 정적 사이트 생성기는 지난 몇 년 동안 출시되어 정적 사이트의 기능을 확장했습니다.

정적 사이트와 정적 사이트 생성기의 3 가지 주요 이점을 살펴보면서 특수한 특성을 이해해 보겠습니다.

정적 사이트 생성기를 사용해야하는 이유

속도

정적 사이트의 가장 큰 이점 중 하나는 확실히 속도입니다. 정적 사이트 생성기는 실시간이 아닌 빌드시 웹 페이지를 생성합니다. 이는 정적 페이지가 데이터베이스 쿼리가 돌아올 때까지 기다리지 않고 필요에 따라 구축되지 않음을 의미합니다. 이러한 이점으로 인해 정적 사이트는 매우 빠릅니다. 대부분의 콘텐츠 관리 시스템은 고도로 최적화 된 경우에도 정적 사이트의 속도에 접근하는 데 문제가있을 수 있습니다.

보안

정적 사이트 자체는 방금 만들어 졌기 때문에 해커로부터 안전합니다. HTML, CSS 및 JavaScript의. 공격자가 악용 할 수있는 보안 결함을 일으킬 수있는 데이터베이스 나 복잡한 소프트웨어는 없습니다. 간단히 말해 정적 사이트에는 해킹 할 백엔드가 없습니다. 해커는 서버에서 추가로 아무것도 얻지 못합니다. 서버에 포함 된 모든 것이 사용자에게 제공됩니다.

유연성

이것은 대부분 레벨에 따라 다릅니다. 웹 개발자로서의 능력이 있지만 정적 사이트 생성기를 사용하면 한계에서 자유를 느낄 수 있습니다. 콘텐츠와 웹 디자인을 100 \% 제어 할 수 있습니다. 이렇게하면 구현하려는 모든 항목으로 새로운 사이트를 더 쉽게 만들 수 있습니다. 정적 사이트 생성기를 사용하면 사이트의 모든 변경 사항에 대한 코드를 살펴보고 버전 제어 시스템의 모든 변경 사항을 확인할 수 있습니다.

그 이후로 정적 사이트 생성기는 JAMstack 및 커뮤니티는 최근 몇 년 동안 매우 다양한 선택 중에서 하나를 선택하는 것이 매우 어려울 수 있습니다.

그래서 우리가보고 싶었습니다. 10 가지 최고의 옵션을 선택했습니다.

  1. Hugo
  2. Jekyll
  3. Gatsby
  4. Hexo
  5. Next.js
  6. Nuxt.js
  7. Eleventy
  8. Docusaurus
  9. Scully
  10. Gridsome

HUGO

아무도 웹 사이트 구축을 기다리고 싶어하지 않습니다. 휴고의 모토가 그런 것 같아요. 모든 마크 업과 템플릿을 결합하여 단 밀리 초 만에 사이트를 구축 할 수 있기 때문입니다.

Hugo는 다른 사이트 생성기와는 다른 Google의 Go 언어로 구축되었습니다. 구성이 거의 필요하지 않고 핵심 바이너리 이외의 종속성이없는 매우 간단한 경로가 있습니다. 유연성과 생산성을 높이기 위해 Markdown에서 사용할 수있는 단축키를 활용할 수 있습니다.

gohugoio / hugo

A Go에서 bep, spf13 및 친구들의 사랑으로 구축 된 빠르고 유연한 정적 사이트 생성기. 웹 사이트 | 포럼 |…

github.com

JEKYLL

가장 인기있는 정적 사이트 생성기 인 Jekyll을 언급하는 것을 잊는 것은 실수입니다.

Ruby 언어로 구축되었으며 블로거 친화적입니다. 이는 데이터베이스 및 댓글 검토에 대한 걱정없이 콘텐츠에만 집중할 수 있기 때문입니다.

Github와의 긴밀한 통합을 통해 Jekyll 사이트를 Github에 무료로 쉽게 배포 할 수 있습니다. Jekyll은 WordPress 또는 Drupal과 같은 플랫폼에서 쉽게 마이그레이션 할 수있는 옵션을 제공합니다. 콘텐츠를 가져오고 영구 링크, 카테고리, 게시물 및 맞춤 레이아웃으로 지원할 수 있습니다.

jekyll / jekyll

Jekyll 개인, 프로젝트 또는 조직 사이트에 적합한 간단한 블로그 인식 정적 사이트 생성기입니다. 생각해보세요…

github.com

GATSBY

가장 인기있는 옵션 중 하나 인 Gatsby는 React에. Webpack by React 기반 구성 요소를 활용하여 멋진 웹 사이트를 만들 수 있습니다. 게다가 Gatsby의 빌드 속도는 정적 사이트에서 원하는 복잡한 기능을 처리 할 수있을만큼 빠릅니다.

Gatsby의 또 다른 장점은 생태계입니다. 좀 더 구체적으로 말하자면 공식 웹 사이트에 2000 개 이상의 플러그인이 나열되어 있습니다! 데이터 소스, 사용자 지정 기능 및 건물 최적화와 같은 다양한 작업을 처리하는 데 사용할 준비가되었습니다. 웹 사이트를 쉽게 맞춤 설정하는 데 필요한 모든 것을 찾을 수있을 것입니다.

gatsbyjs / gatsby

Gatsby는 개발자가 엄청나게 빠른 웹 사이트와 앱을 구축하는 데 도움이되는 React 기반의 무료 오픈 소스 프레임 워크…

github.com

HEXO

Hexo는 Node.js를 기반으로하며 강력한 프레임 워크를 사용하여 블로깅에 중점을 둡니다. 매우 큰 웹 사이트에서도 매우 빠른 렌더링을 제공합니다. 모든 GitHub 버전의 Markdown 옵션과 대부분의 Octopress 플러그인은 Hexo에서 지원합니다.

블로그 또는 사이트를 GitHub 페이지, Heroku 및 기타 사이트로 전송하는 단일 명령 배포를 제공합니다. 또한 블로그 사이트를 Hexo로 가져 오려는 경우 훌륭한 마이그레이션 옵션이 있습니다.

hexojs / hexo

빠르고 간단합니다. & Node.js에서 제공하는 강력한 블로그 프레임 워크입니다. 웹 사이트 | 문서 | 설치 가이드 |…

github.com

NEXT.JS

Next.js는 또 다른 React 기반 정적 사이트 생성 프레임 워크입니다. 정적 사이트에만 해당되지만 SSR (Server-Side Rendering) 애플리케이션에도 적용됩니다. React 커뮤니티에서이 다중 출력 기능으로 더 많은 인기를 얻고 있습니다.

개발자는 특히 첫 페이지로드 및 SEO 측면에서 고성능 사이트와 정적으로 내 보낸 JavaScript 애플리케이션을 만들 수 있습니다. 자동 코드 분할, 간단한 클라이언트 측 라우팅, Webpack 기반 개발 환경 및 모든 Node.js 서버 구현과 같은 Next.js 기능 중 일부를 언급하는 것이 좋습니다.

vercel / next.js

Next.js를 시작하려면 https://nextjs.org/learn을 방문하세요. 전체 내용을 보려면 https://nextjs.org/docs를 방문하세요…

github.com

NUXT. JS

이름이 Nuxt.js와 Next.js의 유일한 유사성은 아닙니다. 그들의 목적도 같은 방향입니다. Nuxt.js는 Next.js와 같은 올인원 솔루션을 제공하는 Vue로 구동되는 고수준 생성 프레임 워크입니다. SSR, 정적 웹 사이트 또는 단일 페이지 Vue 애플리케이션 생성을 결정할 수 있습니다.

Nuxt.js는 기본 HTML을 포함한 모든 페이지에 대한 사전 렌더링 기능을 제공하면서 서버를 사용하지 않으므로 더 빠른 웹 사이트와 더 많은 SEO 성능을 제공하는 이점을 누릴 수 있습니다. 더 강력한 사용자 경험을 제공합니다.

Nuxt

Dismiss GitHub에는 5 천만 명 이상의 개발자가 함께 일하고 있습니다. 그들과 함께 자신의 개발 팀을 성장 시키십시오…

github.com

ELEVENTY

방문 페이지에서 볼 수 있듯이 Eleventy는 스스로를보다 단순한 정적 사이트 생성기로 간주합니다. 그에 대한 다른 이유가 몇 가지 있지만 주된 이유는 단순히 Javascript로 빌드 된 것이므로 React 또는 Vue와 같은 프레임 워크에 익숙해 질 필요가 없습니다.

또 다른 기능은 사용 기능입니다. Eleventy는 놀랍도록 유연한 템플릿 시스템을 사용하여 여러 템플릿 언어로 작업 할 수 있습니다. 또한 단일 프로젝트에서 지원되는 모든 템플릿 언어를 사용할 수 있습니다!

Eleventy는 유연성과 효율성을 갖춘 충성도 높은 커뮤니티를 개발해 왔습니다. 2020 년에는 확실히 성장하고있는 플레이어입니다.

11ty / eleventy

간단한 정적 사이트 생성기입니다. 지킬의 대안. JavaScript로 작성되었습니다. 템플릿 디렉토리 변환…

github.com

DOCUSAURUS

Docusaurus는 특히 문서화에 초점을 맞춘 정적 사이트 생성기입니다. Facebook 오픈 소스의 일부로 2017 년에 출시되었지만 2020 년에는 이미 떠오르는 별입니다. Docusaurus는 오픈 소스 문서 웹 사이트를 구축하는 매우 쉬운 방법을 제공합니다. React.js로 구축되었으며 커뮤니티에서 큰 인기를 얻었습니다.

내비게이션 도구 및 페이지 사용자 정의와 같은 핵심 기능을 제공하는 동시에 Docusaurus는 문서 버전 관리를 수행하여 문서를 프로젝트 릴리스. 단순함 덕분에 사이트를 매우 빠르게 게시하면서 훌륭한 문서 작성에 집중할 수 있습니다.

facebook / docusaurus

Docusaurus We Docusaurus v2에서 열심히 노력하고 있습니다. Docusaurus를 처음 사용하는 경우 v1 대신 새 버전을 사용해보십시오…

github.com

SCULLY

Scully는 Angular로 구축 된 유일한 정적 사이트 생성기입니다. 이것이 JAMStack 호출에 대한 Angular의 답변으로 간주되는 이유입니다. Angular 앱을 빌드하면 Scully가 모든 페이지를 일반 HTML 및 CSS로 미리 렌더링 할 수 있습니다.

정적 사이트를 구축하는 동안 Angular 개발을 계속할 목적이 있습니다. 하나의 명령으로 기존 Angular 프로젝트에 Scully를 추가 할 수 있습니다. 2019 년 말에 출시 된 매우 새로운 정적 사이트 생성기이지만 Angular 개발에 참여하고 있다면 아직 베타 버전으로 간주된다는 점을 염두에두고 시도해 보셔야합니다!

scullyio / scully

가장 빠른 Angular 앱을 빌드하는 가장 좋은 방법입니다. Scully는 Angular 프로젝트를위한 정적 사이트 생성기입니다.

github.com

GRIDSOME

Gridsome은 Vue. 간단하고 안전한 배포, 프로그레시브 웹 앱 (WPA) 및 SEO 지원과 같은 다양한 훌륭한 기능을 제공합니다. 또한 여러 데이터 소스에서 단일 페이지 애플리케이션이나 정적 사이트를 매우 간단하고 빠르게 구축 할 수있는 GraphQL 데이터 레이어도 있습니다.

React에 내장 된 Gatsby와 마찬가지로 Gridsome에는 준비된 컬렉션이 있습니다. 템플릿 및 플러그인을 사용할 수 있습니다. 그 도서관은 개츠비만큼 편리하지 않을 수 있지만 2 년의 역사를 감안할 때 괜찮다고 생각합니다. 이것은 더 많은 사람들이 Gridsome을 사용하기 시작하면서 시간이 지남에 따라 개선 될 가능성이 높습니다.

gridsome / gridsome

Gridsome은 헤드리스 CMS, 로컬 파일 또는…

github.com

최종 생각

속도와 유연성의 힘을 가지면서 작업을 단순하게 유지하고 비용을 절감하려는 경우 정적 사이트 생성기는 웹 사이트를 구축하는 데 좋은 선택이며 웹이 돌아가는 방식처럼 보입니다!

글쎄요, 올바른 옵션을 선택하는 것은 쉽지 않을 수 있지만 적어도 위의 옵션을 확인하여 시작하여 자신의 필요와 능력에 가장 잘 맞는 옵션을 찾을 수 있습니다.

GETFORM AND STATIC SITES

Getform 은 온라인 웹 양식을위한 양식 백엔드 플랫폼 및 양식 엔드 포인트 서비스입니다. 위에서 언급했듯이 그 특성상 백엔드리스 구조로 인해 정적 사이트 생성기에서 연락처 양식을 구축하는 것은 불가능합니다. 이것이 바로 Getform이 등장하는 곳입니다! Getform은 정적 사이트 연락처 양식을 만드는 완벽한 방법입니다.

필요한 것은 Getform에서 고유 한 양식 끝점을 만들어 HTML 페이지에 붙여 넣는 것입니다. 나머지는 당사에서 처리합니다. 맞춤 이메일 알림, 자동 응답, 파일 업로드 지원, Zapier & Webhook 통합 및 Google reCaptcha와의 고급 스팸 필터링과 같은 추가 기능을 통해 양식을 완벽하게 관리 할 수 ​​있습니다! 시작하려면 여기 에서 등록하세요.

아래에는 Hugo에서 연락처 양식을 쉽게 설정하는 방법을 보여주기 위해 만든 샘플 자습서가 있습니다. , Jekyll, Gatsby, Eleventy, Hexo 및 Gridsome! 이를 확인하여 첫 번째 정적 사이트 생성기 연락처 양식을 설정할 수 있습니다.

(

Hugo 웹 사이트에 연락처 양식을 추가하는 방법

내 Hugo 정적 웹 사이트에 연락처 양식 설정 Getform으로 분.

중간.com

)

Getform을 사용하여 Jekyll 사이트에 문의 양식을 설정하는 방법

Jekyll은 루비 보석으로 번들로 제공되는 구문 분석 엔진입니다. 다음과 같은 동적 구성 요소에서 정적 웹 사이트를 구축하는 데 사용됩니다.

blog.getform.io

Gatsby 연락처 구축 Getform을 사용한 양식

GatsbyJS는 GraphQL을 사용하여 모든 데이터의 콘텐츠를 저장하고 액세스하는 React 기반의 점진적 웹 앱 프레임 워크입니다.

blog.getform.io

Getform을 사용하여 11ty 문의 양식

11ty 웹 사이트를 설정하고 Getform을 사용하여 문의 양식을 설정하고 Vercel로 배포하는 방법을 알아보세요.

blog.getform.io

Hexo 사이트에 문의 양식을 추가하는 방법

Hexo는 Node.js로 구동되는 빠르고 간단한 & 강력한 블로그 프레임 워크입니다. Hexo와 같이 생성 된 정적 사이트의 이점은…

blog.getform.io

Getform을 사용하는 Gridsome의 문의 양식

은 정적 웹 사이트 구축을위한 무료 & 오픈 소스 Vue.js 기반 JAMStack 프레임 워크입니다. & 기본적으로 빠른 앱…

blog.getform.io

정적 사이트에 Getform을 설정하는 데 도움이 필요하면 언제든지 문의하세요. [email protected] 로 보내 주시면 도와 드리겠습니다.

이 게시물이 마음에 드 셨다면 공유하고 팔로우하는 것을 잊지 마십시오. Facebook Twitter 에서 블로그에서 더 많은 업데이트를 확인하세요!