정적 사이트 생성기 : 초보자 가이드

Jamstack (JavaScript, API 및 Markup)은 선호하는 웹 개발 스택으로 빠르게 인기를 얻고 있습니다. Jamstack 웹 사이트 자체는 "웹 사이트와 앱을 구축하는 현대적인 방법"으로 선전합니다. 실제로, 성능은 보안, 확장 성 및 향상된 개발자 경험과 함께 주요 이점입니다. Jamstack Architecture는 CDN을 통해 제공되는 사전 렌더링 된 정적 페이지를 사용하고 다양한 소스의 데이터를 통합하며 기존 서버 및 데이터베이스를 Microservice API로 대체합니다. 정적 사이트 생성기 (SSG)는 이러한 정적 사이트를 빠르고 효율적으로 만드는 핵심입니다. JavaScript, Ruby 및 Go와 같은 다양한 프로그래밍 언어를 지원하는 수많은 SSG가 존재합니다. 종합 목록은 StaticsiteGenerator.net에서 제공되지만 Jamstack 웹 사이트는 이름 또는 Github 스타를 기반으로보다 관리하기 쉽고 여과 가능한 목록을 제공합니다. 이 기사는 7 개의 인기있는 SSG와 핵심 기능을 강조하여 프로젝트에 가장 적합한 것을 선택하는 데 도움이됩니다. 키 테이크 아웃 :

SSGS는 정적 사이트 생성을 간소화하여 개선 된 성능, 보안, 확장 성 및 개발자 경험을 제공합니다. 템플릿 엔진을 통해 페이지를 사전 프로세스하여 가볍고 빠른로드 사이트를 만듭니다. SSGS는 헤드리스 CMSS와 완벽하게 통합되어 컨텐츠 관리 및 데이터 액세스를위한 API를 제공합니다. 이를 통해 비 개발자는 정적 사이트의 이점을 유지하면서 콘텐츠를 작성하고 업데이트 할 수 있습니다. 인기있는 SSG에는 Gatsby, Next.js, Hugo, Nuxt.js, Jekyll, Eleventy 및 Vuepress가 포함됩니다. 각각은 서버 렌더링 또는 정적으로 내보낸 JavaScript 앱에서 VUE 기반 정적 웹 사이트에 이르기까지 고유 한 기능 및 사용 사례를 제공합니다. SSG 선택은 프로젝트 요구, 동적 능력 요구 사항, 빌드/배포 시간, 프로젝트 유형 (블로그, 개인 웹 사이트, 문서화, 전자 상거래) 및 SSG의 프로그래밍 언어에 대한 친숙 함에 따라 다릅니다.

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

기존 CMS (WordPress와 같은)는 클라이언트 요청시 웹 페이지를 동적으로 빌드하고 데이터베이스에서 데이터를 조립하고 템플릿 엔진을 통해 처리합니다. 반대로 SSGS는 템플릿 엔진을 통해

> 클라이언트 요청을 통한 사전 프로세스 페이지를 통해 즉시 사용할 수 있도록합니다. 정적 자산 만 호스팅하여 상당히 가볍고 빠른 사이트를 만듭니다. 전통적인 CMS 및 SSG를 자세히 비교하고 SSG 사용의 장점은 Craig Buckler의 기사, "정적 사이트 생성기를 사용하는 7 가지 이유"를 참조하십시오. 그러나 그러나 CMS의 컨텐츠 제작 및 관리 기능은 가치가 있습니다. 이것은 헤드리스 CMS가 들어오는 곳입니다 헤드리스 CMS는 백엔드를 통한 컨텐츠 만 관리하여 다른 프론트 엔드가 데이터에 액세스 할 수있는 API를 제공합니다. 편집 팀은 친숙한 인터페이스를 활용할 수 있으며 API를 통해 SSG에 액세스 할 수있는 많은 데이터 소스가됩니다. 인기있는 헤드리스 CMS 옵션에는 Strapi, Wanity 및 Contentful이 포함됩니다. WordPress는 헤드리스 CMS 기능을위한 REST API도 제공합니다.

최신 Jamstack 도구는 컨텐츠 관리 시스템의 이점을 유지하면서 정적으로 제공되는 웹 사이트를 생성 할 수 있습니다. 몇 가지 SSG 옵션을 탐색합시다 :

개츠비

1. Gatsby는 정적 웹 사이트 및 앱을 구축하기위한 포괄적 인 프레임 워크로, React로 구축되고 데이터 조작을 위해 GraphQL을 활용하는 포괄적 인 프레임 워크입니다. 더 깊이 다이빙하려면 Sitepoint 및 Gatsby 웹 사이트의 문서에서 "Gatsby와 함께 시작 : 첫 번째 정적 사이트 구축"을 탐색하십시오. 키 개츠비 장점 : 는 최첨단 웹 기술 (React, Webpack, Modern JS, CSS)을 활용합니다 다양한 데이터 소스를위한 광범위한 플러그인 생태계 정적 페이지 생성으로 인한 쉬운 배포 및 확장 성. 최적의 성능을 위해 내장 코드 및 데이터 분할이있는 PWA (Progressive Web App) 생성기.
이미지 로딩을 최적화합니다 수많은 스타터 사이트가 쉽게 구할 수 있습니다

다음 .js

next.js는 Vercel에 의해 React에 구축 된 서버 렌더링 또는 정적으로 내보내는 JavaScript 앱을 생성하기위한 다양한 프레임 워크입니다. 다음 Next.js 앱을 만들려면 :

개발 서버를 시작하십시오 :

at 에 액세스하십시오 next.js는 앱을 구축하고 사용자 정의하기위한 광범위한 설명서를 제공합니다. 주요 기능은 다음과 같습니다 최적의 성능을위한 기본 서버 측 렌더링 자동 코드 분할, 라우팅 및 핫 리로드 이미지 최적화, 국제화 및 분석 포괄적 인 문서, 튜토리얼 및 예 내장 CSS 지원. 수많은 예제 앱
• hugo
• gatsby-image Github Stars가 49k 이상인 SSG 인 Hugo는 Go로 작성되었으며 뛰어난 속도를 자랑합니다. 빠른 빌드 프로세스는 광범위한 콘텐츠가있는 블로그에 이상적입니다. 문서에는 쉽게 설정할 수있는 QuickStart 안내서가 포함되어 있습니다 주요 hugo 기능 :
  속도에 최적화 (콘텐츠 렌더링 ~ 1ms) 페이지 매김, 리디렉션 및 여러 컨텐츠 유형과 같은 내장 기능 리치 테마 시스템. 마크 다운의 대안으로 단축 코드 Dart Sass Support (2020 년 12 월 이후)
  nuxt.js
  • vue.js에 구축 된 고급 프레임 워크 인 <..> nuxt.js는 프로덕션 준비된 웹 앱의 생성을 용이하게합니다. 서버 측 렌더링 (범용/동형 모드), 정적 사이트 생성 및 단일 페이지 앱 (SPA)을 지원합니다. 설정은 간단합니다. "Hello World"예제는 Nuxt 웹 사이트에서 제공됩니다.
  키 nuxt.js 기능 :
  • 탁월한 성능.
  50 개가 넘는 사용 가능한 모듈이있는 모듈 식 아키텍처 쉬운 학습 곡선 (vue.js 기반) 통합 Vuex State Management 자동 코드 분할 최신 JavaScript 코드 변환, 번들링 및 미니 화 메타 태그 관리 사전 프로세서 지원 (Sass, Less, Stylus)
  jekyll
  Jekyll의 단순성과 학습의 용이성은 그것을 인기있는 선택으로 만듭니다 (42k Github Stars). Ruby로 제작되었으며 템플릿을 위해 컨텐츠 및 액체에 Markdown을 사용하여 블로그 및 텍스트가 많은 웹 사이트에 이상적입니다. 무료 호스팅을 제공하는 Github 페이지에 전원이 공급됩니다 키 Jekyll 기능 :
  <..> 단순성.

  무료 github 페이지 호스팅. <.> 강력한 커뮤니티 지원.

  elventy

  • Jekyll에 대한 JavaScript 대안으로 간주되는 eleventy는 제로 구성 접근 방식과 유연한 템플릿을 갖춘 단순하고 기본 JavaScript SSG입니다. 시작하기위한 리소스는 Craig Buckler의 "Eleventy with Eleventy", Raymond Camden의 "11ty Tutorial"및 Tatiana Mac의 "Eleventy에 대한 초보자 안내서"와 Eleventy 웹 사이트의 문서가 포함됩니다. 키 고도 특징 :
  • 단순성과 성능. 활성 커뮤니티.
  유연한 템플릿 <.> 빠른 빌드 타임.
  • vuepress
  • vuepress vue-powered ssg는 기술 문서에 최적화되어 있습니다. 기본 테마는이 목적에 적합합니다. 현재 안정 버전은 1.8.0이지만 버전 2 알파는 Github에서 사용할 수 있습니다. VUE, VUE 라우터 및 웹 팩을 활용하는 스파 역할을합니다. vuepress를 설정하려면

    : 를 사용하십시오

    자세한 내용은 vuepress 안내서를 참조하십시오 키 vuepress 기능 :

    빠른 설정 및 마크 다운 컨텐츠 작성 vue.js 통합 (Markdown의 Vue 구성 요소, 사용자 정의 테마) 빠른 로딩 (사전 렌더링 된 정적 HTML, 스파 기능) 내장 다국어 지원. create-vuepress-site nuxt.js vs. vuepress :

    둘 다 vue.js 기반이며 정적 웹 사이트를 만듭니다. nuxt.js는 더 넓은 기능을 제공하므로 응용 프로그램에 적합합니다. Vuepress는 정적 문서 웹 사이트와 간단한 블로그를 작성하여 단순한 프로젝트를 위해 nuxt.js의 오버 헤드를 피합니다.

    npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

    정적 사이트 생성기 선택 :

    SSG를 선택할 때 이러한 요소를 고려하십시오

    프로젝트 요구 사항 :

    필요한 기능을 식별하십시오 동적 기능 :

    필요한 동적 기능 수준을 결정하십시오 빌드/배포 시간 :
    콘텐츠 볼륨의 성능 평가
    • 프로젝트 유형 :
    블로그, 개인 웹 사이트, 문서 또는 전자 상거래에 적합한 SSG를 선택하십시오. 개발자 친숙 함 : 편안한 언어를 사용하여 SSG를 선택하십시오. 커뮤니티와 지원 :
    • 모든 상장 된 SSG에는 강력한 커뮤니티와 자원이 있습니다.
    • faqs :
    SSG 란 무엇입니까?
    템플릿 및 컨텐츠에서 정적 HTML 페이지를 생성하는 도구는 동적 웹 사이트에 비해 더 빠른로드 시간과 개선 된 보안을 제공합니다.

    SSG vs. CMS? CMSS는 동적으로 페이지를 생성하는 반면 SSGS는 전체 사이트를 사전 구축하여 정적 파일을 생성합니다. SSG는 덜 자주 업데이트되는 콘텐츠에 이상적입니다 필요한 프로그래밍 지식이 필요합니까? 기본 프로그래밍 기술은 커스터마이징에 도움이되지만 많은 SSG는 사용자 친화적입니다. > SSGS는 블로그 및 동적 콘텐츠를 처리 할 수 ​​있습니까?

    예, 많은 사람들이 템플릿 엔진 및 데이터 소스를 통해 동적 컨텐츠를 지원합니다.

    SSG 및 SEO?

    정적 사이트는 일반적으로 빠른 로딩 시간으로 인해 SEO 친화적입니다. SSGS는 메타 데이터 및 헤더 최적화를 용이하게합니다

위 내용은 정적 사이트 생성기 : 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!