Getting Started

Introduction

Welcome, this will guide you through this template and how to use it. This is a SvelteKit + MDsveX Personal website and a blog completely designed with Shadcn-Svelte , it has everything you need get started and you can fully customise it. repo link

Features

it's got ton of features that you don't wanna miss out.

• Tailwind CSS for styling
• SvelteKit as meta framework
  • with shallow routing when clicking on tags to instantly see the posts based on tags. Click on the tag to see.
• Shadcn-Svelte for UI Components (@huntabyte )
• Light and Dark mode
• different themes for code blocks based on color scheme.
• Individual blog posts and series blog posts (you're reading a series)
• Syntax Highlighting
  • with toast notifications for copy feedback
  • individual words highlighting

    fib.py

    Copy

    		def fibonacci(n):
        if n <= 1: # base case
            return n
        else:
    return fibonacci(n - 1) + fibonacci(n - 2)
        

  • inline syntax highlighting example: console.log("Hey there")
  • render language icon if title with an extension is provided.

    Copy

    		```js title="example.js"
    console.log('Hello from JS');
    ```
        

    this will become

    example.js

    Copy

    		console.log('Hello from JS');
        

    • while icons are available for few languages like JS/TS, Py, Svelte, you can add for more languages if you want.
  • MDsveX preprocessor to support markdown files
  • Custom Components
  • use svelte components inside markdown
    • example
      try changing the theme 👉
  • Table of Contents
  • Giscus Comments (based on Github Discussions)
  • Projects Page
  • Math support using KaTeX
    • examples: Inline: $\nabla \times mathbf{B} = mu_0 left(mathbf{J} + arepsilon_0 rac{partial mathbf{E}}{partial t}\right)$
    • Block equations (here are my favourite Maxwells's Equations )$$abla cdot mathbf{E} = rac{ ho}{arepsilon_0}$$$$abla cdot mathbf{B} = 0$$$$abla imes mathbf{E} = -rac{partial mathbf{B}}{partial t}$$$$abla imes mathbf{B} = mu_0 left(mathbf{J} + arepsilon_0 rac{partial mathbf{E}}{partial t} ight)$$
  • Mobile friendly interface

How to Use?

In this section we'll dicsuss about how to setup quicky and get started.

Installation

To install, clone the repo using

		git clone https://github.com/ilker-sigirci/my-blog.git
    

install the node modules

		cd my-blog && pnpm i
    

and start editing the following files

• $lib/config.ts which has all the links
• about/about.md to change the about page
• $lib/assets for favicon and image
• $lib/components/site/hero.svelte to change the home page
• $lib/projects.ts to change your projects.

let's have a look at $lib/config.ts

		import { LinkedIn, X } from '$lib/components/site/icons';
import { FileText, Github, Mail } from 'lucide-svelte';
 
type routesType = {
    name: string;
    link: string;
};
 
type socialsType = {
    href: string;
    icon: typeof Github;
    display: string;
    class?: string;
};
 
// nav routes
export const routes: routesType[] = [
    {
        name: 'Blog',
        link: '/blog'
    },
    {
        name: 'Tags',
        link: '/tags'
    },
    {
        name: 'Projects',
        link: '/projects'
    },
    {
        name: 'About',
        link: '/about'
    }
];
 
// social icons with links
const socials: socialsType[] = [
    {
        href: 'https://github.com/ilkersigirci',
        icon: Github,
        display: 'GitHub'
    },
    {
        href: 'https://linkedin.com/in/ilkersigirci',
        icon: LinkedIn,
        display: 'LinkedIn'
    },
    {
        href: 'https://x.com/ilkersigirci',
        icon: X,
        display: 'Twitter',
        class: 'h-4 w-4'
    },
    {
        href: 'mailto:sigirci.ilker@gmail.com',
        icon: Mail,
        display: 'Mail',
        class: 'h-4 w-4'
    },
    {
        href: '/Ilker-Sigirci-Resume.pdf',
        icon: FileText,
        display: 'Resume'
    }
];
 
export const getSocials = ({ exclude }: { exclude?: string } = {}): socialsType[] => {
    if (exclude) {
        return socials.filter((social) => social.display !== exclude);
    }
    return socials;
};
 
export const githubConfig = {
    username: 'ilkersigirci',
    repo: 'my-blog',
    branch: 'main'
};
    

To ensure that your local images, located in the posts/[slug] folder, can be converted to GitHub URLs, it's essential to include your githubConfig in the config.ts file. This is particularly useful when you want to include images in your blog posts and prefer to store them in the same folder as your post for better organization.

However, there's a caveat – assets in other than public folder (static), won't be processed by Vite. As a result, these images won't have a definite URL. To obtain the URL, you'll need to incorporate your githubConfig, which transforms your local images into GitHub raw URL format. This ensures that when you deploy your application, the images will correctly point to your GitHub repository.

Alternatively, you can place your images directly in the static folder and access them using / which points to static folder. example: /image.png and you also get Vite Image Optimisation.

Always use a CDN for better performance.

see the next part on How to write blogs