Building a personal website with Svelte, ButterCMS, and Vercel’s Serverless Functions

JuanCarlos Chavez
JuanCarlos Chavez
Posted underDesignTech

When it comes to web app projects, I prioritize simplicity. This is true for the UI, code structure, and in any other way I can.

My previous personal website

For my previous personal website, I decided to go the old “static files” route where links on the page we’re just references to other HTML files. I was familiar with front end frameworks like Vue and Angular, but I thought those solutions were too bloated for a simple personal website.

The directory structure had a route for blogprojects and about pages and ..really.. that’s about it.

undefined

Code structure of my previous website

Anytime I wanted to add another project or another blog, I would create a directory with the new project or blog name, and insert the a new index.html page and code up a document.

This was fine at first, but as I started to work on more projects and had the urge to blog more, I dreaded creating another directory, another index.html file, copying over all the styling, managing all the assets for that new document, and finally deploying the site.

The search for a better solution

This is were I began searching for a CMS solution that was simple, a UI framework that was simple, and a deployment process that is simple.

At first I tried going with a full blown WordPress solution but I didn’t like the idea of going back to PHP. Nothing wrong with it really, it actually checks the box of being a ‘simple’ solution, but working with PHP never really got me excited.

So it came down to these two things. I want a headless CMS and a modern hosting platform where I can easily deploy modern front end projects.

So after some research I found these:

  • Svelte (v3) – A component framework with a great developer experience.
  • ButterCMS – A dead simple headless CMS which has a free tier for developers.
  • Zeit Now – A great hosting solution for modern web technologies with a sharp focus on the developers experience and also has a free tier.

Zeit’s Now has a GitHub directory of sample projects you can easily deploy with no configurations and that also take advantage of their serverless architecture. So I went through and selected their Node Svelte sample app.

This followed the philosophy of keeping things simple that I had in mind.

My new personal website setup

In the src/ directory is where the Svelte app lives. I modeled the directory structure similar to Nuxt.js since their idea on this just seems so clear (you can read more up upon here.)

undefined

Svelte app directory structure

In the src/pages directory is where I recreated the blogprojects and about pages. In the src/api directory is where the serverless functions live.

undefined

Zeit’s serverless functions directory

The blog.js and projects.js returns the content created from ButterCMS which I can hit from the route https://mydomain.com/api/blog or https://mydomain.com/api/projects. The serverless function is amazingly only 10 lines of code long:

var butter = require('buttercms')('your_buttercms_api_token');

module.exports = async (req, res) => {
    const fetchPosts = await butter.post.list({
        page: 1,
        category_slug: 'example-category',
        page_size: 15
    })
    res.json(fetchPosts.data)
};

And lastly, I used the fetch api from the browser to get and display my blogs and projects.

let fetchedBlogPosts = await(await fetch("/api/blog")).json()

And that’s all! I went in and stylized all the pages and components to my liking and had to add some logic to the router to load the article if the blog url is hit directly such as https://juancarlos.codes/blog/rebuilding-my-site-with-svelte-buttercms-and-zeits-serverless-functions  (whoaaa.. so meta)

Lastly, I went to the terminal, navigated to the root of my project and typed now and hit enter and my site was deployed thanks to Zeit’s awesome dev experience when it comes to deploying web apps.

TL;DR

I recreated my website using a headless CMS (butterCMS), Svelte’s component framework, Zeit’s serverless hosting platform and it was a pretty sweet experience.

Get notified about tech, design, and entrepreneurship posts:

Subscribe to our newsletter to get to know about my latest projects and posts.


More Stories

Youtube, Podcast, & Life Updates – March 2021

The beginning of the quarter of the year is always a hectic time for me. We’re just coming off from holidays, getting back into work, & preparing for tax season. I always tend to feel refreshed and ready to attack the year in Jan & Feb with my list of goals in hand, being filled […]

JuanCarlos Chavez
JuanCarlos Chavez

How To Code a Personal Website STEP by STEP for Beginners! With FREE Hosting 2021 Edition

Have you ever wanted to learn to code but didn’t know where to start? You are in the right place. This blog is to help accompany the video above as a written guide. Who is this guide for? This tutorial is designed for those who are total beginners to web development and coding. Have you […]

JuanCarlos Chavez
JuanCarlos Chavez

Working on my second Youtube Video

I am at the beginning of my content creation journey and I have to admit, it’s asking me a lot deeper questions of myself and who am I more than I thought. Some questions come to mind: What kind of stuff do you want to share with the world? What would you do if you […]

JuanCarlos Chavez
JuanCarlos Chavez

2021 Goals

This is the year that I’ve decided to be more open than ever especially in the digital space. One way of doing this is by sharing the goals I am attempting to accomplish this year. It was tough trying to balance setting achievable goals and ambitious goals. I, as the pragmatic type, try to lean […]

JuanCarlos Chavez
JuanCarlos Chavez

How I created my first video & launched my YouTube Channel

First of all, Happy 2021! I know the craziness still exists but man it feels good that a fresh new number was added to the year ? Why start a YouTube Channel? There are 5 main reasons why I decided to finally hit record & upload: I want to be a producer rather than a […]

JuanCarlos Chavez
JuanCarlos Chavez

Recreating NASA’s UI for their Mission Control Tech

It’s pretty cool that NASA has an open-source javascript project that anyone can contribute to. You can actively write some code with the mission of space exploration & scientific discovery with some HTML, CSS, and JavaScript! This was my first glimpse into NASA’s openMCT program where they are determined to create a universal mission control […]

JuanCarlos Chavez
JuanCarlos Chavez

The Simple Intro Guide to Accounting for Small Businesses

When you create a business the first step is to register your business with your state. Each state has different processes fortunately (or unfortunately) that you could learn to do yourself but it can get clunky and weird. If you have some extra money (around $500) it’s highly recommended that you start your business with […]

JuanCarlos Chavez
JuanCarlos Chavez

How I Coded Up My Own Blog with NextJS and WordPress

If you are reading this post before in 2020 or 2021, odds are the website you are reading is built with the technologies I will be mentioning. I say this since you can inspect the code on this page pretty easily by right clicking any where on the page an hitting “inspect” and be able […]

JuanCarlos Chavez
JuanCarlos Chavez

Creating a project proposal for an agency in Notion

I have been using Notion for all list keeping including clients for the web design agency I am working to build over at omadesign.co My objective was to create a template “Project Proposal” plan for my future clients. I’ve looked at other samples and watched a few explanations on YouTube can came up with my […]

JuanCarlos Chavez
JuanCarlos Chavez