sveltekit static blog template

Статический шаблон блога SvelteKit

Легкий и настраиваемый шаблон для блогов и веб-сайтов-портфолио, созданный с помощью SvelteKit.

Он был построен с несколькими целями:

• Адаптивный дизайн: сайт хорошо выглядит и работает на экранах всех размеров;
• Быстро: загружается только то, что необходимо для работы;
• Адаптивный: по умолчанию поддерживает темный режим большинства операционных систем (настольных и мобильных);
• Красиво: иметь приятный дизайн, который одновременно доступен и приятен глазу.

Я добился этого с помощью SvelteKit. JavaScript почти не работает, и он действительно работает с отключенным JS! Хотя JS великолепен, важно знать, когда он не нужен.

Демо-сайт

Вы можете увидеть шаблон вживую на демо-сайте. Кроме того, вы можете проверить все компоненты по отдельности на Histoire.

Создание и запуск локально

Чтобы запустить его локально, вам просто нужно запустить:

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

Теперь сайт должен быть доступен по адресу http://localhost:5173/ на вашем локальном компьютере и по IP-адресу вашего локального компьютера в вашей сети — отлично подходит для тестирования на мобильных ОС.

История / Сборник рассказов

Я использовал Histoire, альтернативу Storybook на основе Vite, чтобы иметь возможность видеть и разрабатывать компоненты изолированно. Чтобы открыть его, запустите npm run story:dev .

Оптимизация изображения

Этот веб-сайт использует преобразование изображений для автоматической оптимизации изображений, используемых на сайте. Это означает, что даже если вы используете неоптимальные форматы изображений (например, PNG без потерь), он будет перебирать изображения и конвертировать их в WebP и AVIF, если вы используете компонент <Image /> вместо <img /> . Это делается при сборке, поэтому ничего не меняется при локальном запуске веб-сайта.

Управление сообщениями

Все публикации представляют собой файлы Markdown, которые обрабатываются с помощью MDsveX, что позволяет использовать внутри них компоненты Svelte. Чтобы упростить управление публикациями, я настоятельно рекомендую расширение Front Matter VS Code, которое дает вам приятный пользовательский интерфейс, похожий на CMS.

Хостинг

Когда вы запустите npm run build , веб-сайт будет скомпилирован в статический сайт, что означает, что вы можете разместить его практически где угодно. Я рекомендую несколько бесплатных альтернатив: GitHub Pages, Vercel и Netlify.