✍️ 💻 👋

Source code for my blog.

Overview

Next is used as a static site generator. Pages call the network service that triggers persistence to read a post or a project from an MDX file in the storage directory.

Translation dictionary collection, RSS generation and image optimization are performed by custom scripts located in ops. For optimizing images, Squoosh is used.

Jest is used as a test runner and Hygen as a code generator.

Deployed on static servers using GitHub Actions.

Installation

Clone the repo and install dependencies:

git clone https://github.com/bespoyasov/www.git
cd www

npm install

Development

For starting the development mode, run:

npm start

This command will start 3 daemons in parallel:

Next dev server for En version on 2001 port;
Next dev server for Ru version on 2002 port;
Translation dictionary watcher for live-updates of localization data.

Code Generation

To create a component, post, or a page, run:

npm run new:component
npm run new:post
npm run new:page

# After hitting any of these commands,
# an interactive CLI will guide you.

Testing

To run the tests while developing:

npm run test:dev

To run all tests once:

npm test

The latter command is also used in CI.

Project Build

The project can be built in 2 different languages:

npm run build:en
npm run build:ru

After the build, Next exports the generated site sources into the out directory. Then the static resources are cleaned up to contain only the media related to the current build locale. In the end, RSS is generated.

As a result, you will find sources for a static website in the out directory that can be deployed.

Devops

For operations that aren't included in Next by default, custom ops scripts are used.

Image Optimization

To optimize images in public/images using Squoosh, run:

npm run images:convert

Next's Image component doesn't support optimizations when using SSG, hence this script.

Also, generated images are kept in the repository to avoid too long deployments. Since all images require optimizations, without this every update would last for tens of minutes.

Translation

Instead of using a third-party library and a localization service, the custom translation “library” is used.

It collects data from translations.json files in the src directory and creates a translation dictionary. Except the resulting dictionary, the script also creates the type definitions for the dictionary. The typings improve the IDE support and autocompletion.

To collect translations, run:

npm run dict:collect

This command is also run automatically after installing the dependencies and before project start and build.

To set up a watcher over the translation data that updates the dictionary on every translations.json file change, run:

npm run dict:watch

This command is run automatically before start of the project.

Plans and TODOs

Everything I consider implementing is located in the projects section on GitHub. If you have an idea of an improvement, please, let me know in the project issues.

License

The source code is distributed under the GNU GPL v3.0 license. You can use, modify, and redistribute it as long as you keep the license and disclose the source.

The content of the site is distributed under the CC BY-NC-SA 4.0 license. You can use and modify it as long as you mention the source and author, keep the license, and don't use the content in a commercial product.

emacsway / bespoyasov-www