svelte-blogger

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

This app also use graphql and use markdown to write posts.

screenshots

home

dark theme

light theme

code block with syntax highlight with JetBrains Mono font

output code

How use it

Just fork or clone the repository, you will need a graphql api, I decide to not implemeted my own so i personally use GraphCMS, and it is so easy!

My GraphCMS schema looks like it:

After creating just grab your host uri and your token and set as env

VITE_GRAPHCMS_HOST=

Now that you have graphql configured enter in config folder in src

You need to change the base.ts file with your configs

export const about = {
    name: "your name",
    img: "your profile image",
    description: "your description",
    skills: [/*array of objects with props -> name: string, percent: number*/],
    tags: [/*string array*/]
};

export const social = {
    github: "your github username",
    linkedin: "your linkedin username",
    instagram: "your instagram username",
};

export const site = {
    title: 'site title,
    navTitle: 'navbar title',
    lang: 'lang "en-US" or "pt-BR"'
};

Now with everything configured, follow steps bellow to start in dev or to build de project, is very simple and fast to deploy in vercel!

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

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:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.