Home

Awesome

katatema

npm CircleCI

A handy static site generator using React.js.

Usage

Minimal setup

To start using it, run this inside a new directory:

npm install katatema --save
mkdir pages

Write ./pages/index.js as your 1st page:

import React from "react";
export default () => <div>Hello!</div>

Add a script to package.json like this:

{
  "scripts": {
    "serve": "katatema serve"
  }
}

Run it and open the preview server on http://localhost:3000:

npm run serve

image

That's all. No time-consuming configuration required. (e.g. .babelrc, webpack.config.js, gulpfile.js...)

Intuitive templating

We build sites like it's 1990s, or like PHP in those good old days. Files are translated into HTML pages by using the filesystem as an API. Add a JavaScript file at ./pages/index.js and it'll be converted to ./docs/index.html.

./pages/index.js  ---converted--->  ./docs/index.html
./pages/about.js  ---converted--->  ./docs/about.html
./pages/usage.js  ---converted--->  ./docs/usage.html

To build HTML files, add a script to package.json like this:

{
  "scripts": {
    "build": "katatema build"
  }
}

And then just run it.

npm run build

Hot reloading

All pages will automatically refreshed without page reloading on the preview server. This is powered by webpack's Hot Module Replacement feature in the background. Dramatically speed development.

demo

SCSS support

We officially support Sass to style pages. Import *.scss file as a React component, then embed it.

import React from "react";
import Style from "./main.scss";
export default () => (
  <div className="foo">
    <Style/>
    <h1 className="bar">Hello</h1>
  </div>
)

.foo {
  background-color: red;
}
.bar {
  color: white;
}

<style>
  .foo {
    background-color: red;
  }
  .bar {
    color: white;
  }
</style>
<div class="foo">
  <h1 class="bar">Hello</h1>
</div>

Head support

Use our <Head> component to append elements to the <head> of the page.

import Head from "katatema/head";
import React from "react";
export default () => (
  <div>
    <Head>
      <title>Hello</title>
    </Head>
    <p>Hello</p>
  </div>
)

FAQ

<details> <summary>How to deploy to GitHub Pages?</summary>

gh-pages command line utility helps you deploy your site to GitHub Pages.

npm install gh-pages --save-dev

When using gh-pages, your package.json looks like this:

{
  "scripts": {
    "build": "katatema build",
    "serve": "katatema serve",
    "deploy": "npm run build && gh-pages --dist docs"
  }
}

Then you can simply invoke npm run deploy to deploy.

Cloning git@github.com:username/repo.git into node_modules/gh-pages/.cache
Cleaning
Fetching origin
Checking out origin/gh-pages
Removing files
Copying files
Adding all
Committing
Pushing
Published
</details> <details> <summary>What is this inspired by?</summary> </details>