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

Overview

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

dark

light theme

light

code block with syntax highlight with JetBrains Mono font

code

output code

output

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:

GraphCMS Model

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

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"' }; ">
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.

You might also like...

Source code my personal website is written using Next.js, Tailwind CSS and Chakra UI

Source code my personal website is written using Next.js, Tailwind CSS and Chakra UI

Homepage Overview. / Home page. pages/blog/[slug] - Static pages/social - Social page. pages/photos - Photos page. pages/activites - Activites page Di

Dec 13, 2022

this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With 🔨 HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Aug 3, 2022

A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Nov 21, 2022

Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

Gatsby + Cosmic This repo contains an example blog website that is built with Gatsby, and Cosmic. See live demo hosted on Netlify Uses the Cosmic Gats

Jan 29, 2022

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

Dec 24, 2022

Another CSS style library, used for my personal branding and to make websites prettier!

Another CSS style library, used for my personal branding and to make websites prettier!

furret.css My personal website styling toolkit, modeled after the lovely Water.css by Kognise. Written to allow quick and beautiful styling for simple

Dec 23, 2022

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

Oct 5, 2022

Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors While usable, this library is stil

Sep 30, 2022

Scaffold a full-stack SvelteKit application with tRPC and WindiCSS out of the box

create-sweet-app Interactive CLI to quickly set up an opinionated, full-stack, typesafe SvelteKit project. Inspired by the T3 Stack and create-t3-app

Dec 16, 2022
Releases(v1)
⚡ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

小康 blog View Demo · Report Bug · Request Feature ?? honghong.me Framework: Next.js Database: Planetscale ORM: Prisma Authentication: NextAuth.js Deplo

小康 94 Dec 31, 2022
Starter template for a personal website blog, built with Next.js, MDX, and Tailwind CSS.

nextjs-mdx-blog-theme View: demo site Framework: Next.js Deployment: Vercel Content: MDX Styling: Tailwind CSS Running Locally $ git clone https://git

Alex Carpenter 18 Dec 26, 2022
My personal Website, where I share my blog and project. Build using Nextjs and Tailwind CSS

Personal Blog This is my portfolio website built with Next.js, Tailwind CSS and hosted with Vercel. Perfect Light House Score ?? Installation & Set Up

Ashish Lotake 6 Dec 24, 2022
Simple starter for SvelteKit with Tailwind CSS already set up and ready to go.

Get Started Simple Sveltekit boilerplate with Tailwind CSS already set up. Just run npm install to download the dependencies. Info I use Tailwind in p

Jordan 16 Dec 23, 2022
A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery ?? Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Linus Lee 215 Dec 30, 2022
simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

simple-remix-blog is a blog template built using remix.run and TailwindCSS. It supports markdown and MDX for the blog posts. You can clone it and star

José Miguel Álvarez Vañó 8 Dec 8, 2022
My personal website – Built using Next.js, TypeScript, MDX, Sanity.io and Tailwind

kenaqshal.com Framework: Next.js Database: PlanetScale ORM: Prisma Authentication: NextAuth.js Deployment: Vercel CMS: Sanity Styling: Tailwind CSS Ov

Ken Aqshal Bramasta 6 Nov 24, 2022
Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Portfolio Jesús Leal 0 Dec 23, 2021
This is my personal blog built using MERN Stack.

SURAJ'S BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technol

Suraj Sahu 4 Oct 18, 2022
Personal developer portfolio written with NextJS and Tailwind CSS.

Developer Portfolio This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature rich nextjs markdown blogging template out th

Max Geller 1 Dec 20, 2021