digital garden 다운로드 - digital garden 소스 코드 다운로드

digital garden

AI 소스 코드

v0.7.2

다운로드

현대 개발자 블로그 템플릿 (디지털 정원 스타터)

가든 프 로모 더 많은 스크린 샷은 여기에 있습니다

Next.js 앱 라우터, MDX, ContentLayer, Tailwind CSS, @Shadcn/UI, Lucide Icons 등을 사용하는 개발자를위한 오픈 소스 블로깅 (디지털 원예) 템플릿.

이 템플릿을 좋아하거나 사용하는 경우 github에 별을 줘. 이것은 더 많은 사람들이 그것을 발견하는 데 도움이되므로 템플릿을 개선하는 데 도움이됩니다.

참고 :이 프로젝트는 항상 진화하고 있으며 완벽하거나 완료되지 않습니다. 나는 항상 제안과 기여에 열려 있습니다. 아이디어 나 제안이 있으면 문제 나 PR을 자유롭게 열어주십시오. 기여하려면 계획된 기능에 대한 로드맵을 볼 수도 있습니다.

동기 부여
시작하기
- 내용 작성
  - 프론트 마터
- 전개
사용자 정의
- 글꼴
- 그림 물감
- 서명
- 이미지
  - 홈페이지 아바타
- 메타 데이터
  - 항해
  - 사회적 연결
- 해석학
  - Vercel
  - 우마미
  - 그럴듯한
  - Google 웹 로그 분석
  - 기타 분석 제공 업체
- 뉴스 레터 구독
  - Mailerlite
  - 다른 뉴스 레터 제공 업체
- 영웅 섹션
- 다른 팁 및 요령
  - 이미지 최적화
예
특징 및 로드맵
기여
- 기고자
- 어떻게?
영감과 언급
지원하다

동기 부여

콘텐츠를 만드는 개발자로서, 나는 내 생각과 아이디어를 세상과 공유 할 수있는 블로그와 디지털 정원을 원합니다. 이제 현재 "완벽한 솔루션"이 없습니다. 포함 된 분석, SEO, 이메일 구독, 최신 툴링, 간단한 디자인 등을 포함하여 처음부터 하나를 작성하거나 디자인 템플릿을 사용하고 기능을 코딩하거나 CMS/No 코드 도구를 사용해야합니다.

그래서 나는 나 자신을 사용할 솔루션을 만들기로 결정했습니다. 이것이 결과입니다.

시작하기

내 자신의 디지털 정원을 위해이 템플릿을 설정하는 방법을보고 싶다면 모든 변경 사항을 사용 하여이 커밋을 확인할 수 있습니다.

repo를 템플릿으로 사용하십시오
pnpm install 로 종속성을 설치하십시오
정보 및 일반 설정으로 utils/metadata.ts 편집하십시오
사용하는 소프트웨어 및 하드웨어를 사용하여 utils/uses-data.ts 편집하십시오
프로젝트를 사용하여 utils/projects-data.ts 편집하십시오
내비게이션에서 원하는 링크를 사용하여 utils/navigation-links.ts 편집
가용성을 사용하여 content/pages/now 편집하십시오
바이오와 함께 content/pages/about 편집하십시오
pnpm dev 로 개발 서버를 실행하십시오

브라우저에서 http : // localhost : 3000을 엽니 다.

내용 작성

Markdown 또는 MDX에서 콘텐츠를 작성할 수 있습니다. 컨텐츠는 content/ 에 있으며 폴더로 구성됩니다. pages 폴더에는 페이지가 포함되어 있습니다. posts 폴더에는 블로그 포스트가 포함되어 있습니다. projects 폴더에는 프로젝트가 포함되어 있습니다.

목록 페이지 편집은 lib 폴더에서 수행됩니다.

/uses lib/uses-data.ts
/projects - lib/projects-data.ts
/social - lib/social-data.ts

프론트 마터

FrontMatter는 페이지 및 게시물의 메타 데이터를 정의하는 데 사용됩니다. 파일 상단에 있으며 Yaml로 작성되었습니다. 다음 필드를 정의 할 수 있습니다.

title - 페이지/게시물의 제목입니다
description - 페이지/게시물의 설명
publishedDate 게시물의 날짜 (페이지에서 사용되지 않음)
lastUpdatedDate 페이지/게시 날짜
tags - 게시물의 태그 목록. tagOptions 목록에 추가하여 새 태그를 추가 할 수 있습니다. (페이지에서 사용되지 않음)
series - 게시물 시리즈. 시리즈에는 게시물에 대한 제목과 주문 번호가 있습니다. (페이지에서 사용되지 않음)
author - 게시물의 저자. 저자에게는 이름과 이미지가 있습니다. (페이지에서 사용되지 않음)
status - 페이지/게시물이 게시되었는지 여부

전개

Vercel 또는 다른 호스팅 제공 업체로 프로젝트를 배포 할 수 있습니다. Vercel을 사용하려면이 readme 상단의 버튼을 사용할 수 있습니다.

package.json 저자 정보를 업데이트합니다
레포를 Github에 게시하십시오
Vercel에서 새 프로젝트를 만들고 repo 가져 오기
웹 사이트의 루트 URL을 가리 키도록 Vercel에서 NEXT_PUBLIC_BASE_URL 환경 변수 설정
분석 및/또는 뉴스 레터 제공 업체를 사용하려는 경우 Vercel에서 각 환경 변수를 설정하십시오.
빌드 및 배포?

사용자 정의

글꼴

이 프로젝트는 Inter를 기본 글꼴로 사용합니다. next/fonts 패키지를 사용하여 app/layout.tsx 에서 변경할 수 있습니다.

그림 물감

이 프로젝트는 Tailwind Colors와 @Shadcn/UI 구성을 사용합니다. globals.css 에서 색상을 사용자 정의하십시오.

서명

바닥 글에 사용할 수있는 시그니처 구성 요소가 있습니다. components/signature.tsx 에서 서명을 편집 할 수 있습니다. 나는 Figma를 사용하여 Caveat 글꼴로 서명을 작성하여 SVG로 내보냈습니다. 동일한 작업을 수행하고 구성 요소에서 SVG를 업데이트 할 수 있습니다.

이미지

이미지 및 기타 미디어 파일은 public/ 디렉토리에 있습니다. /<filename>.<ext> 경로를 사용하여 콘텐츠에서 사용할 수 있습니다.

홈페이지 아바타

다음은 2 분 안에 Figma에서 비슷한 아바타를 만드는 방법에 대한 빠른 자습서입니다. https://youtu.be/ny-vaeehjkm

메타 데이터

utils/metadata.ts 에서 메타 데이터 및 저자 세부 정보를 변경할 수 있습니다. 이것은 사이트 주변에서 제목, 소셜 링크, 소셜 핸들, SEO 등에 사용됩니다.

항해

lib/navigation-links.ts 에서 내비게이션 링크를 편집 할 수 있습니다.

사회적 연결

lib/social-data.ts 에서 소셜 링크를 편집 할 수 있습니다. 파일에 추가하고 플랫폼 이름을 키로 사용하고 URL을 값으로 사용하여 새로운 소셜 링크를 추가 할 수도 있습니다. SocialButton 구성 요소는 단순한 ICONS에서 지원되는 경우 플랫폼의 아이콘을 자동으로 추가합니다.

해석학

Vercel

구성하려면 프로젝트를 선택하여 Vercel Project Dashboard에서 활성화 한 다음 분석 탭을 클릭하고 대화 상자에서 활성화를 클릭해야합니다.

우마미

우마미는 자체 호스팅 옵션을 갖춘 간단하고 사용하기 쉬운 웹 분석 솔루션입니다! Umami 웹 사이트에서 자세한 내용을 읽을 수 있습니다. (힌트 : 철도에서는 저렴한 비용 또는 무료로 자체 주최 할 수 있습니다) .

구성 : set NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID 환경 변수 .env.local 파일 및 vercel dashboard에서 환경 변수.

그럴듯한

Plausible은 Google 웹 로그 분석에 대한 간단하고 가벼운 오픈 소스 대안입니다. 그럴듯한 웹 사이트에서 자세한 내용을 읽을 수 있습니다.

구성 : set NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL 환경 변수 .env.local 파일 및 vercel dashboard에서 환경 변수. 광고 차단제에 대해 우려하는 경우 자신의 도메인을 통해 그럴듯한 스크립트를 프록시 할 수 있습니다. 당신은 그것에 대해 더 읽을 수 있습니다.

Google 웹 로그 분석

Google Analytics는 Google이 제공하는 웹 분석 서비스로 현재 Google 마케팅 플랫폼 브랜드의 플랫폼으로 웹 사이트 트래픽을 추적하고보고합니다. Google Analytics 웹 사이트에서 자세한 내용을 읽을 수 있습니다.

구성 : NEXT_PUBLIC_GOOGLE_ANALYTICS_ID 환경 변수를 .env.local 파일과 Vercel Dashboard에서 설정하십시오.

기타 분석 제공 업체

다른 분석 제공 업체 지원이 진행 중입니다. 귀하가 직접 구현하려는 경우 제안이나 PR이 있으면 문제를 자유롭게 열어주십시오.

뉴스 레터 구독

Mailerlite

Mailerlite는 모든 유형의 비즈니스를위한 간단한 이메일 마케팅 도구입니다. Mailerlite 웹 사이트에서 자세한 내용을 읽을 수 있습니다.

구성 : EMAIL_API_BASE , EMAIL_API_KEY 및 EMAIL_GROUP_ID 환경 변수를 .env.local 파일 및 vercel dashboard에서 설정하십시오.

다른 뉴스 레터 제공 업체

다른 뉴스 레터 제공 업체 지원이 진행 중입니다. 귀하가 직접 구현하려는 경우 제안이나 PR이 있으면 문제를 자유롭게 열어주십시오.

영웅 섹션

수입 된 영웅 구성 요소를 변경하여 app/(site)/page.tsx 에서 사용할 3 가지 다른 영웅 변형 중에서 선택할 수 있습니다.

HeroSimple 이미지, 제목 및 자막이있는 간단한 중앙 영웅 섹션.
HeroVideo -2 열 영웅 섹션은 한쪽에 VideoASK가 포함되어 있고 다른쪽에 제목 및 자막이 포함되어 있습니다.
HeroImage -2 열 영웅 섹션은 한쪽과 제목에 이미지가 있고 다른쪽에는 자막이 있습니다.
HeroMinimal 작은 영웅 섹션 이름 및 직업 제목

다른 팁 및 요령

이미지 최적화

ImageOptim으로 이미지를 무료로 최적화하는 것이 좋습니다. Mac에 설치 한 다음 Finder에서 public 폴더를 엽니 다. 모든 이미지를 선택하고 마우스 오른쪽 버튼을 클릭하고 "이미지 OPTIM으로 열기"를 선택하십시오. 폴더의 모든 이미지를 최적화합니다.

참고 : 과도하게 사용하지 마십시오. 손실 압축 알고리즘으로 이미지를 쉽게 나쁘게 보이게 할 수 있습니다.

예

https://davidlevai.com/- 내 자신의 디지털 가든
용과 코드 디지털 가든 - 간단한 수정 소스
Shafie Mukhre의 블로그 - 소스
Praveen Kumars의 블로그 - 소스
Steven Selolo의 블로그 - 소스
Marton의 블로그 - 소스

템플릿을 사용하는 경우 PR을 만들고이 목록에 블로그를 추가하십시오!

특징 및 로드맵

기여

기고자

@thedevdavid
@br4adam

이 프로젝트는 개발자를위한 개발자의 것입니다. 모든 기부금을 환영합니다! 자유롭게 해주세요 :

버그를보고하십시오
현재 상태와 개선을위한 아이디어에 대해 토론하십시오
수정을 제출하십시오
새로운 기능을 제안합니다

어떻게?

Repo를 포크하고 develop 에서 지점을 만듭니다.
코드를 추가하십시오.
문서를 업데이트하십시오.
코드 라인과 앱이 구축되는지 확인하십시오.
오픈 풀 요청 develop 지점.

귀하가 한 모든 기부금은 MIT 소프트웨어 라이센스에 따라됩니다. 요컨대, 코드 변경을 제출하면 제출물은 프로젝트를 다루는 동일한 MIT 라이센스 아래에있는 것으로 이해됩니다. 행동 강령은 여기에서 찾을 수 있습니다.

영감과 언급

Delba Oliveira 개인 블로그 - Contentlayer와 함께 목차 사용 및 구조화
Timlrx/Tailwind-Nextjs-Starter-Blog- 아이디어

지원하다

이 템플릿을 좋아하거나 사용하는 경우 github에 별을 줘.

확장하다

추가 정보

버전 v0.7.2
유형 AI 소스 코드
업데이트 시간 2025-08-18
크기 6.04MB
출처 Github

digital garden