MarvinJS is a static site generator built around the themes.

Why another static site generator?

There're already so many battle-tested static site generators so why bother creating another one?

Two things we care most in static site generator:

1. Templates
2. Data

Compile templates with data from markdown files or whatever, you will have a static site.

Templates could be written in any template languages you like. I have tried developing templates with ejs, handlebars in Node.js, there're something I am not content with:

1. Developer experience
2. How codes are structured

Here's what I expect from developing templates for static site generator after I finished some front-end projects with React.js:

1. Great developer experience. Hot reload is must-have.
2. Components. Partials are so old compared to components.
3. Scoped styles. I don't want to ruining my life with those global css rules, even with helps from something like BEM.

Since React.js already supports server side render, why not just developing templates for static site generator with React.js?

It could be funny!

Demo

1. Please check My blog

How to develop

We use Neutrino React Components Preset to develop theme January.

1. Clone this repo
2. Run npm install or yarn to install dependencies
3. Run npm start or yarn start to start the dev server

How to build

1. Clone this repo
2. Run npm install or yarn to install dependencies
3. Run npm run build or yarn build, you'll get the built components under build folder

CSS

There're three types of css file in theme January, we'll handle them differently.

Third party css

Say you want to include normalize.min.css in all you page, since we won't change them often, then we can just include them with link:

<link rel='stylesheet' href='/static/css/normalize.min.css' />

Just make sure you put them under src/static folder so they'll get copied when build.

Global css rules you defined

Of course we will define some global css rules for our pages, for example, font-family etc. Since we sometimes will modify it, so we just import them in our templates, when built, they get exported with hash value in their filenames. In this way, we can cache our css files for a long time.

Scoped css rules

In January, we use styled-components to add scoped styles to our components.