Esbelto, a component-based web blog

Esbelto is a web blog built with the SvelteKit framework. This project exists to sharpen my HTML, CSS and JS skills, and to learn app development using a JS framework as a compiler.

Options and components:

Esbelto ships with more than 20 components ready to reuse across the site.

Web components:

• Accordion.
• Articles.
• Comments.
• Headers.
• Tabs.
• Container.
• Loading.
• Seo.
• Share.
• Signage.
• SocialMedia.
• VisitingCard.

HTML components:

• Btn.
• Hn.
• Iframe.
• Input.
• InputCheck.
• InputRadio.
• Label.
• Select.
• Textarea.

Other details:

The app doubles as documentation. The blog section of the site publishes articles referencing the components, describing each one and how to use it.

Libraries and extra dependencies on top of SvelteKit:

Mdsvex v0.9.7 Font Awesome CDN v5.15.3 Google Fonts CDN

How to use it:

Esbelto Blog is licensed under MIT and built for educational and personal purposes, to sharpen my skills. You can download it for free from my GitHub repository and reuse it for your own projects. Keep in mind you’ll need at least basic Node.js knowledge.

Here’s how to set it up for development and build a final version for production.

Development:

Once you’ve downloaded the app and installed the dependencies with npm install (or pnpm install or yarn), start a dev server:

npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open

Production:

Before creating a production build of your app, install an [adapter] for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. Don’t use this to serve your app in production.