Béchamel

Creating a static website where you can just write content and forget about it is hard. Plenty of solutions, each has their own strenghts and weaknesses.

Bechamel is my own SSG website generator, which I use for this website. It’s built using Next.js, React, Tailwind and Jupyter notebooks. Write your content in your Jupyter notebooks and deploy to Cloudflare Pages or GitHub pages for inexpensive or free hosting!

I built Bechamel because I wanted to write content in Jupyter notebooks since it works really well for taking notes and mixing in code and experiments. I tried other SSG systems such as Jupyter Book, but these are more geared to documentation than a blog or personal website.

This SSG system is built on the following components:

Next.js is a powerful batteries-included react-based web framework which makes it easy to build high quality websites and SPAs.

I used Next.js in this project due to the following benefits:

• Built on React (benefits below)
• Implements build-time static rendering of content
• Splits pre-renderable content and dynamically-renderable content so your content loads before the JavaScript does
• Code-splits JavaScript so only the JS required on a page is downloaded
• Handles routing
• Provides sensible defaults (Tailwind, TypeScript)
• Implements React Server Components as a default

Almost all of the code is written in TypeScript due to the following benefits:

• Strict typing helps determine mistakes even in the IDE (using the wrong object or improperly initializing an object)
• Types act as contracts on how functions should interact with each other
• Forces me to normalize and check all data

• Used to render the website
• The complexity of the React codebase scales logarithmically compared to the number of features I add
• I wanted to learn it 😂
• Dynamic content is easy to develop and keep isolated in its own shell

• Almost all styling is done using Tailwind CSS to reduce the CSS load
• Easy to make changes to the UI since the properties are in front of you always

• Lots of components from ShadCN were used in this project.
• Reduces boilerplate
• Implements simple functionalities used everywhere
• Components are locally implemented in the repo leading to easy styling and modification to your styling.

• My go-to choice for writing notes, thoughts and documents
• Jupyter IDEs are really good
• Supports Markdown and code
• Directly embed images (and possibly other multimedia) directly into the notebook cells as attachments
• Easy to share notebooks since they are self-contained normally

• Docs
• GitHub