astro ink

Astro Ink는 최소한의 마크다운 기반 블로그 요구 사항을 충족하기 위해 만들어진 최소한의 테마입니다. 기본적으로 Javascript를 적게 제공하는 데 초점을 맞춘 가볍고 성능이 뛰어난 개인 블로그를 만드는 동안 필요할 수 있는 거의 모든 기본 Astro 구성 요소가 함께 제공됩니다.

Hugo의 Ink 테마에서 큰 영감을 받았으며, 아름답고 미니멀한 블로그의 기반을 제공하면서 가벼움을 유지하려고 노력합니다.

특징

• Minimal, Crisp, Markdown-Blog Ready는 항상 Astro의 최신(현재 2.x 릴리스)로 업데이트됩니다.
• Svelte Ready - Astro의 POV에서 가볍고 성능이 뛰어나며 접근하기 쉬운 상태를 유지하려는 노력의 일환으로 Svelte는 테마 전환기와 같은 대화형 구성 요소에 사용됩니다.
• 모듈형 - 구조는 고도로 모듈화되어 있으며, 구성 요소가 한 가지 작업만 수행하고 한 가지 작업을 잘 수행합니다.
• Astro 2.0 콘텐츠 컬렉션 + 동적 페이지 - 동적 페이지와 같은 Next.js를 사용하여 페이지가 매겨진 결과가 포함된 태그 기반 분류 시스템을 지원하며 모두 구성 가능합니다.
• 다크 모드 및 색상 코드 - 다크 모드와 tailwind.config.js 사용하여 선택한 6개 이상의 색상 모드를 지원합니다. dev 또는 build 스크립트/명령(예: THEME_KEY=purpleheart astro build/dev 과 함께 THEME_KEY 전달하여 사용 중인 색상 테마를 변경할 수 있습니다. 사용 가능한 모든 테마는 tailwind.theme.config.js에서 찾을 수 있습니다. 블로그 섹션을 맞춤설정하려면 여기에 언급된 대로 Tailwind Typography의 prose-{color} 클래스를 추가하세요.
• Netlify CMS - your-site.netlify.com/admin (예: astro-ink.netlify.app/admin)을 Netlify 자격 증명으로 방문하여 /blog 디렉터리의 모든 게시물을 추가/편집/업데이트하세요. Netlify Identity(https://app.netlify.com/sites/your-site/settings/identity#registration) 및 Git Gateway(https://app.netlify.com/sites/your-site/settings/identity)가 필요합니다. #services)가 활성화되었습니다.
• 향후 게시물 (Github Actions 포함) - YYYY-MM-DD 형식의 미래 date 사용하여 /src/drafts 디렉터리에 게시물을 생성하고 특별히 제작된 Github Action을 통해 지정된 날짜에 자동 게시되도록 하세요. Github Action에서 확인 간격을 구성할 수 있습니다.
• 클라이언트 측 검색 - 클라이언트 측 검색 기능을 통해 사용자가 블로그 게시물을 빠르게 찾을 수 있습니다. Lunr.js
• 카운터 위업 보기 Redis/Upstash Redis - Redis 호스트를 구성하고 호스팅 공급자의 콘솔(Vercel, Netlify 등) 또는 .env 파일(로컬 개발)에 연결 URL을 배치하고 여기에서 연결 코드의 주석 처리를 해제한 후 배포합니다. 귀하의 사이트에는 동적 조회수 카운터가 제공됩니다. 구성해야 하는 다양한 환경 값을 이해하려면 .env.example을 참조하세요.
• YT 채널 지원이 포함된 미디어 페이지 - 구성 파일의 ytChannelId 상수에 채널 ID를 입력하기만 하면 미디어 페이지에 YT 채널 콘텐츠를 쉽게 표시할 수 있습니다. 선택적으로 USE_MEDIA_THUMBNAIL false 로 설정하여 YT 채널의 동영상 목록에서 이미지 미리보기 이미지를 비활성화할 수 있습니다.
• 작성자 카드 - 구성 파일 내에서 USE_AUTHOR_CARD true 로 설정하여 Twitter 팔로우 버튼이 포함된 게시물 기반 또는 사이트 전체 작성자 카드를 쉽게 추가할 수 있습니다.
• 테마 이미지 오버레이 - 구성 파일 내에서 USE_POST_IMG_OVERLAY true 로 설정하여 게시물 이미지 위에 멋진 테마 그라데이션을 추가할 수 있는 오버레이를 선택적으로 활성화할 수 있습니다.

시작하는 방법?

이 템플릿을 복제 하고 복제에서 작업을 시작하세요. dev , build 등과 같은 일반적인 NPM 명령을 모두 사용할 수 있습니다. 사용 가능한 모든 명령 목록을 보려면 package.json을 참조하세요.

참고: git 기록 없이 템플릿을 복제하려면 npx degit one-aalam/astro-ink 사용하세요.

참고: 이 템플릿은 기본적으로 server (SSR 준비) 출력을 생성합니다. static 빌드를 원하는 경우

• astro.config.js의 server 에서 output static 으로 변경합니다.
• adapter: vercel()
• 조회수 카운터 API 제거
• config.ts 내에서 USE_VIEW_STATS false 로 설정하세요.

참고: npm run dev .

• mv .env.example .env 실행하여 .env 파일을 만듭니다(Linux distro 또는 Mac을 사용하는 경우).
• SITE_URI 변수를 SITE_URI=http://localhost:4321 로 설정합니다( 여기서 4321은 프로젝트가 실행 중인 포트입니다 ).

Astro Ink로 제작

• jamesperkins.dev - 개발자이자 YouTube 강사인 James R Perkins의 개인 사이트
• highlandcows.github.io Nick Jacob의 개인 블로그

Astro Ink로 구축된 사이트를 아시나요? 트위터로 알려주세요

Ink를 만들면서 Astro를 배우고 싶으신가요?

이 테마는 처음에는 Astro Framework의 알파 버전과 베타 버전으로 구축되었습니다. Astro 를 이제 막 시작했다면 Astro 기초를 가르치는 제가 작성한 일련의 블로그를 팔로우하여 바로 이 테마를 구축하면서 실제로 Astro 배울 수 있습니다!

aalam.in/blog 로 가서 알아보세요.

• Astro를 설정하고 스타일 지정, 프로토타이핑 및 증분 배포를 위한 필수 기본값으로 실행하는 방법
• 프리젠테이션 구성요소 관리 및 Astro 페이지 생성
• Astro 페이지에 로컬 및 원격 데이터 공급
• Astro에서 그것 없이는 절대 할 수 없는 상호작용성을 구현합니다.
• Astro에서 데이터 중심의 동적 페이지와 페이지가 매겨진 결과 만들기
• Git 기반 CMS를 사용하여 Astro 사이트 콘텐츠를 작성하세요.