jamstack SupaBase를 사용하여 NextJS 웹 앱을 강화하는 방법 간단한 의제 웹 사이트를 구축해 달라는 친구/고객의 요청이 하나 있습니다. 요건 이렇습니다, (여기서 어려운건 없습니다😎) 사용자가 안건을 보고 스크롤하여 볼 수 있으며, 링크를 클릭하면 상세 부분으로 리디렉션됩니다 다시한번 말씀드리지만 어려운건 없습니다. 😎 여기서 유일한 관심사는: 동시에 좋은 유연성을 가지고 변화를 가질 수 있도록, JAMStack은 매우 유명하며 더 나은 유연성을 얻기... nextjsreacttutorialjamstack Jamstack 사이트에 문의 양식 추가하기 나는 최근에 내 블로그에 '연락처' 양식을 추가하여 방문자가 내 이메일을 명시적으로 제공하지 않고도 쉽게 연락할 수 있도록 하고 싶었습니다. 으로 내 정적 사이트에 대한 완벽한 솔루션을 찾았습니다. 연락처 양식, 이메일 가입 또는 기타 항목을 추가하고 싶을 수도 있습니다. 에서 내 양식을 확인할 수 있습니다. 하지만 저를 놀라게 한 것은 Google Forms, Basin, HubSpot, ... tutorialprogrammingjamstackwebdev 클라우드 제공업체에서 next/image를 사용하는 방법 사이트에서 next/image 구성 요소를 사용하면 반응형 이미지를 빠르고 쉽게 추가할 수 있습니다. 볼 수 있다면 next.js 애플리케이션에 Image 구성 요소를 추가하고, 자산 관리 공급자를 확인하도록 구성하고, 이미지를 활용하기 위해 사용자 정의 로더를 추가하는 과정을 안내하는 비디오를 만들었습니다. -r)를 실행할 수 있습니다. 몇 가지 기본 서식을 추가하고 next/image 태... kontentnextjsjamstackwebdev SvelteKit에서 설정하기 이 시리즈에서는 웹 프레임워크 학습의 기본 사항을 살펴봅니다. 우리가 하는 모든 일은 처음부터 만들어질 것이므로 이전 Svelte 또는 SvelteKit 지식이 필요하지 않습니다. 이 시리즈를 통해 자신만의 SvelteKit 프로젝트를 구축할 수 있는 기술과 지식을 갖게 될 것입니다. React 및 Vue와 같은 다른 JavaScript 프레임워크와 달리 Svelte에는 Svelte 코드를 ... beginnerssveltejamstacktutorial Nextjs(Vercel에서) + Ghost(렌더링에서)로 내 JAMstack 블로그 구축 가장 먼저 할 일은 Up-To-Date Tech를 사용하여 학습 블로그를 설정하는 것입니다. (내가 만든 마지막 블로그는 10년 전 워드프레스였습니다 :) ) 나에게 이 미니 프로젝트는 코딩에 너무 깊이 들어가지 않으면서 다시 손을 더럽히고 실행 가능한 것을 설정하는 것을 의미합니다. Git 워크플로 및 최신 빌드 도구를 사용하여 사전 렌더링된 콘텐츠가 CDN에 제공되고 API 및 서버리스 ... ghostjavascriptjamstacknextjs Cosmic 헤드리스 CMS에서 Next.js 미리보기 모드를 사용하는 방법 그러나 사이트가 구축된 후 CMS에 새 콘텐츠를 추가할 때 아직 게시할 준비가 되지 않은 초안 콘텐츠를 미리 볼 수 있는 방법이 필요합니다. 을 사용하여 요청 시 페이지를 렌더링하여 이 문제를 해결하고 정적 생성 중에 존재하지 않은 게시되지 않은 콘텐츠를 볼 수 있습니다. 헤드리스 CMS와 함께 Next.js 미리보기 모드를 사용하여 우리 자신과 공동 작업자를 위해 초안 콘텐츠를 미리 볼 수... nextjsjamstackheadlesscmswebdev Linux 및 MacOS에서 Markdown 파일의 대규모 맞춤법 검사 오늘 저는 90개 이상의 다양한 언어를 지원하는 무료 소프트웨어 맞춤법 검사기인 을 사용하여 파일 배치의 맞춤법을 검사하는 방법을 배웠습니다* 이 게시물은 Debian용으로 작성되었으며 Ubuntu, Linux Mint, ArchLinux 등 모든 Linux 환경에서 작동합니다. MacOS도 이어야 하지만 테스트하지는 않았습니다. 1. 철자 설치 다음은 영어 사전입니다. 사용 가능한 사전 목... hugomarkdownjamstackwriting Astro로 프레임워크 간 상태 공유 아스트로는 아일랜드 아키텍처로 설정되어 있고 동시에 실행 도 가능하기 때문에 상태 관리가 좀 어렵습니다. 예를 들어 React 또는 Vue에서와 같이 컨텍스트에만 의존할 수는 없습니다. 이것은 Nano Stores가 매우 편리한 곳입니다. 나는 그들에 대해 읽은 이후로 그들을 시험해보고 싶었습니다. 이 기사에서는 React와 Vue 구성 요소 간에 상태를 공유하는 방법을 살펴봅니다. 이 문서... astrojamstack Eleventy 설정하기 Eleventy용 Git 기반 CMS인 에서 제공하는 초보자용 Eleventy 자습서에 오신 것을 환영합니다. 이 시리즈에서는 프레임워크 설치 방법 학습, 레이아웃, 페이지 및 블로그 게시물 작성, 데이터 파일 사용 소개부터 Eleventy의 기본 사항을 살펴보겠습니다. 처음부터 모든 것을 구축하고 진행하면서 Eleventy 개념을 설명하므로 사전 Eleventy 지식이 필요하지 않습니다. ... eleventytutorialbeginnersjamstack Eleventy의 템플릿 변수를 출력하고, 배열을 반복하고, 사용자 지정 플러그인을 실행하여 데이터를 생성할 수 있습니다. 이전에 사용했던 중괄호{{ }}는 유동 템플릿입니다. Liquid는 HTML 및 Markdown 파일의 기본 템플릿 언어이며 이 시리즈 전체에서 사용할 것입니다. Liquid가 보트를 띄우지 못하는 경우 Eleventy에는 , , , , 및 을 비롯한 다양한 템플릿 언어가 내장되어 있습니다. 또... eleventytutorialbeginnersjamstack 일레븐티 파셜 작성자: Eleventy용 Git 기반 CMS인 에서 제공했습니다. 부분은 반복을 줄이거나 복잡성을 숨기기 위해 레이아웃에 코드 스니펫을 포함하는 방법입니다. 이 강의에서는 부분을 사용하여 사이트에 내비게이션 바를 추가합니다. 기존 레이아웃에 탐색 표시줄을 추가할 수 있지만 수천 줄의 파일을 확장하는 것보다 작은 구성 요소로 세분화된 사이트를 유지 관리하는 것이 더 쉽습니다. 부분은 우리가 ... eleventytutorialbeginnersjamstack Eleventy의 블로깅 간단한 Eleventy 블로그는 두 가지 다른 페이지 유형으로 구성됩니다. 개별 블로그 게시물을 표시하는 페이지입니다. 이 강의에서는 이러한 페이지 유형이 함께 작동하여 고유한 블로그를 만드는 방법을 보여줍니다. 컬렉션은 콘텐츠를 그룹화하여 흥미로운 방식으로 나열, 페이지 매기기, 필터링을 수행할 수 있는 방법입니다. 블로그 목록 페이지 만들기 먼저 모든 블로그 게시물을 나열할 페이지를 만들... eleventytutorialbeginnersjamstack Eleventy 글로벌 데이터 파일 이 마지막 수업에서 우리는 지금까지 배운 모든 것을 주머니쥐를 발견할 수 있는 최고의 장소를 나열하는 하나의 멋진 페이지에 담을 것입니다. 글로벌 데이터 파일을 사용하면 .json 또는 .js 파일을 _data라는 디렉토리에 넣을 수 있으며 데이터는 모든 템플릿/콘텐츠 파일에서 사용할 수 있습니다. 먼저, 상위 opossum 명소가 포함된 글로벌 데이터 파일을 생성합니다. 우리 사이트에 마커... eleventybeginnerstutorialjamstack 휴고 파셜 작성자: Hugo용 Git 기반 CMS인 에서 제공했습니다. 부분 파일의 기본 개념은 간단합니다. 반복을 줄이거나 일부 복잡성을 숨기기 위해 레이아웃에 포함할 수 있는 파일입니다. 부분적으로 사이트에 탐색 모음을 추가합니다. 이 논리를 baseof.html 에 직접 추가할 수 있지만 때로는 레이아웃을 더 작은 부분으로 분할하여 2000줄 파일을 처리할 필요가 없도록 하는 것이 좋습니다. 최종... beginnerstutorialjamstackhugo Hugo에서 데이터 사용 작동 방식은 JSON, CSV, YAML, XML 또는 TOML 파일을 data 라는 디렉터리에 넣은 다음 .Site.Data 를 사용하여 레이아웃에서 해당 데이터에 액세스할 수 있습니다. 멋지게 꾸미고 싶다면 빌드 시 외부 소스에서 JSON 또는 CSV 파일을 다운로드할 수도 있습니다. 먼저 즐겨찾는 휴가지가 모두 포함된 데이터 파일을 만듭니다. 다음 콘텐츠로 생성/data/vacation... beginnerstutorialjamstackhugo Hugo 템플릿 기초 Hugo 템플릿을 사용하면 페이지가 렌더링되는 방식을 제어할 수 있습니다. 변수를 사용하고, 배열을 반복하고, 조건을 확인하고, 함수를 실행할 수 있습니다. 레이아웃에 있는 중괄호{{ }}는 Hugo 템플릿입니다. 머리말은 콘텐츠 파일 상단에 있는 메타데이터 스니펫입니다. 예를 들어 레이아웃을 설정하거나 현재 페이지가 초안임을 나타내는 일부 메타데이터는 Hugo 전용입니다. 머리말은 콘텐츠 ... beginnerstutorialjamstackhugo Hugo에서 블로깅 모든 블로그 게시물을 나열하는 페이지와 게시물 날짜가 있는 일련의 콘텐츠 페이지로 구성됩니다. 이 예제에서 레이아웃 계층 구조가 어떻게 작동하는지 확인할 것입니다. posts 디렉토리에 /content/라는 디렉토리를 만들고 그 안에 다음을 사용하여 _index.md라는 파일을 만듭니다. _index.md — 그게 무슨 뜻인지 기억하세요? 목차 파일이며 이 경우 게시물을 나열합니다. 현재 /... beginnerstutorialjamstackhugo Hugo 설정하기 Hugo 튜토리얼 소개에 오신 것을 환영합니다. 이 시리즈의 목표는 기본적인 웹 디자인 지식을 가진 새끼 사자에서 첫 번째 Hugo 웹 사이트를 만드는 데까지 안내하는 것입니다. 이 시리즈에서는 Hugo 사이트를 설정하는 방법, Hugo 레이아웃, 파셜 및 템플릿 사용의 기본 사항, 블로그를 설정하고 마지막으로 데이터 파일을 사용하는 방법을 배웁니다. 이 시리즈가 끝나면 자신만의 Hugo 사... beginnerstutorialjamstackhugo Jekyll에서 블로깅하기 블로그 게시물 만들기 게시물 콘텐츠 액세스 중 개별 게시물에 대한 레이아웃 만들기 다행스럽게도 Jekyll을 사용하면 블로그 게시물을 쉽게 관리할 수 있습니다. 블로그 게시물 규칙 새로운 Jekyll 프로젝트는 _posts 폴더와 단일 게시물 예제로 자동 생성됩니다. 이 수업에서는 우리나라의 호기심 많은 깃털 친구들 몇 명에 대한 게시물을 만들 것입니다. 유효한 게시물 이름은 [year]-[... jamstackbeginnerstutorialjekyll 지킬에 포함 그러나 때로는 여러 페이지에서 일관성을 유지하려는 더 작은 페이지 조각이 있습니다. 이에 대한 좋은 예는 소셜 미디어 공유 및 양식입니다. 페이지를 탐색, 섹션 제목 및 바닥글과 같은 더 작은 "구성 요소"로 나눌 수 있습니다. 포함 에 대해 자세히 알아보십시오. 포함 설정은 레이아웃과 매우 유사합니다. Jekyll이 인식할 수 있도록 _includes 폴더를 생성한 다음 HTML 조각을 그... jamstackbeginnerstutorialjekyll 지킬 서론 및 YAML YAML로 여러 줄 텍스트를 관리하는 방법 머리말은 HTML/Markdown 문서의 맨 위에 있는 영역으로, 페이지에 대한 변수와 콘텐츠를 작성할 수 있습니다. 값 자체는 4, 4.1, "4", 참/거짓 등 원하는 모든 것이 될 수 있습니다. 또한 YAML의 주석(처리되지 않는 유용한 메모)도 "#"기호로 가능하므로 매우 유용할 수 있습니다. 이제 이에 액세스하기 위해 Liquid를 사용하고... jamstackbeginnerstutorialjekyll Jekyll의 데이터 파일 대체 데이터베이스로 사용할 Jekyll 데이터 파일 생성 데이터 파일을 사용하여 Google 지도 채우기 Jekyll을 사용하면 컬렉션처럼 데이터 파일을 만들고 전역적으로 액세스할 수 있습니다. 이 방법으로 자신의 미니 데이터베이스를 유지 관리할 수 있지만 설정이 거의 필요하지 않습니다. 그런 다음 데이터 파일을 사용하여 멸종 위기에 처한 놀라운 조류의 실제 위치로 지도를 채웁니다. 그런 다... jamstackbeginnerstutorialjekyll Jekyll의 레이아웃 페이지 레이아웃 만들기 다른 레이아웃 내에서 레이아웃 사용 HTML로 웹 사이트를 작성할 때 머리글, 바닥글 및 탐색과 같은 많은 섹션이 여러 페이지에서 동일하게 유지된다는 것을 알 수 있습니다. 이것이 웹 페이지의 기본 "쉘"이 됩니다. index.html에서 모든 콘텐츠를 가져와 default.html에 붙여넣습니다. index.html 로 돌아가서 머리말을 사용하여 Jekyll에게 페이... jamstackbeginnerstutorialjekyll 110초 110: 렌더 플러그인 1부 Render 플러그인은 Nunjucks, Liquid 또는 JS 템플릿에서 사용할 수 있는 두 개의 단축 코드로 구성됩니다. 기본 11ty NPM 패키지와 함께 번들로 제공되며 11ty를 설치하는 즉시 사용할 수 있는 플러그인입니다. 프로젝트에 추가하는 두 개의 단축 코드는 renderTemplate 및 renderFile 입니다. 이 부분에서는 renderTemplate를 다룰 것입니다. ... 11tyjamstackjavascript
SupaBase를 사용하여 NextJS 웹 앱을 강화하는 방법 간단한 의제 웹 사이트를 구축해 달라는 친구/고객의 요청이 하나 있습니다. 요건 이렇습니다, (여기서 어려운건 없습니다😎) 사용자가 안건을 보고 스크롤하여 볼 수 있으며, 링크를 클릭하면 상세 부분으로 리디렉션됩니다 다시한번 말씀드리지만 어려운건 없습니다. 😎 여기서 유일한 관심사는: 동시에 좋은 유연성을 가지고 변화를 가질 수 있도록, JAMStack은 매우 유명하며 더 나은 유연성을 얻기... nextjsreacttutorialjamstack Jamstack 사이트에 문의 양식 추가하기 나는 최근에 내 블로그에 '연락처' 양식을 추가하여 방문자가 내 이메일을 명시적으로 제공하지 않고도 쉽게 연락할 수 있도록 하고 싶었습니다. 으로 내 정적 사이트에 대한 완벽한 솔루션을 찾았습니다. 연락처 양식, 이메일 가입 또는 기타 항목을 추가하고 싶을 수도 있습니다. 에서 내 양식을 확인할 수 있습니다. 하지만 저를 놀라게 한 것은 Google Forms, Basin, HubSpot, ... tutorialprogrammingjamstackwebdev 클라우드 제공업체에서 next/image를 사용하는 방법 사이트에서 next/image 구성 요소를 사용하면 반응형 이미지를 빠르고 쉽게 추가할 수 있습니다. 볼 수 있다면 next.js 애플리케이션에 Image 구성 요소를 추가하고, 자산 관리 공급자를 확인하도록 구성하고, 이미지를 활용하기 위해 사용자 정의 로더를 추가하는 과정을 안내하는 비디오를 만들었습니다. -r)를 실행할 수 있습니다. 몇 가지 기본 서식을 추가하고 next/image 태... kontentnextjsjamstackwebdev SvelteKit에서 설정하기 이 시리즈에서는 웹 프레임워크 학습의 기본 사항을 살펴봅니다. 우리가 하는 모든 일은 처음부터 만들어질 것이므로 이전 Svelte 또는 SvelteKit 지식이 필요하지 않습니다. 이 시리즈를 통해 자신만의 SvelteKit 프로젝트를 구축할 수 있는 기술과 지식을 갖게 될 것입니다. React 및 Vue와 같은 다른 JavaScript 프레임워크와 달리 Svelte에는 Svelte 코드를 ... beginnerssveltejamstacktutorial Nextjs(Vercel에서) + Ghost(렌더링에서)로 내 JAMstack 블로그 구축 가장 먼저 할 일은 Up-To-Date Tech를 사용하여 학습 블로그를 설정하는 것입니다. (내가 만든 마지막 블로그는 10년 전 워드프레스였습니다 :) ) 나에게 이 미니 프로젝트는 코딩에 너무 깊이 들어가지 않으면서 다시 손을 더럽히고 실행 가능한 것을 설정하는 것을 의미합니다. Git 워크플로 및 최신 빌드 도구를 사용하여 사전 렌더링된 콘텐츠가 CDN에 제공되고 API 및 서버리스 ... ghostjavascriptjamstacknextjs Cosmic 헤드리스 CMS에서 Next.js 미리보기 모드를 사용하는 방법 그러나 사이트가 구축된 후 CMS에 새 콘텐츠를 추가할 때 아직 게시할 준비가 되지 않은 초안 콘텐츠를 미리 볼 수 있는 방법이 필요합니다. 을 사용하여 요청 시 페이지를 렌더링하여 이 문제를 해결하고 정적 생성 중에 존재하지 않은 게시되지 않은 콘텐츠를 볼 수 있습니다. 헤드리스 CMS와 함께 Next.js 미리보기 모드를 사용하여 우리 자신과 공동 작업자를 위해 초안 콘텐츠를 미리 볼 수... nextjsjamstackheadlesscmswebdev Linux 및 MacOS에서 Markdown 파일의 대규모 맞춤법 검사 오늘 저는 90개 이상의 다양한 언어를 지원하는 무료 소프트웨어 맞춤법 검사기인 을 사용하여 파일 배치의 맞춤법을 검사하는 방법을 배웠습니다* 이 게시물은 Debian용으로 작성되었으며 Ubuntu, Linux Mint, ArchLinux 등 모든 Linux 환경에서 작동합니다. MacOS도 이어야 하지만 테스트하지는 않았습니다. 1. 철자 설치 다음은 영어 사전입니다. 사용 가능한 사전 목... hugomarkdownjamstackwriting Astro로 프레임워크 간 상태 공유 아스트로는 아일랜드 아키텍처로 설정되어 있고 동시에 실행 도 가능하기 때문에 상태 관리가 좀 어렵습니다. 예를 들어 React 또는 Vue에서와 같이 컨텍스트에만 의존할 수는 없습니다. 이것은 Nano Stores가 매우 편리한 곳입니다. 나는 그들에 대해 읽은 이후로 그들을 시험해보고 싶었습니다. 이 기사에서는 React와 Vue 구성 요소 간에 상태를 공유하는 방법을 살펴봅니다. 이 문서... astrojamstack Eleventy 설정하기 Eleventy용 Git 기반 CMS인 에서 제공하는 초보자용 Eleventy 자습서에 오신 것을 환영합니다. 이 시리즈에서는 프레임워크 설치 방법 학습, 레이아웃, 페이지 및 블로그 게시물 작성, 데이터 파일 사용 소개부터 Eleventy의 기본 사항을 살펴보겠습니다. 처음부터 모든 것을 구축하고 진행하면서 Eleventy 개념을 설명하므로 사전 Eleventy 지식이 필요하지 않습니다. ... eleventytutorialbeginnersjamstack Eleventy의 템플릿 변수를 출력하고, 배열을 반복하고, 사용자 지정 플러그인을 실행하여 데이터를 생성할 수 있습니다. 이전에 사용했던 중괄호{{ }}는 유동 템플릿입니다. Liquid는 HTML 및 Markdown 파일의 기본 템플릿 언어이며 이 시리즈 전체에서 사용할 것입니다. Liquid가 보트를 띄우지 못하는 경우 Eleventy에는 , , , , 및 을 비롯한 다양한 템플릿 언어가 내장되어 있습니다. 또... eleventytutorialbeginnersjamstack 일레븐티 파셜 작성자: Eleventy용 Git 기반 CMS인 에서 제공했습니다. 부분은 반복을 줄이거나 복잡성을 숨기기 위해 레이아웃에 코드 스니펫을 포함하는 방법입니다. 이 강의에서는 부분을 사용하여 사이트에 내비게이션 바를 추가합니다. 기존 레이아웃에 탐색 표시줄을 추가할 수 있지만 수천 줄의 파일을 확장하는 것보다 작은 구성 요소로 세분화된 사이트를 유지 관리하는 것이 더 쉽습니다. 부분은 우리가 ... eleventytutorialbeginnersjamstack Eleventy의 블로깅 간단한 Eleventy 블로그는 두 가지 다른 페이지 유형으로 구성됩니다. 개별 블로그 게시물을 표시하는 페이지입니다. 이 강의에서는 이러한 페이지 유형이 함께 작동하여 고유한 블로그를 만드는 방법을 보여줍니다. 컬렉션은 콘텐츠를 그룹화하여 흥미로운 방식으로 나열, 페이지 매기기, 필터링을 수행할 수 있는 방법입니다. 블로그 목록 페이지 만들기 먼저 모든 블로그 게시물을 나열할 페이지를 만들... eleventytutorialbeginnersjamstack Eleventy 글로벌 데이터 파일 이 마지막 수업에서 우리는 지금까지 배운 모든 것을 주머니쥐를 발견할 수 있는 최고의 장소를 나열하는 하나의 멋진 페이지에 담을 것입니다. 글로벌 데이터 파일을 사용하면 .json 또는 .js 파일을 _data라는 디렉토리에 넣을 수 있으며 데이터는 모든 템플릿/콘텐츠 파일에서 사용할 수 있습니다. 먼저, 상위 opossum 명소가 포함된 글로벌 데이터 파일을 생성합니다. 우리 사이트에 마커... eleventybeginnerstutorialjamstack 휴고 파셜 작성자: Hugo용 Git 기반 CMS인 에서 제공했습니다. 부분 파일의 기본 개념은 간단합니다. 반복을 줄이거나 일부 복잡성을 숨기기 위해 레이아웃에 포함할 수 있는 파일입니다. 부분적으로 사이트에 탐색 모음을 추가합니다. 이 논리를 baseof.html 에 직접 추가할 수 있지만 때로는 레이아웃을 더 작은 부분으로 분할하여 2000줄 파일을 처리할 필요가 없도록 하는 것이 좋습니다. 최종... beginnerstutorialjamstackhugo Hugo에서 데이터 사용 작동 방식은 JSON, CSV, YAML, XML 또는 TOML 파일을 data 라는 디렉터리에 넣은 다음 .Site.Data 를 사용하여 레이아웃에서 해당 데이터에 액세스할 수 있습니다. 멋지게 꾸미고 싶다면 빌드 시 외부 소스에서 JSON 또는 CSV 파일을 다운로드할 수도 있습니다. 먼저 즐겨찾는 휴가지가 모두 포함된 데이터 파일을 만듭니다. 다음 콘텐츠로 생성/data/vacation... beginnerstutorialjamstackhugo Hugo 템플릿 기초 Hugo 템플릿을 사용하면 페이지가 렌더링되는 방식을 제어할 수 있습니다. 변수를 사용하고, 배열을 반복하고, 조건을 확인하고, 함수를 실행할 수 있습니다. 레이아웃에 있는 중괄호{{ }}는 Hugo 템플릿입니다. 머리말은 콘텐츠 파일 상단에 있는 메타데이터 스니펫입니다. 예를 들어 레이아웃을 설정하거나 현재 페이지가 초안임을 나타내는 일부 메타데이터는 Hugo 전용입니다. 머리말은 콘텐츠 ... beginnerstutorialjamstackhugo Hugo에서 블로깅 모든 블로그 게시물을 나열하는 페이지와 게시물 날짜가 있는 일련의 콘텐츠 페이지로 구성됩니다. 이 예제에서 레이아웃 계층 구조가 어떻게 작동하는지 확인할 것입니다. posts 디렉토리에 /content/라는 디렉토리를 만들고 그 안에 다음을 사용하여 _index.md라는 파일을 만듭니다. _index.md — 그게 무슨 뜻인지 기억하세요? 목차 파일이며 이 경우 게시물을 나열합니다. 현재 /... beginnerstutorialjamstackhugo Hugo 설정하기 Hugo 튜토리얼 소개에 오신 것을 환영합니다. 이 시리즈의 목표는 기본적인 웹 디자인 지식을 가진 새끼 사자에서 첫 번째 Hugo 웹 사이트를 만드는 데까지 안내하는 것입니다. 이 시리즈에서는 Hugo 사이트를 설정하는 방법, Hugo 레이아웃, 파셜 및 템플릿 사용의 기본 사항, 블로그를 설정하고 마지막으로 데이터 파일을 사용하는 방법을 배웁니다. 이 시리즈가 끝나면 자신만의 Hugo 사... beginnerstutorialjamstackhugo Jekyll에서 블로깅하기 블로그 게시물 만들기 게시물 콘텐츠 액세스 중 개별 게시물에 대한 레이아웃 만들기 다행스럽게도 Jekyll을 사용하면 블로그 게시물을 쉽게 관리할 수 있습니다. 블로그 게시물 규칙 새로운 Jekyll 프로젝트는 _posts 폴더와 단일 게시물 예제로 자동 생성됩니다. 이 수업에서는 우리나라의 호기심 많은 깃털 친구들 몇 명에 대한 게시물을 만들 것입니다. 유효한 게시물 이름은 [year]-[... jamstackbeginnerstutorialjekyll 지킬에 포함 그러나 때로는 여러 페이지에서 일관성을 유지하려는 더 작은 페이지 조각이 있습니다. 이에 대한 좋은 예는 소셜 미디어 공유 및 양식입니다. 페이지를 탐색, 섹션 제목 및 바닥글과 같은 더 작은 "구성 요소"로 나눌 수 있습니다. 포함 에 대해 자세히 알아보십시오. 포함 설정은 레이아웃과 매우 유사합니다. Jekyll이 인식할 수 있도록 _includes 폴더를 생성한 다음 HTML 조각을 그... jamstackbeginnerstutorialjekyll 지킬 서론 및 YAML YAML로 여러 줄 텍스트를 관리하는 방법 머리말은 HTML/Markdown 문서의 맨 위에 있는 영역으로, 페이지에 대한 변수와 콘텐츠를 작성할 수 있습니다. 값 자체는 4, 4.1, "4", 참/거짓 등 원하는 모든 것이 될 수 있습니다. 또한 YAML의 주석(처리되지 않는 유용한 메모)도 "#"기호로 가능하므로 매우 유용할 수 있습니다. 이제 이에 액세스하기 위해 Liquid를 사용하고... jamstackbeginnerstutorialjekyll Jekyll의 데이터 파일 대체 데이터베이스로 사용할 Jekyll 데이터 파일 생성 데이터 파일을 사용하여 Google 지도 채우기 Jekyll을 사용하면 컬렉션처럼 데이터 파일을 만들고 전역적으로 액세스할 수 있습니다. 이 방법으로 자신의 미니 데이터베이스를 유지 관리할 수 있지만 설정이 거의 필요하지 않습니다. 그런 다음 데이터 파일을 사용하여 멸종 위기에 처한 놀라운 조류의 실제 위치로 지도를 채웁니다. 그런 다... jamstackbeginnerstutorialjekyll Jekyll의 레이아웃 페이지 레이아웃 만들기 다른 레이아웃 내에서 레이아웃 사용 HTML로 웹 사이트를 작성할 때 머리글, 바닥글 및 탐색과 같은 많은 섹션이 여러 페이지에서 동일하게 유지된다는 것을 알 수 있습니다. 이것이 웹 페이지의 기본 "쉘"이 됩니다. index.html에서 모든 콘텐츠를 가져와 default.html에 붙여넣습니다. index.html 로 돌아가서 머리말을 사용하여 Jekyll에게 페이... jamstackbeginnerstutorialjekyll 110초 110: 렌더 플러그인 1부 Render 플러그인은 Nunjucks, Liquid 또는 JS 템플릿에서 사용할 수 있는 두 개의 단축 코드로 구성됩니다. 기본 11ty NPM 패키지와 함께 번들로 제공되며 11ty를 설치하는 즉시 사용할 수 있는 플러그인입니다. 프로젝트에 추가하는 두 개의 단축 코드는 renderTemplate 및 renderFile 입니다. 이 부분에서는 renderTemplate를 다룰 것입니다. ... 11tyjamstackjavascript