DEV Community

Cover image for One-click Portfolio/Personal blog generator from API

Posted on • Updated on

One-click Portfolio/Personal blog generator from API

What I built

Simple Sapper Personal site that also fetches your articles from DEV using the API and you only need to supply just four environment variables during digital ocean app deploy.

Not just that it also updates the site when you write a new article at dev, how cool is that?

Category Submission:

Personal Site/Portfolio

App Link: also at which was easy to configure via DigitalOcean's app dashboard


Alt Text

Home page

Alt Text

Posts page fetches 10 articles (Can be tweaked via .env)


Sapper is the companion framework of svelte, like how Next/Nuxt is for React/Vue. You have the benefits of svelte and all the SEO powerhouse and Server Side Rendering. You can read more about sapper here.

Options as of now that can be supplied via .env fork/clone for local development. The same variables need to be supplied at DigitalOcean. The template is below.

DEV_USERNAME = username
DEV_API_KEY = supersecretkey #obtained via
PER_PAGE = 10 #if you like pagination
COMMENTS = true #if you want comments in each post
SITE = https://yoursite/ #SEO/Social Share

Enter fullscreen mode Exit fullscreen mode

Link to Source Code

Go to the repo hit the Deploy to DigitalOcean button;

Raise issues in GitHub if something went wrong, PRs are always welcome :)

Permissive License


There aren't many examples showcasing the ease and joy of creating Sapper apps, I always wanted to consume DEV API to do something and this hackathon was the perfect motivator for building this app. Also, the one-click deploy fun.

How I built it

I have been working with Svelte and Sapper and I have written most of my articles about them and my previous app with Sapper which I had a lot of fun building Trello JAMstack and showcasing on one of the talks and this one-click app is a perfect example of how a personal portfolio/blog can be generated with Sapper.

This project uses Luke Edwards's httpie, A lightweight alternative to node-fetch which gets the job done.

In general, Svelte steers users in the direction of using lightweight libraries.

Additional Resources/Info


Top comments (0)