소개

거짓말 같은 제목이지만 거짓말이 아닙니다!
해설은 나중에 하므로 조속히, 구축해 봅시다!

건설

1. 작업 디렉토리를 작성하고 작업 디렉토리로 이동

mkdir svelte-md-blog
cd svelte-md-blog

2. Routify 블로그 템플릿에서 프로젝트 만들기

npx @sveltech/routify init --branch blog

3. 프로젝트를 VScode 등으로 열고 md 파일 추가

src/pages/blog/test.md

---
title: テスト
published: 2020-09-07T21:36:59.459Z
author: oe.kazuma
summary: |
  #### テスト
layout: blog
---

# {title}

### テスト投稿です。

4. 서버를 시작하고 확인

npm run dev

1분만에 구축할 수 있었습니다!
거의 템플릿인 채이므로 이대로 공개와는 가지 않습니다만, 후에는 디자인의 조정을 하면 그렇게 시간 걸리지 않고 블로그 공개할 수 있을 것 같네요!

배포

이번에 사용 중인 템플릿에 이미 Netlify 및 Vercel에 대한 배포 설정이 포함되어 있으므로 쉽게 배포할 수 있습니다.
방법은 아래를 참조
htps : // 로우치 fy. v / gue / s r r-mp / / p p y y mt

해설

이번에 사용한 템플릿에서 주로 사용되는 라이브러리를 소개합니다.

Svelte

Vue나 React와 달리 가상 DOM이 없고, 빌드시 순수한 JavaScript로 컴파일 해주는 컴파일러
더 자세한 내용을 알고 싶은 분은 내가 이전에 쓴 기사에서 자세히 설명하고 있으므로 참조하십시오.
당신은 Vue,React 다음에 오는 Svelte를 아십니까?

Routify

Svelte의 파일 시스템 기반 라우팅 라이브러리
파일을 생성하면 자동으로 라우팅을 만들거나 SPA, SSR, PWA, 메타태그 생성, 코드 분할 등 원하는 기능이 담긴 라이브러리가 되어 있습니다.
Star수도 집필 시점에서 700~800 정도이므로 비공식 Svelte의 라이브러리 중에서는 인기있는 라이브러리가 되고 있습니다.
세세한 설정등도 할 수 있어 문서도 충실하고 있으므로 자세한 것은 이하를 참조해 주세요.
htps : // 로우치 fy. 에서 v/

MDsveX

Markdown에서 Svelte 구성 요소를 사용하거나 Svelte 구성 요소에서 Markdown을 사용할 수 있는 라이브러리
작자는 Svelte에도 커밋하고 있는 pngwn씨라고 하는 분이므로 이하의 사이트에서도 펭귄이 귀엽게 등장하고 있습니다.
htps: //mdsゔㅇx. 코m/

사이고에게

이번에는 Routify에서 제공하는 블로그 템플릿에 대해 소개했습니다.
이 템플릿에서는 메타 태그 생성 등의 SEO 대책도 해 주고 있으므로, 자신의 사이트에 맞추어 문언 등을 바꾸면 SEO 대책도 확실합니다.
LightHouse를 실행해 본 결과 거의 전부 만점이었습니다!
Routify는 매우 좋은 라우팅 라이브러리이므로 Qiita에서 자세히 소개하고 싶습니다.