In general, content can be modified by editing the organisms and the pages themselves. Below is a list of the most common changes that you may want to make.

#Domain/site URL

The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:

• In the package.json file, check the postbuild script. Change the domain there to your own, so it ends up like this: svelte-sitemap --domain https://your-domain.com. This is used to generate the sitemap of your website, which is used by search engines to index your site.
• In the src/lib/data/meta.ts file, change the siteBaseUrl property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself.

#Header/site logo

To replace the logo that appears in the header, modify or replace the contents of the Logo.svelte atom.

The links that appear on the header can be modified directly in the Header.svelte organism.

#Hero section

The hero section is the first section of the site’s home page. It is composed of a Heading, the intro text, and a list of buttons/CTAs. The contents of this section can be modified directly in the Hero.svelte organism.

#About section

The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the About.svelte organism.

#Social Links

The social links are contained in the Socials.svelte molecule and can be used in any page. This template shows them on the About section and in the Footer.

#Footer

The footer contains some credits, a list of social links, and the RSS/Theme toggle. The contents of this section can be modified directly in the Footer.svelte organism.

#Colors

You can change the color palette of the website just by tweaking the _themes.scss file. The file uses the define-color scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need.

The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page’s background, so that in light mode, it’s really bright, and in dark mode, it’s really dark.

#Fonts

This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the _variables.scss file, and the code is already set up to accept a default font, a heading font, and a monospace font.

I recommend using Fontsource to import the fonts you need, or self-hosting them. In case you’re using Fontsource, you can import the fonts in global.scss file to make sure they’re available in the entire site.

#Favicon

Favicons are located in the static/favicons folder. I like to use Real Favicon Generator to generate mine, but you can use any other tool you like. I wrote a blog post about Favicons in case you want to learn more about them.

#Social Media Link Preview

You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in src/lib/data/meta.ts. There, you can edit the site’s title, description, tags (used by search engines) and the image that appears when sharing a link.

This project follows the basic SvelteKit structure, with some added conventions to make customization a post-management easier.

#Components

The components are organized following the Atomic Design principles, albeit somewhat simplified. Components are in the src/lib/components folder, and are organized in the following way:

#Atoms

Atoms are the most basic components, which can be seen as building blocks for other components. They’re small and self-contained, and do only one thing. Examples of atoms are buttons, inputs, and tags.

#Molecules

Molecules are groups of atoms that work together to form a more complex component. Examples of molecules are cards, groups of links, or an alert callout.

#Organisms

Organisms, in this project, are code blocks that represent a section of a page, such as the header, footer and hero section. They can be used directly in a page as a sort of building block, so the page’s code can be as simple as this:

<header />
<Hero />
<About />
<footer />

#Component Gallery

This project uses Histoire to be able to see and develop components in isolation. To open it, run npm run story:dev. This way you can customize and build new components with placeholder content and without worrying about where to put them in a page.

#Pages

Pages obey the default SvelteKit structure, but can be summarized as follows:

• There are two different file types: the pages (+page.svelte) and the layouts (+layout.svelte). Layouts are a way to reuse the same structure between different pages without having to duplicate code;
• There are two different page layouts in this site: the “Waves” layout, which all pages inside the (waves) folder use, and the “Blog Article” layout, which all pages inside the (blog-article) folder use;

#Blog Posts

To know how blog posts work and how to create new ones, check out How Blog Posts Work.

All blog posts are located inside the src/routes/(blog-article) folder. Each folder inside it represents a blog post, and each folder has a +page.md file, which is the file that contains the post’s content.

This way, the URL for each blog post is generated with the folder’s name. For example, the folder src/routes/(blog-article)/how-blog-posts-work will generate the URL https://mysite.com/how-blog-posts-work.

All posts are Markdown files, which means you can use the Markdown syntax in them, and it will work out of the box. However, since this projects uses MDsveX to parse Markdown, you can also use Svelte components inside them! This means that the components used in other pages can also be used in blog posts.

#Processing

Besides the blog post page itself, the blog posts can be displayed in other places, such as the /blog page, which lists all blog posts, and the <RecentPosts> component, used in the home page.

To be able to do that, posts are processed in the src/lib/data/blog-posts/index.ts file. That file imports the blog post files and processes them, so we’re able to use some of the post’s metadata to list them. For example, we get the post’s title, cover image, and calculate the reading time based on its content, so that information is displayed in the blog post cards in the /blog page.

There is also some basic logic to get related posts based on a post’s tags. The logic should be straightforward enough to modify it to your needs.

#Creating a new post

To create a new post, create a new folder inside the src/routes/(blog-article) folder, and inside it, create a +page.md file. The folder name will be used as the post’s URL slug, so make sure it’s a valid URL slug.

Inside the +page.md file, you must start with the front matter, which is a YAML-like syntax that is used to define metadata for the post. The front matter must be the first thing in the file, and must be separated from the rest of the content by three dashes (---). An example of a front matter is:

---
slug: my-new-blog-post
title: My New Blog Post
date: 2023-04-22T20:45:25.350Z
excerpt: A short description of the post
coverImage: /images/posts/cover-image.jpg
tags:
  - Example
---

#Managing blog posts

I highly recommend the Front Matter VS Code extension to manage blog posts. It gives you a nice CMS-like UI to manage the front matter of all blog posts, as well as a preview of their content. It is, of course, optional, and you can manage everything directly in the Markdown files if you prefer.

#RSS

This template automatically generates a RSS feed of your blog posts. It is generated in the src/routes/rss.xml/+server.ts file, and it is available at the /rss.xml URL.