Blips is my (Ethan Marks) personal microblog. I use it for random updates, stream-of-consciousness notes, and the various interesting quotes and tidbits that I stumble upon.
https://ethmarks.github.io/blips/
- Framework: SvelteKit
- Content Management System: Sanity
- Hosting: GitHub Pages
This project really isn't intended to be used by anyone other than me, but if you insist, you can run Blips locally with the following commands.
git clone https://github.com/ethmarks/blips.git
cd blips
npm install
npm run devThe frontend for Blips is built with SvelteKit. I chose it because I think that it's the best web framework and I wanted to learn to use it (this is actually the primary reason I created Blips in the first place: as a learning project for SvelteKit).
My SvelteKit config is fairly typical, with the two noteworthy features being:
- It imports adapter-static to make SvelteKit prerender and build the project for GitHub Pages
- It sets
paths.baseequal to"/blips"to adjust for GitHub Pages' URL structure
The vast majority of this project's styles are imported from my main site's global styles with the following line:
<link
rel="stylesheet"
href="https://ethmarks.github.io/css/global.min.css"
/>The header and footer are imported as Web Components from my main site through a process described in this post.
The Blip content is converted to HTML using the Marked library. It is further processed using a pipeline of custom JavaScript functions such as blockquoteCitations.js which encases blockquote citations with <cite> tags.
The backend for Blips is built with Sanity CMS. I chose it because it has a generous free tier and provides powerful tooling for writing Blips.
This repo contains a Sanity Studio in the studio-ethmarks-blips/ directory. The studio is then deployed to Sanity's servers where it it accessible from the web on any device that's logged into my Sanity account.
The bulk of the studio's source code was auto-generated using the npm create sanity@latest command. The only pieces of custom code are the schemas, blip.ts and index.ts.
The studio can be run locally with the following commands (assuming you've already cloned the repo):
cd studio-ethmarks-blips
npm install
npm run devMy Sanity project also utilizes a webhook that automatically triggers a site rebuild whenever a new blip is created. The configuration for the webhook is below.
| Field | Value |
|---|---|
| Name | GitHub Pages Deploy |
| Description | Automatically triggers a rebuild of the SvelteKit site upon content update |
| URL | https://api.github.com/repos/ethmarks/blips/dispatches |
| Dataset | production |
| Trigger on | Create, Update, Delete |
| Projection | {"event_type": "sanity-dispatch"} |
| HTTP method | POST |
| HTTP headers | {"Accept": "application/vnd.github+json", "Authorization": "Bearer <GITHUB TOKEN>"} |
| API version | v2021-03-25 |
The <GITHUB TOKEN> is a placeholder for the GitHub Personal Access Token, which is necessary for authorizing the webhook. The token has access to the ethmarks/blips repository and has its Contents permission set to Read and write.
The project is automatically deployed to GitHub Pages via the deploy.yml workflow. The workflow triggers on every push to the main branch and upon every dispatch from the Sanity webhook.
Licensed under an Apache 2.0 License. See LICENSE for more information.