tailwind nextjs starter blog 다운로드 - tailwind nextjs starter blog 소스 코드 다운로드

tailwind nextjs starter blog

AI 소스 코드

v2.3.0

다운로드

테일 윈드 넥스 js-banner

Tailwind Nextjs 스타터 블로그

이것은 다음.js, Tailwind CSS 블로그 스타터 템플릿입니다. 버전 2는 React Server 구성 요소가있는 다음 앱 디렉토리를 기반으로하며 ContentLayer를 사용하여 Markdown 컨텐츠를 관리합니다.

아마도 가장 기능이 풍부한 다음 Next.js Markdown 블로깅 템플릿 일 것입니다. 쉽게 구성 가능하고 사용자 정의 할 수 있습니다. 기존 Jekyll 및 Hugo 개별 블로그로의 대체품으로 완벽합니다.

시작하려면 아래 문서를 확인하십시오.

직면 한 문제? FAQ 페이지를 확인하고 과거 문제를 검색하십시오. 이전에 게시 된 사람이 없으면 새로운 문제를 자유롭게 열십시오.

기능 요청? 과거 토론에서 이전에 제기되었는지 확인하십시오. 그렇지 않으면 새로운 토론 스레드를 자유롭게 시작하십시오. 모든 아이디어는 환영받습니다!

변형

참고 : 이들은 다른 프레임 워크를 사용하거나 공식적으로 지원되지 않는 코드베이스의 상당한 변경 사항을 사용하는 커뮤니티 기고 포크입니다.

Astro Alternative- 꼬리 바람 Astro 템플릿.

리믹스 런 대안-테일 윈드 리믹스-실행 스타터 블로그 템플릿.

국제화 지원 - I18N 및 소스 코드를 사용한 템플릿.

예 v2

데모 블로그 -이 repo
내 개인 블로그 - 날짜와 함께 자동 생성 블로그 게시물로 수정되었습니다.
Karhdo의 블로그 -Karhdo의 블로그 -Karhdo 's Coding Adventure (소스 코드)
Ben.codes 블로그 - 소프트웨어 개발에 관한 Benoit의 개인 블로그 (소스 코드)
TSIX 블로그 - 프론트 엔드 엔지니어는 업무 및 연구에서 몇 가지 지식 포인트를 기록하는 데 사용됩니다 .
Soto의 블로그 - V1에서 업그레이드 된보다 개인화 된 개인 웹 사이트 (소스 코드)
Prabhu의 블로그 -Prabhu의 개인 웹 사이트가있는 블로그 (소스 코드)
Rabby Hasan의 블로그 -Cloud를 통한 풀 스택 개발에 대한 Rabby Hasan의 개인 블로그 (소스 코드)
rentribe.dev -Quenscree의 개인 블로그; 사이버 보안 Shenanigans, Frontend Webdev 등 (소스 코드)
dalelarroder.com -Dale Larroder의 개인 웹 사이트는 V1에서 업그레이드 됨 (소스 코드)
thetalhatahir.com- Talha Tahir의 개인 블로그. 기사 썸네일, 링크드 인 카드, 아름다운 영웅 콘텐츠, 기술 이모티콘 추가.
Homing.so -Homing의 개인 블로그가 배우는 것들 (소스 코드)
ZS1M의 블로그 -Daily Learning 기술 콘텐츠 녹음 및 공유를위한 ZS1M의 개인 블로그 (소스 코드)
dariuszwozniak.net- 소프트웨어 개발 블로그 (소스 코드)
Dreams.Plus- 삶과 기술에 대한 생각과 기록을위한 블로그 사이트.
Francisaguilar.co 블로그 - 기술, 피트니스 및 개인 개발에 대해 이야기하는 Francis Aguilar의 개인 블로그.
Min71 Dev 블로그 - 블록 체인, 개발 및 등에 대한 개인 블로그 (소스 코드)
Bryce Yu의 블로그 -Bryce Yu의 분산 시스템, 데이터베이스 및 웹 개발에 대한 개인 블로그. (출처 코드)
원격 스타트 업 Senpai 애니메이션 시리즈 웹 사이트 - 애니메이션 시리즈 원격 스타트 업 Senpai 용 방문 페이지.
Secret Base -Jac HSU의 개인 블로그. 기술, 생각 및 일반적인 삶에 대한 이야기.
Zsebinformatikus- 정보 SuperHighway 가이드 블로그.
Anton Morgunov의 블로그 - 지나치게 단순화되지 않은 과학에 대해 이야기하거나 이론적 및 계산 화학이 시원한 이유.
Hans 블로그 - Hans의 개인 블로그, 프론트 엔드 기술, 갤러리 및 여행 일기 中文. (출처 코드)
Cub3y0nd의 포트폴리오 -Cub3y0nd의 사이버 보안 연구 노트 「中文」
London Tech Talk- 기술 동향과 외국인 생활 경험을 탐구하는 팟 캐스트. - 日本語
Crud Flow 블로그 - AI, 클라우드 엔지니어링, 데이터 과학 및 개인 개발에 대한 기술 블로그
Trillium의 블로그 - 이력서 PDF 켜기 /resume 페이지를 렌더링하도록 수정되었습니다. (출처 코드)
Frank의 기술 블로그 - 소프트웨어 개발 및 기술에 대한 Frank의 개인 블로그. (출처 코드)
Wujie의 블로그 : 旅行者计划 -Wujie 's Personal Digital Garden (소스 코드)
Xiaodong의 블로그 - Xiaodong의 프론트 엔드 기술 및 Life에 대한 개인 블로그. 「中文」 (소스 코드)
azurtelier.com- 기술, 음악, AI 일러스트레이션 등을위한 Amos의 개인 웹 사이트 [English/中文] (소스 코드)
Joshhaines.com- Josh Haines의 개인 웹 사이트. (출처 코드)
- Jigu의 블로그 - Tech, Crypto, Golang 및 Life에 관한 Jigu의 개인 블로그. 「中文」
Andrewsam.xyz- Shadcn, Prisma, Mongodb, Auth.js, 이력서 페이지, 사용자 정의 경험 타임 라인 및 기술 구성 요소를 사용한 Andrew의 개인 웹 사이트. (출처 코드)
Rulli Damara Putra의 포트폴리오 - Rully의 개인 블로그 및 포트폴리오.
blog.taoluyuan.com 套路猿- 멀티 테마 전환을 지원하는 개인 기술 블로그. 「中英」
가사 recode.com -A Song 가사 웹 사이트를 제공하는 Original 가사, Romanisation 및 사용자 정의 가능한 시청 옵션이있는 영어 번역.
Bmacharia.com -Benson Macharia의 사이버 보안 및 IT 위험 관리에 관한 기술 블로그.
Armujahid.me -Abdul Rauf의 기술 및 임의의 물건에 대한 개인 블로그.
leohuynh.dev- ?? Leo의 Dev 블로그 - 스토리, 통찰력 및 아이디어. 추가 /snippets , /books 페이지, ProfileCard , CareerTimeline 구성 요소 등을 추가하십시오.
Opensats Blog -501 (c) (3) 공공 자선 단체는 무료 및 오픈 소스 프로젝트를 지속적으로 자금을 지원하는 것을 목표로합니다. (출처 코드)
Schedles 블로그 - 컨텐츠 제작자를위한 소셜 미디어 일정 팁, 전략 및 제품 업데이트. (프로젝트 링크)
Yawdev 블로그 - IT -Agency / 소프트웨어 개발. 기술 및 비즈니스에 대한 블로그 (프로젝트 링크)
엔지니어링 노트 -Jonas Vetterle 개인 웹 사이트 및 블로그. AI 및 Quantum Computing을 포함하여 관심있는 소프트웨어 엔지니어링에 관한 기사를 작성하고 있습니다.
Screenager.dev- 개인 웹 사이트는 포트폴리오 및 블로그입니다. 내 학습 여정과 일부 가이드를 문서화합니다.
Kezhenxu94의 블로그 - Dev, Tips & Tricks, Tutorials 등에 대한 블로깅.

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

예 v1

v1- 블로그 -showcase.webm

템플릿에 대한 사용자와 기여자 커뮤니티에 감사드립니다! 우리는 더 이상 새로운 블로그 목록을 수락하지 않습니다. 버전 1에서 버전 2로 업데이트 된 경우이 목록에서 블로그를 제거하고 위의 것에 추가하십시오.

Aloisdg 's Cookbook- 사진과 레시피와 함께!
다음 번역이 포함 된 Gautierarcin의 데모 - MDX 게시물의 번역, 소스 코드 포함
David Levai의 Digital Garden- 맞춤형 디자인 및 추가 이메일 구독
THVU.DEV- mdx-embed , View Count, 읽기 분 등이 추가되었습니다.
Irvin.dev- Irvin Lin의 개인 사이트. YouTube 임베딩이 추가되었습니다.
Kirillso.com- 개인 블로그 및 웹 사이트.
SomegySharpe.com -Tincre의 주요 회사 블로그
blog.b00st.com -B00st.com의 주요 음악 프로모션 블로그
Astrosaurus.me -Ephraim Atta -Duncan의 개인 블로그
dhanrajsp.me- Dhanraj의 개인 사이트 및 블로그.
blog.r00ks.io -Austin Rooks의 개인 블로그 (소스 코드).
Honghong.me -Tszhong의 개인 웹 사이트 (소스 코드)
Marceloformentao.dev -Marcelo Formentão 개인 웹 사이트 (소스 코드).
abiraja.com- 실행 가능한 JS 코드 스 니펫 구성 요소가 포함되어 있습니다!
bpiggin.com -Ben Piggin의 개인 블로그
MAQIB.CN- 중국 프론트 엔드 개발자 블로그 狂奔小马的博客 (源码)
Ambilena.com- 다가오는 음악가를위한 전자 음악 블로그 및 인쇄물.
0xchai.io -Chai의 개인 블로그
Techipedia- 사용자 지정 설치 버튼 및 상단 진행 막대가있는 간단한 블로그 프로그레시브 웹 앱
Reubence.com -Reuben Rapose의 디지털 가든
Axolo.co/Blog- 엔지니어링 관리 뉴스 및 Axolo.co 업데이트 (홈페이지의 기사에 대한 이미지 미리보기 포함)
musing.vercel.app -Parth Desai의 개인 블로그 (소스 코드)
Onyourmental.com -On Mental Podcast 용 Curtis Warcup 웹 사이트 (소스 코드)
cwarcup.com -Curtis Warcup의 개인 웹 사이트 및 블로그 (소스 코드).
Ondiek -Elijah.me -Ondiek Elijah의 웹 사이트 및 블로그 (소스 코드).
jmalvarez.dev -José Miguel Álvarez의 개인 블로그 (소스 코드)
Justingosses.com -Justin Gosses의 개인 웹 사이트 및 블로그 (소스 코드)
https://bitoflearning-9a57.fly.dev/- Sangeet Agarwal의 개인 블로그, 인디 스택 (소스 코드)을 사용하여 리믹스로 Relatformed
Raphaelchelly.com -Raphaël Chelly의 개인 웹 사이트 및 블로그 (소스 코드)
Kaveh.Page -Kaveh Tehrani의 개인 블로그. 태그 디렉토리, 프로필 카드, 게시물 디렉토리에서 읽기 시간 등이 추가되었습니다.
DRAKEROSSMAN.COM- Drake Rossman의 Nixos, Rust, 소프트웨어 아키텍처 및 엔지니어링 관리 및 일반적인 Musings에 대한 블로그.
meamenu.com-이 템플릿에서 시작하는 방문 페이지 및 제품 블로그. 또한 애니메이션, 맞춤형 레이아웃 템플릿, 블로그 댓글을위한 Waline 및 PrimerAct Forms [ITA]에 프레임 모션을 사용합니다.
giovanni.orciuolo.it -Giovanni Orciuolo의 개인 웹 사이트, 블로그 및 Everything Nerd.

동기 부여

기존 블로그를 NextJS 및 Tailwind CSS로 포트하고 싶었지만 상자 템플릿에서 쉽게 사용할 수 없었기 때문에 하나를 만들기로 결정했습니다. 디자인은 Tailwindlabs 블로그에서 수정되었습니다.

나는 Beautiful-Jekyll 및 Hugo Academic과 같은 인기있는 블로그 템플릿만큼 기능이 풍부하지만 Best of React의 생태계와 현재 웹 개발의 모범 사례를 갖추고 싶었습니다.

특징

typescript가있는 다음
ContentLayer 컨텐츠 로직을 관리합니다
테일 윈드 3.0 및 기본 색상 속성으로 쉬운 스타일 사용자 정의
MDX- Markdown 문서에 JSX를 작성하십시오!
완벽한 등대 점수 - 등대 보고서
경량, 85KB 첫 번째로드 j
모바일 친화적 인보기
가볍고 어두운 테마
다음/글꼴로 글꼴 최적화
Pliny와의 통합을 제공합니다.
- 우마미, 그럴듯한, 간단한 분석, Posthog 및 Google 웹 로그 분석을 포함한 여러 분석 옵션
- Giscus, 발화 또는 disqus를 통한 의견
- 뉴스 레터 API 및 MailChimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus 및 Beehiiv를 지원하는 구성 요소
- KBAR 또는 Algolia를 사용한 명령 팔레트 검색
REHYPE-PRISM-PLUS를 통한 라인 번호 및 선으로 강조 표시되는 서버 측 구문
Katex를 통해 지원되는 수학 디스플레이
REHYPE 호환을 통한 인용 및 참고 문헌 지원
github는 warick-blockquote-alert를 통해 경고합니다
다음/이미지를 통한 자동 이미지 최적화
태그 지원 - 각 고유 한 태그는 자체 페이지입니다.
여러 저자에 대한 지원
3 개의 다른 블로그 레이아웃
2 개의 다른 블로그 목록 레이아웃
블로그 게시물의 중첩 라우팅 지원
프로젝트 페이지
미리 구성된 보안 헤더
RSS 피드, 사이트 맵 등으로 SEO 친화적!

샘플 게시물

마크 다운 가이드
Next.js에서 이미지에 대해 자세히 알아보십시오
수학 조판 투어
간단한 MDX 이미지 그리드
긴 산문의 예
중첩 노선 게시물의 예

빠른 시작 가이드

레포를 복제하십시오

npx degit ' timlrx/tailwind-nextjs-starter-blog '

personalize siteMetadata.js (사이트 관련 정보)
다른 분석 제공 업체 또는 GISCUS 이외의 댓글 솔루션을 사용하려면 컨텐츠 보안 정책을 수정 next.config.js .
authors/default.md (메인 저자)
projectsData.ts 수정합니다
내비게이션 링크를 사용자 정의하려면 headerNavLinks.ts 수정합니다
블로그 게시물을 추가하십시오
Vercel에 배포하십시오

설치

yarn

Windows를 사용하는 경우 실행해야 할 수도 있습니다.

 $env :PWD = $( Get-Location ) .Path

개발

먼저 개발 서버를 실행합니다.

yarn dev

http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.

app 또는 data 의 컨텐츠에서 레이아웃을 편집하십시오. 라이브 재 장전을 사용하면 페이지를 편집 할 때 자동 업데이트를 제공합니다.

확장 / 사용자 정의

data/siteMetadata.js 사용자의 요구에 맞게 수정 해야하는 대부분의 사이트 관련 정보가 포함되어 있습니다.

data/authors/default.md 기본 저자 정보 (필수). 추가 저자는 data/authors 의 파일로 추가 할 수 있습니다.

data/projectsData.js 프로젝트 페이지에서 스타일링 된 카드를 생성하는 데 사용되는 데이터.

data/headerNavLinks.js 탐색 링크.

data/logo.svg 자신의 로고로 교체하십시오.

data/blog - 자신의 블로그 게시물로 교체하십시오.

public/static - 이미지 및 파비콘과 같은 자산을 저장합니다.

tailwind.config.js 및 css/tailwind.css 사이트의 전반적인 모양과 느낌을 변경하도록 수정할 수있는 Tailwind 구성 및 스타일 시트.

css/prism.css 코드 블록과 관련된 스타일을 제어합니다. 자유롭게 사용자 정의하고 선호하는 Prismjs 테마, 예를 들어 프리즘 테마를 사용하십시오.

contentlayer.config.ts 컨텐츠 레이어의 구성 및 컨텐츠 소스의 정의 및 사용 된 MDX 플러그인을 포함한 구성. 자세한 내용은 ContentLayer 문서를 참조하십시오.

components/MDXComponents.js 여기에 지정하여 자신의 JSX 코드 또는 반응 구성 요소를 전달하십시오. 그런 다음 .mdx 또는 .md 파일에서 직접 사용할 수 있습니다. 기본적으로 사용자 정의 링크, next/image 구성 요소, 목차 구성 요소 및 뉴스 레터 양식이 전달됩니다. Next.js의 기존 문제를 피하기 위해 구성 요소를 기본적으로 내보내야합니다.

layouts - 페이지에 사용되는 기본 템플릿 :

현재 사용 가능한 포스트 레이아웃이 있습니다 : PostLayout , PostSimple 및 PostBanner . PostLayout 메타 및 저자 정보가있는 기본 2 열 레이아웃입니다. PostSimple 은 PostLayout 의 단순화 된 버전이며 PostBanner 배너 이미지가 있습니다.
2 개의 블로그 목록 레이아웃이 있습니다 : ListLayout , 검색 표시 줄과 ListLayoutWithTags 가있는 템플릿 1에 사용 된 레이아웃은 현재 버전 2에 사용되었지만 검색 표시 줄을 생략하지만 태그에 대한 정보가있는 사이드 바가 포함되어 있습니다.

app - 라우팅 페이지. 자세한 내용은 Next.js 문서를 읽으십시오.

next.config.js 다음 구성과 관련된 구성. 다른 도메인에서 스크립트, 이미지 등을로드하려면 컨텐츠 보안 정책을 조정해야합니다.

우편

컨텐츠는 ContentLayer를 사용하여 모델링되므로 자신의 컨텐츠 스키마를 정의하고이를 사용하여 유형의 컨텐츠 개체를 생성 할 수 있습니다. 자세한 내용은 ContentLayer 문서를 참조하십시오.

프론트 마터

프론트 마터는 휴고의 표준을 따릅니다.

지원되는 필드의 최신 목록은 contentlayer.config.ts 를 참조하십시오. 다음 분야가 지원됩니다.

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

다음은 게시물의 프론트 마터의 예입니다.

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

배포

Github 페이지

pages.yml 워크 플로가 이미 제공되었습니다. Settings > Pages > Build and deployment > Source 에서 "github actions"를 선택하기 만하면됩니다.

Vercel

템플릿을 배포하는 가장 쉬운 방법은 Vercel에 배포하는 것입니다. 자세한 내용은 Next.js 배포 문서를 확인하십시오.

Netlify

NetLify의 Next.js 런타임 구성은 추가 구성이 필요하지 않고 웹 사이트의 Key Next.js 기능을 활성화합니다. Netlify는 다음에 다음을 처리 할 서버리스 함수를 생성합니다. SSR (Server-Side Render) 페이지, 증분 정적 재생 (ISR), next/images 등과 같은 JS 기능.

제안 된 구성 값 및 자세한 내용은 NetLify의 다음 .js를 참조하십시오.

정적 호스팅 서비스 (Github 페이지 / S3 / Firebase 등)

달리다:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

그런 다음 out 된 폴더를 배포하거나 npx serve out .

중요한

https://example.org/myblog와 같은 URL 기본 경로로 배포하는 경우 빌드 명령에 추가 BASE_PATH Shell-Var가 필요합니다.

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> 코드에서 ${process.env.BASE_PATH || ''}/robots.txt out Build에 "/myblog/robots.txt" /robots.txt 합니다 (또는 yarn dev , IE : On LocalHost : 3000).

팁

대안 적으로 UNOPTIMIZED=1 위해 next/image 계속 사용하려면 Imgix, Cloudinary 또는 Akamai와 같은 대체 이미지 최적화 제공 업체를 사용할 수 있습니다. 자세한 내용은 이미지 최적화 문서를 참조하십시오.

정적 빌드에서 사용할 수없는 다음 기능을 제거하십시오.

next.config.js 에서 headers() 주석으로합니다.
뉴스 레터 구성 요소와 같은 서버 측 기능을 호출하는 api 폴더 및 구성 요소를 제거하십시오. 기술적으로 필요하지 않으며 사이트가 성공적으로 구축되지만 API는 서버 측 기능이므로 API를 사용할 수 없습니다.