Minimalist Blog With Photos, Stories, Maps
Because:
- I like seeing and sharing content ads-free, with no subscription or paywall or trackers,
- I want a minimalist / fully-featured / privacy-friendly / user-friendly website,
- I want both the interface and the content lightweight by design, fast to load, and secure,
- I want it translated,
- I want it bug-free,
- I like receiving feedback without pushing you to sign in a specific social platform.
I could not find anything cheap complying to the above requirements, and I was interested in learning great web development tools. Therefore, I designed a Single Page Application using the Mithril framework, the TypeScript language, and some awesome libraries. It is deployed as a serverless application thanks to Vercel. To sum up the features:
- Interactive 3D maps,
- Interactive charts,
- Home-made track format including elevation profile,
- Fully translated in English, Finnish, and French,
- Privacy by design,
- Humane by design,
- Ethical by design,
- No cookie, no Local Storage, no IndexedDB,
- Photo viewer with dynamic image optimization,
- Mobile-friendly,
- Lazy-loading heavy scripts (with dynamic import expressions).
The project was not created to be a template or a flexible CMS, but for my own use. Feel free to take whatever inspiration from it that you want.
Clone this repo, install Node.js 20, and run npm i. For dev, run make install.
Tracks and photos are transformed with command line tools written in Python 3.11. The list of stories and photo metadata fetched by the website are statically generated at build time thanks to a custom Webpack plugin and utilities. Rebuild or rerun the local server to apply the changes.
Run the development server locally
npm startYou can view the development server at localhost:8080.
[!NOTE] To run the debug session from an IntelliJ-based IDE, configure the browser to be Chrome-based (File > Settings... > search for browser), and start the local server as usual but press Ctrl Shift Click on the local URL.
Unit testing
Run make js-test and make py-test
[!NOTE] For running specific tests on PyCharm Professional, the Node.js plugin has to be installed.
End-to-end testing
The test uses Robot Framework with the SeleniumLibrary. Run npm start in one shell and make e2e-test on another one inside the Python virtual environment (because Robot Framework is installed via Poetry). The tests do not use fake fixtures but the actual website content. The most recent photo should have a story or some tests may fail. An HTML report should have been generated.
Bundle size analysis
Run npm bundle-analysis to generate the prod bundle and start a local server with a page displaying the bundle analysis, you can check that no extra libraries are bundled.
The dependencies
# run `npm i npm-check-updates --location=global` only once
ncu -u
npm installAlso update the lazy-loaded scripts listed in the configuration file.
The logo
From a new SVG file:
- Generate PNG files of different sizes and generate the .ico with Gimp: File > Open as Layers, File > Export As...,
- Generate an apple-touch-icon file (PNG, 192x192, without alpha channel).
The font
The main SASS file should point to the font file.
For editing the font, adding glyphs, ligatures, exotic characters, etc. Have a look at this README file.
The map styles
The Mapbox Studio styles are public:
In the above links, replace YOURTOKEN with your token. Use a Mapbox token with the styles:read and fonts:read scopes.
The frontend can be deployed on any server, just install dependencies with npm ci. Some third party connections require an account. The good news is that most third parties are cost- and maintenance-free, so that you can focus on what really matters: photos, stories, adventures!
Thanks to the visitors who shared feedback. 🤗
