This blog website is a Frankenstein, some would say "Frankenstein's monster", if they wanted to be pedantic and rude, of different tools and technologies.
Just in case anyone was curious about which, I'll list them and keep it updated as it changes.
I use a lot of Firebase products because
- I work on the Firebase Web SDK. I am, as we say in the business, "dogfooding". This shows what a responsible maintainer I am.
- I like Firebase.
Data
- Firebase Firestore
- Firebase Storage
Posts are stored as documents in Firebase Firestore, images are stored in Firebase Storage.
Editing
- React
- Firebase Firestore
Bespoke WYSIWYG editor in React with markdown and preview that writes directly to Firestore. Nobody uses this except me so I don't care about bundle size optimization and all that.
Has some buttons to upload images, save versions, publish, etc.
Static Site Generation
- Node
- Firebase Admin
- marked - Markdown parser.
- prismjs - Syntax highlighter (for code).
- sharp - Image processor.
I have a Node script that generates the entire site. I can do this locally, and then manually push it to hosting, or let it run in the cloud on certain triggers (see below).
The script uses Firebase Admin to hit up Firestore and Storage and get the data, then some custom scripts and open-source formatters to generate HTML pages. It generates a page for each post and index pages for each section.
marked processes the body of the posts, which are stored in Markdown format. prismjs formats code excerpts. sharp is used to automatically create small thumbnails and Twitter card images for posts with images.
These formatters are also used in the CMS during editing, to continuously update the preview pane.
I don't use any CSS libraries or frameworks and I think it shows (i.e., it doesn't look very professional). The upside is I have not had to learn or update or debug any CSS libraries or frameworks. To each their own.
Publishing
- Circle CI
- Firebase Functions
- Firebase CLI
- Firebase Hosting
- DNSimple
When I push a "publish" button or whenever content on a published post changes in Firestore, this triggers a Firebase Cloud Function to call Circle CI which clones the repo, runs the static site generator script described above, and pushes the resulting HTML to Firebase Hosting using the Firebase CLI.
The custom domain is managed by DNSimple.