Make your own Blog with SvelteKit and dev.to api
Tags: sveltekit, api, javascript, blog
Published: 2022-07-14 12:26:51

##Read if:
- You are interested in SvelteKit
- Wanna learn about how to make your own blog.

##Introduction
In this post I'm gonna show you how i created my own blog for [ethercorps.io](https://ethercorps.io).

Visitors can see and read all the blog on your website while you gonna write them on [Dev](https://dev.to).

Here I used `SvelteKit`, `TailwindCSS`, `Dev.to`.

##How SvelteKit Works

SvelteKit is a full-stack framework that is used with sveltejs. SvelteKit follows modern _filesystem-based _ which is like if you wanna visit a url 
> e.g. example.com/blog/[blogID] blogId is dynamic

then you have to make a folder by name `blog` in your routes directory than add a svelte file `[slug].svelte` file name going to be same.

![Ether Corps Blog File Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r1fsde787qv1bbhl8hk.png)

As you can see the above image I have a `blog` directory and in which two files exists `index.svelte` and `[slug].svelte`,
When you visits 
> e.g. example.com/blog

your `index.svelte` file going to be shown and when you visit

> e.g. example.com/blog/[blogID]

your `[slug].svelte` file going to be shown.

##Index.svelte

As I mentioned above this file gonna show all of your blogs available on the dev.to,
Now question arise how we gonna do that?
It's a pretty simple thing we gonna hit dev.to api for your usernames post
> https://dev.to/api/articles?username=theether0
Here `theether0` is my username which you can replace by your own.

- First we gonna talk about how we gonna hit api.

```javascript
<script context="module">
	export async function load({ fetch }) {
		let articles;

		try {
			articles = await fetch(`https://dev.to/api/articles?username=theether0`);
			articles = await articles.json();
		} catch (e) {
			console.log(e);
		}
		return {
			props: {
				articles
			}
		};
	}
</script>

<script>
	export let articles;
</script>
```

In above code you can see there are two script's tag one with [context module](https://svelte.dev/docs#component-format-script-context-module).This script tag will run first and after that every thing.So in that script tag we will fetch our all blogs then pass them as props (SvelteKit asked for it) and then that props items can be accessed from normal script tag that will run after the module tag.

> Example props:{articles} here you can access it in normal script tag `<script> export let articles </script>`

- Now we gonna see our HTML
```html
<section class="text-secondary body-font overflow-hidden">
	<div class="container px-5 py-24 mx-auto">
		<div class="-my-8 divide-y-2 divide-gray-100">
			{#each articles as article}
				<div class="py-8 flex flex-wrap md:flex-nowrap">
					<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
						<span class="font-semibold title-font text-gray-700">CATEGORY</span>
						<span{article.readable_publish_date:}</span>
					</div>
					<div class="md:flex-grow">
						<h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
							{article.title}
						</h2>
						<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-row space-x-2">
							{#each article.tag_list as tag}
								<span class="font-Basteleur-Moonlight title-font text-gray-700 capitalize"
									>{tag}</span
								>
							{/each}
						</div>
						<p class="leading-relaxed">
							{article.description}
						</p>
						<a class="text-indigo-500 inline-flex items-center mt-4" href={`/blog/${article.id}`}
							>Learn More
							<svg
								class="w-4 h-4 ml-2"
								viewBox="0 0 24 24"
								stroke="currentColor"
								stroke-width="2"
								fill="none"
								stroke-linecap="round"
								stroke-linejoin="round"
							>
								<path d="M5 12h14" />
								<path d="M12 5l7 7-7 7" />
							</svg>
						</a>
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>

```
- Above there is one `<a>` tag in which href's `article.id` will be passed as slug to your `[slug].svelte` page that how you make it dynamic. You pass a slug/parameter and SvelteKit uses it as slug.

This is the `index.svelte` file.

##[Slug].svelte

```javascript
<script context="module">
	export async function load({fetch, params}) {
		let article;
		try {
			article = await fetch(`https://dev.to/api/articles/${params.slug}`);
			article = await article.json();
		} catch (e) {
			console.log(e);
		}
		return {
			props: {
				article
			}
		};
	}
</script>

<script>
	export let article;
</script>
```
- Above we are doing the same thing as we done in `index.svelte` difference is we are getting `slug` from `params` which is you passed to your article in `index.svelte`.


- HTML part is more say here.
```html
<div class="prose md:mx-auto mx-4 lg:prose-xl md:pt-40 py-20">
	<h1>{article.title}</h1>
	{@html article.body_html} //html can be served with @html in sveltekit
</div>
```
- Above i used tailwindcss typography plugin which made my life easier.

---
That was how to make blog with SvelteKit with dev.to, This will going to have a second part where i'll tell you about searching the blog.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.