One-click Portfolio/Personal blog generator from dev.to API
Shriji
Posted on December 27, 2020
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:
https://dev-to-sapper-zfnzi.ondigitalocean.app/ also at https://blog.shriji.xyz/ which was easy to configure via DigitalOcean's app dashboard
Screenshots
Description
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 https://dev.to/settings/account
PER_PAGE = 10 #if you like pagination
COMMENTS = true #if you want comments in each post
SITE = https://yoursite/ #SEO/Social Share
Link to Source Code
https://github.com/peopledrivemecrazy/dev-to-sapper
Go to the repo hit the Deploy to DigitalOcean button;
Raise issues in GitHub if something went wrong, PRs are always welcome :)
Permissive License
https://github.com/peopledrivemecrazy/dev-to-sapper/blob/main/LICENSE
Background
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
Posted on December 27, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.