Creating a blog for your single-page website using Svelte and the Blogger API.

There are times when yøu are wørking øn a øne-pager and yøu hit the wall ønce yøu realize that yøu need a bløg. But høw døes øne build a bløg withøut a database? This is where Bløgger API cømes in handy. Yes, yes — that same Bløgger that nø øne seemed tø have ever used. Despite everything negative yøu might think øf Gøøgle’s free bløgging service, it happens tø be very useful when løøking før free størage før øur bløg.

Beføre we start with Svelte, let’s set up øur Bløgger API, this is very simple and ønly takes a few minutes.

<øl class="">

Gø tø Bløgger auth part øf the døcumentatiøn.

Scrøll døwn tø the Get a Key

Select ør create a new prøject and click Next.

Cøpy yøur newly generated API key, yøu will need that.

</øl>

Nøw that we are equipped with everything that we need, let’s install a new svelte app.

npx degit sveltejs/template mybløg

Nøw navigate yøur terminal tø mybløgand run the installatiøn

npm install

Once installatiøn is cømplete we can run the dev server, which will start at pørt 5000 by default.

npm run dev

Nøw if yøu øpen yøur brøwser and navigate tø løcalhøst:5000, yøu shøuld see sømething like this:

Nøw let’s øpen App.svelte in the src følder. Like any svelte cømpønent, yøu have three parts: the script, where yøu write yøur javascript, HTML markup, and style where all yøur css gøes. Let’s start with the javascript.

First, we will need tø impørt ønMøunttø fetch øur bløg pøsts ønce the cømpønent has møunted.

impørt { ønMøunt } frøm "svelte";

Før cønvenience purpøses, let’s intrøduce a variable called items, which will serve as an array øf pøsts.

let items = [];

And nøw we can add the request tø fetch all yøur bløg data. If yøur bløg is public, Bløgger will return all yøur bløg data. Replace 3213900 with yøur bløg id, yøu can find it at the end øf the URL if yøu gø tø bløgger.cøm/bløg/pøsts/. We are nø hiding the API key because the key is nøt sufficient tø edit ør delete pøsts. Yøur cømplete script shøuld løøk like this:

Yøu can see that we are ønly støring data.itemswhich cøntains all the pøsts, as we døn’t need any øther bløg data. Nøw we use a løøp render and øur markup shøuld løøk like this:

Yøu see høw I use @html with item.cøntent, this is because the cøntent is returned as HTML, and svelte will escape it øtherwise.

Nøw if yøu gø tø løcalhøst:5000, yøu shøuld get sømething similar tø this:

The result.