Blog Site using Svelte for FOSS Commuinty

On this blog post I mentioned about a Foss commuinity that I wanted to start. Which I did and have created channels in different FOSS platform and uploaded contents.

• Mastodon
• Peertube
• XMPP Channel

Now it is time to have a blog site for this community. I want create a website where I can update my audience what’s new in our community and activities.

For this blog site I want to use Svelte. I don’t have complete idea about Svelte but that’s what I do, I just jump right in the middle and try to figure out my way.

I found out that there is a blog template developed on Svelte by Matt Fantinel. Thanks Matt!

Here I will be following this article and write my learning over this post and will try to document how this blog site is being developed.

1. Clone the repository.

2. About Svelte and Sveltekit

Svelte is a compiler it compile the complete website and sends to client. Sveltekit is a framework build on top of it.

SvelteKit uses a “folder-based routing system”. Meaning that the routes are dictated by the folder structure inside routes inside project. Every route must have a folder, except for the root (’/’).

So every page must be in separate folder inside routes, with +page.svelte as a main file in it. All the functionalities must be in +page.js.

+page.js is run on server or client according to the situation, but if some code has to be executed over sever only naming the file +page.server.js is good.

+layout.svelte file inside routes define a base layout to be followed all over the site.

3. About Template.

After cloning the template it has really great interface.

Blog post section has three blogs to it:

1. How to customize this template
2. Project structure
3. How blog posts work

I’ll start will project structure.

Here project follows something called Atomic design

Atom –> Molecules –> Organisms

(Buttons, inputs) –> (Cards, group of links) –> (Section of page)

(Independent components) –> (Group of components) –> (Group of group of component)

4. Error page

If something bad happens there is a file +error.svelte which is shown in that event. Located at /src/routes/.

5. Structure inside /src/routes/

routes
    ├── (blog-article)
    │   ├── blog-posts
    │   │   └── +page.md
    │   ├── customization
    │   │   └── +page.md
    │   ├── +layout.server.ts
    │   ├── +layout.svelte --> Defines how blog posts should look
    │   └── project-structure
    │       └── +page.md
    ├── +error.svelte --> In case of error render this page.
    ├── +layout.svelte --> Used to import first css and first <slot>-1 (Base 1)
    ├── +layout.ts
    ├── rss.xml
    │   └── +server.ts
    └── (waves)
        ├── 404
        │   └── +page.svelte
        ├── blog
        │   ├── +page.server.ts
        │   └── +page.svelte
        ├── +layout.svelte --> Defines how Homepage should be. <slot>-2 (Base 2)
        ├── +page.server.ts
        └── +page.svelte --> Main sections of site. The actual contents. Load onto the <slot>-2