DEV Community

Cover image for Power of Blogging with SveDev: Dev.to API & SvelteKit Combo
Shivam Meena
Shivam Meena

Posted on

Power of Blogging with SveDev: Dev.to API & SvelteKit Combo

Introduction

Hello readers! As you know, having limited options when it comes to customizing your blog is little bit of headache.
Dev.to is pretty good as writing and showing them to world but it have it's own limits. You can use there user based blog showcase but it's not on your blog but on dev.to and what we want is to showcase on our own blog website. If you really wanna do this. Then, allow us to introduce you to SveDev - A blog template that combines the power of Dev.to API as a CMS and SvelteKit as a frontend. With this setup, you can easily showcase your blog posts to the world while enjoying the flexibility and customization options provided by both tools. So, buckle up and join us as we explore the features of SveDev and why it is the perfect solution for your blog.

SveDev

It's a blog template for the writer who writes on Dev.to and want to have their own blog website without to worry about tech stuff and if you want to customize it you can. We use Dev.to(Forem) Api to interact with SveDev's frontend which uses Svelte and SvelteKit.

SveDev

Tech Stack

Client: Svelte, Tailwind, DaisyUI

Server: SvelteKit, Dev.to(Forum) Rest API

Full Text Search LyraSearch (Free and OSS)

Deployment

You can use one click deployment for Vercel and Netlify and for Linux and other deployment please check How to use guide.

Deploy with Vercel

Demo

When you use One Click Deploy You can't use meta icon so first change that and deploy it.

How to Deploy

You can deploy SveDev to any platform using SvelteKit adapters. Some of them are made by community and some are officially by the Svelte team.

To deploy SveDev you have to add some environment variables in '.env' or in deployment specific platform's environment values.

1. PUBLIC_SITE_NAME=EtherCorps // Your Blog name
2. DEV_TO_API_KEY=sdfghjktfh // Your dev.to Api key
3. PUBLIC_DEV_TO_USERNAME=theether0 // Your dev.to username
Enter fullscreen mode Exit fullscreen mode

For adapters, you can read SvelteKit Docs and according to that you can change your adapter in svelte.config.js file. Then build your app and deploy.

Features

SveDev have features that everyone needs like theme, blog search and table content for every block (Heading with h2 or ## tag).

SveDev approaches minimal style with lot's of theme where user can have good user experience.

Pages

  • Home page: is simple and user friendly which shows your newest post, most popular posts, latest post and authors pick suggestions and there is more to explore.

  • Blog Page: is to show your all posts from dev.to and you can search for anything in them that's the power of full text
    search which is easily accessible because of LyraSearch.

  • Blog Reader Page: is where you read articles and have function for table content that helps you to jump on different titles within the post.


I'm looking for suggestion in SveDev's template and Design. If anyone wants to suggest or find any issue while using it can open a issue on GitHub.

You can read this article on blog.ethercorps.io or at any demo.


Top comments (0)