Creating a serverless landing page using SvelteKit and Cloudflare

Ben Hacker — Thu, 21 Sep 2023 14:37:28 +0000

SvelteKit is a framework for building web applications with Svelte, a UI component framework that developers love for its performance and ease of use. Cloudflare is a web performance and security company that offers a variety of services, including serverless computing. In this article, we will show you how to use SvelteKit and Cloudflare to create and deploy a serverless landing page for your portfolio, blog, or business.

What You Need

To follow this tutorial, you will need:

A GitHub account
A Cloudflare account
A code editor of your choice
Node.js and npm installed on your machine

Step 1: Clone the SvelteKit Portfolio Template

We will use a SvelteKit portfolio template created by Ladvace as our starting point. This template has a simple and elegant design, with sections for your profile, skills, projects, and contact information. You can customize it to suit your needs and preferences.

To clone the template, open your terminal and run the following command:

git clone https://github.com/Ladvace/SvelteKit-Portfolio.git

This will create a folder called SvelteKit-Portfolio in your current directory. Navigate to it and install the dependencies:

cd SvelteKit-Portfolio
npm install

You can now run the development server and see the template in action:

npm run dev -- --open

This will open your browser at http://localhost:3000

Step 2: Edit the Template Content

Now that you have the template running locally, you can start editing the content to make it your own. The template uses Markdown files to store the data for each section. You can find them in the src/routes folder.

For example, to edit your skills information, open the src/lib/skills.ts file and change the values to your needs. You can also add or remove fields as you wish.

Similarly, you can edit the other sections by modifying the corresponding files in the src/ folder. For example, to add a new project to your portfolio, go to /src/lib/projects and fill it with the following template:

{
    title: 'Your Project Title',
    technologies: ['Tech 1', 'Tech 2'],
    description: 'Your project description',
    url: 'https://yourproject.com'
}

To ensure a flawless deployment, we need to add the Cloudflare adapter to the svelte config.

npm i -D @sveltejs/adapter-cloudflare

Change the import in your svelte.config.js to import adapter from '@sveltejs/adapter-cloudflare';

The config should look lie this.

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

Step 3: Deploy to Cloudflare Pages

Now that you have customized your landing page, it's time to deploy it to Cloudflare Pages, a serverless platform that allows you to host websites directly from your GitHub repository.

To do so, follow these steps:

Log in to your Cloudflare account and go to the Pages dashboard.
Click on the Create a project button and select your GitHub account.
Choose the SvelteKit-Portfolio repository from the list and click on Begin setup.
Click on Save and deploy.

Cloudflare will start building and deploying your landing page. This may take a few minutes. Once it's done, you will see a message saying "Your site is live" with a unique URL. You can also add a custom domain name if you want.

That's it! You have successfully created and deployed a serverless landing page with SvelteKit and Cloudflare. You can now share it with the world and showcase your work.

If you want to, you now have the option to add a custom domain so your-domain.com redirects to the Cloudflare page.

Forem: Ben Hacker

Creating a serverless landing page using SvelteKit and Cloudflare

What You Need

Step 1: Clone the SvelteKit Portfolio Template

Step 2: Edit the Template Content

Step 3: Deploy to Cloudflare Pages