sveltekit static blog template

SvelteKit 정적 블로그 템플릿

SvelteKit으로 구축된 블로그 및 포트폴리오 웹사이트를 위한 가볍고 사용자 정의 가능한 템플릿입니다.

이는 다음과 같은 몇 가지 목표를 염두에 두고 구축되었습니다.

• 반응형 디자인: 웹사이트는 모든 크기의 화면에서 잘 보이고 작동합니다.
• 빠르다: 작동하는 데 필요한 것만 로드합니다.
• 적응형: 기본적으로 대부분의 운영 체제(데스크톱 및 모바일)에서 다크 모드를 지원합니다.
• 예쁘다(Pretty): 접근하기 쉽고 눈을 즐겁게 하는 유쾌한 디자인을 갖습니다.

나는 SvelteKit의 도움으로 이것을 달성했습니다. 실행 중인 JavaScript가 거의 없으며 JS가 비활성화된 상태에서도 실제로 작동합니다! JS는 훌륭하지만 언제 필요하지 않은지 아는 것이 중요합니다.

데모 사이트

데모 사이트에서 템플릿을 실시간으로 볼 수 있습니다. 또한 Histoire에서 모든 구성 요소를 개별적으로 확인할 수 있습니다.

로컬에서 빌드 및 실행

로컬에서 실행하려면 다음을 실행하면 됩니다.

 # First, install dependencies
npm install
# Then, run it on dev mode
npm run dev

이제 사이트는 로컬 컴퓨터의 http://localhost:5173/ 및 네트워크의 로컬 컴퓨터 IP 주소에서 사용할 수 있습니다. 이는 모바일 OS에서 테스트하기에 좋습니다.

역사/스토리북

나는 구성요소를 개별적으로 보고 개발할 수 있는 Vite 기반 스토리북 대안인 Histoire를 사용했습니다. 이를 열려면 npm run story:dev 실행하세요.

이미지 최적화

이 웹사이트는 이미지 변환을 사용하여 사이트에 사용된 이미지를 자동으로 최적화합니다. 이는 최적이 아닌 이미지 형식(예: 무손실 PNG)을 사용하더라도 <img /> 대신 <Image /> 구성 요소를 사용하는 한 이미지를 검토하여 이미지를 WebP 및 AVIF로 변환한다는 의미입니다. <img /> . 이는 빌드 시 수행되므로 웹사이트를 로컬에서 실행할 때 아무 것도 변경되지 않습니다.

게시물 관리

모든 게시물은 내부에서 Svelte 구성 요소를 사용할 수 있도록 MDsveX로 처리되는 Markdown 파일입니다. 게시물을 더 쉽게 관리하려면 멋진 CMS와 유사한 UI를 제공하는 Front Matter VS Code 확장을 적극 권장합니다.

호스팅

npm run build 실행하면 웹사이트가 정적 사이트로 컴파일됩니다. 즉, 거의 모든 곳에서 호스팅할 수 있습니다. 제가 추천하는 무료 대안으로는 GitHub Pages, Vercel 및 Netlify가 있습니다.