Как создать статический сайт с помощью SvelteKit

Статические сайты становятся все более популярными благодаря своей скорости, безопасности и простоте. Когда дело доходит до создания статических сайтов, доступно несколько инструментов и платформ, но быстро набирает обороты SvelteKit.

Это руководство проведет вас через путь создания статического сайта с помощью SvelteKit, от настройки до развертывания с помощью хостинга статических сайтов Kinsta, бесплатно.

Демонстрация статического сайта SvelteKit.

Что такое SvelteKit?

SvelteKit — это надежная веб-инфраструктура, предназначенная для создания пользовательских интерфейсов, включая статические сайты. Он известен своей производительностью, простотой и возможностью создавать компоненты с помощью декларативного подхода.

SvelteKit расширяет возможности платформы Svelte, добавляя маршрутизацию, рендеринг на стороне сервера и многое другое.

Начало работы со SvelteKit

Чтобы следовать этому руководству, мы предполагаем, что у вас есть:

Фундаментальное понимание HTML, CSS и JavaScript.
Базовые знания Svelte.
Node.js и npm установлены на вашем компьютере.

Чтобы создать новое приложение SvelteKit, выполните следующие действия.

Создайте новый проект, выполнив:

npm create svelte@latest my-app

Эта команда создает новый проект в my-app каталог с просьбой настроить некоторые базовые инструменты, такие как TypeScript. Убедитесь, что вы выбрали вариант проекта «Скелет» и измените my-app на предпочтительное имя вашего проекта.

Перейдите в каталог проекта и установите его зависимости:

cd my-app
npm install

Выполнять npm run dev запустить локальный сервер разработки на localhost:5173.

Понимание структуры файла SvelteKit

Когда вы откроете свой проект в редакторе кода, вы увидите следующую структуру. Понимание этой структуры имеет решающее значение, поскольку оно помогает эффективно организовать код.

/
|-- /src
    |-- /lib
    |-- /routes
        |-- +page.svelte
    |-- app.html
|-- /static
|-- svelte.config.js

/источник: Это сердце вашего проекта и содержит различные подкаталоги и файлы:
- /либ: В этом каталоге хранятся пользовательские библиотеки, утилиты и модули. Это хорошее место для хранения многократно используемого кода, который можно использовать во всем приложении.
- /маршруты: Каталог маршрутов имеет решающее значение для определения различных страниц или представлений в вашем приложении. Каждая страница представлена .стройный файл, например +page.svelte. Эти .стройный файлы содержат компоненты, логику и стили, специфичные для этой страницы.
- приложение.html: Этот файл служит точкой входа вашего приложения. Здесь определяется основная структура вашей веб-страницы.

/статический: Этот каталог используется для хранения статических ресурсов, таких как изображения, шрифты или любые файлы, которые не требуют обработки вашим приложением. На эти ресурсы можно напрямую ссылаться в ваших компонентах HTML и Svelte.
svelte.config.js: Этот файл конфигурации позволяет вам настраивать различные аспекты вашего проекта SvelteKit. Вы можете использовать его для настройки рендеринга на стороне сервера, определения пользовательских макетов и многого другого.

Маршрутизация в SvelteKit

Одной из выдающихся особенностей SvelteKit является система маршрутизации. Он следует подходу на основе файловой системы, при котором пути URL-адресов определяются файлами и папками в источник/маршруты каталог, что делает управление им интуитивно понятным и простым.

В SvelteKit каждый файл, соответствующий маршруту, должен иметь имя +page.svelte. Например, индексный файл вашего сайта SvelteKit находится в папке маршруты папка и названа +page.svelte.

Добавьте в этот файл следующий код, чтобы создать домашнюю страницу:

<!-- src/routes/+page.svelte -->
<div class="home_hero">
    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
    <p>Fast, Secure, Reliable Hosting Solution.</p>
    <a href="https://kinsta.com/static-site-hosting/">
        <div class="btn">Read more</div>
    </a>
</div>

<style>
    .home_hero {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .home_hero h1 {
        font-size: 60px;
        width: 70%;
    }
    .home_hero p {
        color: #6e7076;
        font-size: 20px;
    }
    .btn {
        background-color: #5333ed;
        padding: 20px 30px;
        margin-top: 40px;
        border-radius: 5px;
        color: #fff;
    }
    @media (max-width: 700px) {
        .home_hero h1 {
            font-size: 40px;
        }
        .home_hero p {
            font-size: 16px;
        }
    }
</style>

Чтобы создать вложенный маршрут в SvelteKit, например, страницу «О программе», доступную по адресу localhost:5173/aboutвам необходимо создать папку внутри маршруты папка с именем, которое представляет URL-путь. В этой папке создайте +page.svelte файл, который будет отображаться для маршрута.

Добавьте следующий код в маршруты/о/+page.svelte:

<div class="about_cont">
    <h2>About</h2>
    <div class="about_info">
        <div class="about_text">
            <p>
                Kinsta allows you to{' '}
                <a> href="https://kinsta.com/static-site-hosting/">
                    host up to 100 static websites
                </a>{' '}
                for free. This can be done by pushing your code to your preferred Git provider
                (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
            </p>
            <p>
                As an alternative to Static Site Hosting, you can opt for deploying your
                static site with Kinsta’s{' '}
                <a> href="https://kinsta.com/application-hosting/">
                    Application Hosting
                </a>
                , which provides greater hosting flexibility, a wider range of benefits,
                and access to more robust features. For example, scalability, customized
                deployment using a Dockerfile, and comprehensive analytics encompassing real-time
                and historical data.
            </p>
        </div>
        <iframe> width="560" height="315" src="https://www.youtube.com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
    </div>
</div>

<style>>
    .about_cont h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }
    .about_info {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }
    @media (max-width: 700px) {
        .about_info {
            flex-direction: column;
        }
    }
    .about_text {
        flex-basis: 50%;
    }
    .about_text p {
        margin-bottom: 20px;
        font-size: 18px;
    }
    .about_img {
        flex-basis: 50%;
        width: 200px;
        border-radius: 10px;
    }
    @media (max-width: 700px) {
        .about_info {
            flex-direction: column;
        }
        .about_img {
            width: 100%;
        }
    }
</style>

Любой стиль, добавленный в ваш компонент Svelte, имеет ограниченную область действия и не влияет на другие компоненты.

Важно понимать, что SvelteKit осуществляет навигацию между страницами, используя стандартные <a> элементы, делающие процесс навигации интуитивно понятным. Нет необходимости импортировать дополнительные компоненты, такие как <Link> как требуется в React. В следующем разделе давайте создадим компонент навигации, который будет добавлен на каждую страницу.

Для текущего проекта структура маршрута выглядит следующим образом:

|-- /src
    |-- /routes
        |-- /about
            |-- +page.svelte
        |-- +page.svelte

Использование компонентов в SvelteKit

Чтобы сделать ваш код более модульным, вы можете создавать компоненты и импортировать их на свои страницы. Например, вы можете создать Navbar.svelte компонент в маршруты папка:

<!-- src/routes/Navbar.svelte -->
<nav>
    <a href="https://kinsta.com/">
        <img src="/kinsta-logo.png" alt="" class="logo-img" />
    </a>
    <div class="nav-links">
        <a href="https://kinsta.com/">Home</a>
        <a href="http://kinsta.com/about">About</a>
        <a href="http://kinsta.com/posts">Posts</a>
    </div>
</nav>

Затем импортируйте его в +page.svelte домашняя страница такая:

<!-- src/routes/+page.svelte -->
<script>>
    import Navbar from './Navbar.svelte'
</script>

<Navbar />
<div class="home_hero">
    <h1>Enjoy Static Site Hosting With Kinsta.</h1>
    <p>Fast, Secure, Reliable Hosting Solution.</p>
    <a href="https://kinsta.com/static-site-hosting">
        <div> class="btn">Read more</div>
    </a>
</div>

<style>
      /* CSS styles */
</style>

Для глобальных компонентов, таких как Navbar и Footerкоторые используются в нескольких файлах, создайте их в источник/библиотека папку, чтобы избежать длинных путей импорта. Когда вы создаете компоненты или модули внутри библиотека папку, вы можете удобно импортировать их в любой компонент, используя $lib импортировать псевдоним:

<script>
    import Navbar from '$lib/Navbar.svelte'
</script>

Например, чтобы использовать автономные компоненты, предположим, что вам нужен компонент только для страницы «О программе», создайте его в маршруты/о маршрут, а затем импортируйте его на страницу.

Для этого проекта вы также можете создать Footer компонент в библиотека папку и добавьте этот код:

<div class="footer">
    <p>
        Hosted with ❤️ by Kinsta's{' '}
        <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
        .
    </p>
</div>

Затем импортируйте его на все страницы.

Использование макета в SvelteKit

Чтобы избежать импорта компонентов на множество страниц, SvelteKit позволяет вам определять макеты для ваших страниц, используя +layout.svelte файлы.

Создать макет, применимый к каждой странице, несложно. Создайте файл с именем src/routes/+layout.svelte и настройте его с помощью желаемой разметки, стилей и поведения. Важнейшим требованием является включение <slot/> элемент для размещения содержимого страницы.

Например, вы можете интегрировать Navbar и Footer компоненты в этом макете:

<script>
    import Navbar from '$lib/Navbar.svelte';
    import Footer from '$lib/Footer.svelte';
</script>

<div class="layout">
    <Navbar />
    <slot />
    <Footer />
</div>

<slot> Элемент позволяет вставлять содержимое каждой страницы в макет.

Макеты также могут быть вложены в отдельные страницы. Например, если у вас есть /dashboard страница с вложенными страницами, например /profile и /settingsвы можете создать специальный макет:

|-- /dashboard
    |-- /profile
        |-- +page.svelte
    |-- /settings
        |-- +page.svelte
    |-- +layout.svelte

Программная навигация в SvelteKit

SvelteKit предоставляет goto функция для программной навигации. Например, чтобы перейти к /dashboard страница после действия входа в систему:

<script>
    import { goto } from '$app/navigation';
    
    async function login() {
        // Perform login action
        goto('/dashboard');
    }
</script>

Стилизация в SvelteKit

SvelteKit поддерживает традиционный CSS для стилизации ваших страниц. Стили можно определить в компонентах Svelte с помощью <style> или вы можете связать внешние таблицы стилей.

Вы можете заметить, что Navbar и Footer компонентам не хватает определенных стилей. Чтобы решить эту проблему, рекомендуется применять глобальные стили. Этого можно добиться, создав CSS-файл внутри источник папку и импортировать ее в корневой файл макета.

Для лучшей организации создайте стили папка внутри источник каталог. В этой папке могут храниться все ваши стили. В рамках этого проекта создайте глобальный.css файл в стили папку и добавьте следующий код:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
}
nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}
nav .logo-img {
    width: 100px;
}
nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}
@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }
    nav .nav-links a {
        padding: 0 18px;
    }
}
.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

Затем вы можете импортировать файл CSS в файл макета, чтобы он был глобальным и работал для всех файлов:

<script>>
    import Navbar from '$lib/Navbar.svelte';
    import Footer from '$lib/Footer.svelte';
    import '../styles/global.css';
</script>

Загрузка данных с помощью SvelteKit

При работе со SvelteKit вам часто необходимо загружать данные в макеты, страницы и компоненты. Эти данные могут поступать из внешних API, баз данных или вашего локального сервера. Чтобы управлять этим, вы можете использовать +page.js файл для страниц и +layout.js для макетов.

В вашем проекте SvelteKit +page.svelte файл может иметь родственного брата +page.js который экспортирует функцию загрузки. Возвращаемое значение этой функции становится доступным на странице через data реквизит. Давайте рассмотрим пример: предположим, вы хотите создать маршрут для получения списка сообщений из API JSON Placeholder.

Чтобы загрузить данные из API, создайте +page.js файл внутри посты папка. Этот файл экспортирует load функция.

export const load = async () => {
    const title = "Hello World";
    return {
        title,
    };
};

load ожидается, что функция вернет объект, который предоставляется в качестве реквизита для +page.svelte файл. title значение затем можно получить с помощью data опора:

<script>>
    export let data;
    const title = data.title;
</script>

<div class="blog_cont">
    <h2>{title}</h2>
</div>

Теперь перейдем к взаимодействию с API сообщений JSON Placeholder. Для этого вы можете использовать API JavaScript Fetch, но SvelteKit предлагает собственный fetch метод, который вы можете использовать для получения данных из конечных точек API перед отрисовкой страницы:

export const load = async (loadEvent) => {
    const { fetch } = loadEvent;
    const response = await fetch(
        'https://jsonplaceholder.typicode.com/posts?_limit=10'
    );
    const posts = await response.json();
    return {
        posts,
    };
};

В приведенном выше коде мы извлекаем fetch метод из loadEvent и сделайте запрос API. Затем ответ отправляется в виде реквизита на страницу «Сообщения», проходя циклически и отображая все сообщения:

<script>
    export let data;
    const posts = data.posts;
</script>

<div class="blog_cont">
    <h2>Posts</h2>
    <div class="blog_grid">
        {#each posts as post}
            <a href={`/posts/${post.id}`} class="blog_card">
                <h3>{post.title}</h3>
                <p>
                    {post.body}
                </p>
            </a>
        {/each}
    </div>
</div>

<style>
    .blog_cont h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }
    .blog_grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
    @media (max-width: 700px) {
        .blog_grid {
            grid-template-columns: 1fr;
        }
    }
    .blog_card {
        background-color: #bfbfbf;
        padding: 20px;
        border-radius: 5px;
        color: #000;
        transition: all 0.5s ease-in-out;
    }
    .blog_card:hover {
        background-color: #5333ed;
        color: #fff;
    }
    .blog_card h3 {
        margin-bottom: 15px;
    }
    .blog_card p {
        margin-bottom: 15px;
    }
</style>

Вот как выглядит текущее дерево файлов:

|-- /src
    |-- /lib
        |-- Footer.svelte
        |-- Navbar.svelte
    |-- /routes
        |-- /about
            |-- +page.svelte
        |-- /posts
            |-- +page.js
            |-- +page.svelte
        |-- +page.svelte
        |-- +layout.svelte
    |-- /styles
        |-- global.css

Динамическая маршрутизация с помощью SvelteKit

Теперь на вашей странице сообщений отображается 10 сообщений; Если вы хотите создать отдельную страницу для каждого сообщения, лучший способ сделать это — создать динамический маршрут.

Для этого вам необходимо получить значение пула из маршрута и использовать его в качестве параметра для запроса сообщения. В SvelteKit это можно сделать, создав папку в квадратных скобках с именем параметра. Вот как вы можете настроить отдельные страницы сообщений:

Создать [postid] папка внутри посты папка. [postid] представляет динамический параметр, который может содержать такие значения, как идентификаторы сообщений или пули.
в [postid] папку, создайте два файла:
- +page.svelte: Этот файл будет определять макет и структуру ваших отдельных страниц сообщений.
- +page.js: Этот файл JavaScript будет обрабатывать выборку данных и логику, специфичную для отдельных сообщений.

в +page.js файл, получить postid параметр из маршрута и используйте его для запроса конкретного сообщения:

export const load = async (loadEvent) => {
    const { fetch, params } = loadEvent;
    const { postid } = params;
    const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${postid}`
    );
    const post = await response.json();
    return {
        post,
    };
};

После этого вы сможете получить доступ к data в качестве реквизита в +page.svelte файл:

<script>>
    export let data;
    const post = data.post;
</script>

<div>
    <div class="blog_content">
        <h3>{post.title}</h3>
        <p>{post.body}</p>
    </div>
</div>

<style>>
    .blog_content h3 {
        font-size: 40px;
        margin-bottom: 20px;
        text-align: center;
    }
</style>

Вы можете просмотреть полный исходный код этого проекта SvelteKit на GitHub. Вы также можете ознакомиться с официальной документацией SvelteKit для получения дополнительной информации.

Развертывание статических сайтов SvelteKit с помощью Kinsta

Kinsta позволяет разместить до 100 статических веб-сайтов для бесплатно напрямую от предпочитаемого вами провайдера Git (Bitbucket, GitHub или GitLab).

Прежде чем приступить к продвижению своего сайта SvelteKit, важно адаптировать его к цели развертывания. В этом конкретном проекте мы концентрируемся на использовании статического хостинга сайтов Kinsta, который требует настройки SvelteKit в качестве генератора статических сайтов (SSG).

Вот как можно предварительно отобразить ваш сайт в виде набора статических файлов:

Установите @sveltejs/adapter-static, выполнив следующую команду:

npm i -D @sveltejs/adapter-static

Далее адаптируйте свой svelte.config.js файл, заменив adapter-auto с fallback к 404.html:

import adapter from '@sveltejs/adapter-static';

const config = {
    kit: {
        adapter: adapter({ fallback: '404.html' }),
    },
};

export default config;

Теперь отправьте свои коды предпочитаемому провайдеру Git. Затем выполните следующие действия, чтобы развернуть статический сайт в Kinsta:

Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
Авторизуйте Kinsta у своего провайдера Git.
Нажмите Статические сайты на левой боковой панели, затем нажмите Добавить сайт.
Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
Присвойте уникальное имя своему сайту.
Добавьте настройки сборки в следующем формате:
- Команда сборки: npm run build
- Версия узла: 18.16.0
- Каталог публикации: build

Наконец, нажмите Создать сайт.

Вот и все! Теперь у вас есть развернутый сайт за несколько секунд. Предоставляется ссылка для доступа к развернутой версии вашего сайта. Если хотите, позже вы сможете добавить свой собственный домен и SSL-сертификат.

В качестве альтернативы хостингу статических сайтов вы можете выбрать развертывание статического сайта с помощью хостинга приложений Kinsta, который обеспечивает большую гибкость хостинга, более широкий спектр преимуществ и доступ к более надежным функциям. Например, масштабируемость, индивидуальное развертывание с использованием Dockerfile и комплексная аналитика, охватывающая данные в реальном времени и исторические данные.

Краткое содержание

В этом руководстве объяснен процесс создания статического сайта с помощью SvelteKit. Теперь у вас есть все необходимое, чтобы с легкостью создавать высокопроизводительные статические сайты — от настройки среды разработки до развертывания.

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

Теперь пришло время применить свои знания на практике и начать создавать собственный статический сайт с помощью SvelteKit. Использовали ли вы SvelteKit раньше? Не стесняйтесь поделиться своими проектами и опытом в разделе комментариев ниже.

Получите все свои приложения, базы данных и сайты WordPress онлайн и под одной крышей. Наша многофункциональная высокопроизводительная облачная платформа включает в себя:

Простая настройка и управление на панели управления MyKinsta.
Круглосуточная экспертная поддержка
Лучшее оборудование и сеть Google Cloud Platform на базе Kubernetes для максимальной масштабируемости.
Интеграция Cloudflare корпоративного уровня для обеспечения скорости и безопасности.
Глобальный охват аудитории: до 35 центров обработки данных и 260 точек доступа по всему миру

Начните с бесплатной пробной версии нашего хостинга приложений или хостинга баз данных. Изучите наши планы или поговорите с отделом продаж, чтобы найти наиболее подходящий вариант.