svelte-blog-template — Svelte Blog Template

SHA-256: aeb28ea5ce9239c42dbae9c00d9aec1b474894b3af830922515225152347b623

2026-09-30T01:10:11.708Z

# svelte-blog-template

`svelte-blog-template` is a template for a simple static blog site. It included tagging functionality and internationalization support.

## Developing

Install dependencies with `npm install` (or `pnpm install` or `yarn`) and start the development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

To preview the production build, use `npm run preview`.

## Publishing

Publish the generated `build/` directory to your static site hosting service of preference.

## Making it your own

### Set up a website name

Modify `src/lib/translations/generic.json` and replace `"Test Site"` with your own website name.

### Update the about me page

Modify the files contained in `src/lib/blog/about/` (you may delete the translations for any language you do not wish to use). This project uses mdsvex which has support for front matter in its files, so make sure to update those fields too.

### Adding blog posts

Add any new blog post to its own directory (which will be used as the post's slug) under `src/lib/blog/posts/`. Name your post file with the language it's written in. E.g., en.svx for english posts, and es.svx for posts written in spanish.

The available front matter fields for blog posts are the following:

```
	title: string;
	tags?: string[]; // Optional array of tags associated with this post.
	summary?: string; // Optional summary of the blog post, displayed in the list of all blog posts.
	publishDate: string | Date; // I tend to write them in the YYYY-MM-DD format.
	updatedDate?: string | Date; //  Was the post updated after its original publish date? If so, update it here!
	authors?: Author[]; // Optional list of authors specific to this blog post
	contributors?: Author[]; // Optioan list of contributos specific to this blog post
```

The `Author` class referred above is taken from [`feed`](https://www.npmjs.com/package/feed) to simplify the RSS feed creation. Its fields are:

```
	name?: string;
	email?: string;
	link?: string;
	avatar?: string;
```

### Tags

Tags are automatically taken from all blog posts and put in a table to easily find posts that share tags.

### Adding or removing locales

Locale information is mostly contained within `src/lib/translations/`.

- Each language has its own directory containing all associated translation files for it under `src/lib/translations/[langugage]`.
- An enum containing all available locales is defined in `src/lib/enums.ts`. Update it to add or remove languages.
- Translations are registered in `src/lib/translations/index.ts`, so make sure to update that file to register or remove languages.
- I tried to keep translations of individual components in separate files, so the contents of `src/lib/translations/[langugage]` are translation files for each UI component of the site.

### Site config file

The file located at `src/lib/config/site.ts` sets up links to social media and it declares the copyright owner specified in the site's footer.

The available icons for the social media icons can be found in https://flowbite-svelte.com/icons/solid-icons, as well as in https://leshak.github.io/svelte-icons-pack/#/pack/si (note that only Simple Icons are supported by default).

### Home page

I suggest you update the home page to make it your own thing :)