Life is very short ‐ BLOG

It's Never Too Late to Start Writing a Blog

I’ve never written a blog before. It’s not that I dislike writing—after all, I write a lot for work—but I suppose I’ve never felt the urge to share my own thoughts or ideas outside of my professional role. Maybe I was just too lazy, or maybe I wasn’t sure what I wanted to say.

But life is short. Too short to let hesitation or complacency hold me back. So here I am, starting this blog as a way to explore new ideas, share what I’ve learned about web technologies and service development, and occasionally reflect on life and the world around me.

This is a small step, but one I hope will make my life a little richer. :)

Setting Up My Blog

Before I could start writing, I needed to figure out where and how to host my blog. I wanted something simple, cost-effective, and easy to maintain. After a bit of research, I decided to host a static blog using Cloudflare Pages.

Here’s what I did to get started:

1. Choose a URL

I already own a domain, so I decided to host my blog at:
https://life-is-very-short.com/blog/

2. Use Markdown for Writing

I wanted to keep my writing process simple and focused. Markdown is a lightweight and intuitive format, making it perfect for blog posts.

3. Select a Framework: Svelte

For building the blog itself, I chose Svelte. It’s lightweight, fast, and perfect for creating static sites.

4. Follow a Tutorial

To save time, I followed this excellent tutorial. It explains how to use SvelteKit to create a content-driven static site using Markdown files.

Here’s a brief summary of the steps I followed:

1. Set up the SvelteKit project
   • Install SvelteKit:

npm create svelte@latest my-blog
cd my-blog
npm install

- Choose the skeleton project when prompted.

2. Add Markdown support
   • Install @sveltejs/adapter-static for static site generation:

npm install @sveltejs/adapter-static

- Configure svelte.config.js to use the static adapter.

3. Organize Markdown files

   • Create a content directory for your blog posts.
   • Write your first post in Markdown (e.g., content/first-post.md).

4. Build and deploy to Cloudflare Pages

   • Build the site:

npm run build

- Deploy to Cloudflare Pages following their official guide.

By following these steps, I was able to set up a fully functioning blog without spending a dime!

<script lang="ts">
    import type { PageData } from './$types';
    import Showdown from 'showdown';
    import ShowdownHighlight from 'showdown-highlight';
    import github from "svelte-highlight/styles/github";
    import {Heading, P} from "flowbite-svelte";
    let { data }: { data: PageData } = $props();
    const converter = new Showdown.Converter({
        // That's it
        extensions: [ShowdownHighlight({
            pre: true,
            code: true,
            auto_detection: true
        })]
    });
    const postContentHTML = converter.makeHtml(data.post.content);
</script>

<svelte:head>
    {@html github}
</svelte:head>

<style>
    :global {
        h2 {
            @apply text-2xl font-bold mb-8 mt-16;
        }
        p {
            @apply mb-4;
        }
        code.a {
            @apply bg-black text-white p-4 rounded block whitespace-pre-line;
        }
    }
</style>


<div class="container m-0 p-8 pt-16 mx-auto h-dvh bg-gray-50 place-items-center">
    <Heading tag="h1" class="text-center">Life is very short</Heading>
    <P class="my-4 text-gray-500 text-center m-16">Life is very short and there’s no time for fussing and fighting, my friends. &mdash; John Lennon</P>

    <article class="bg-white p-8 m-0 mx-auto">
        <Heading tag="h2" class="mb-4 pb-2 border-b-gray-300 border-b">{data.post.fields.title}</Heading>

        <div class="text-gray-400 mb-12">
            <div class="">{new Date(data.post.fields.date).toDateString()}</div>
            <ul class="">
                {#each data.post.fields.tags as tag}
                    <li class="float-left pr-2">{tag}</li>
                {/each}
            </ul>
        </div>

        <div class="my-8">
           {@html postContentHTML}
        </div>
    </article>
</div>

Ready to Write

With the setup complete, I’m ready to start writing. This first post is my small step into the world of blogging. I’ll be sharing insights about web technologies, service development, and occasionally my thoughts on life and the world.

I hope this blog will grow into something meaningful—not just for me, but for anyone who finds value in what I share. Life is short, after all. Let’s make the most of it.