Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/r7kamura/katatema
A handy static site generator using React.js
https://github.com/r7kamura/katatema
react scss webpack
Last synced: 12 days ago
JSON representation
A handy static site generator using React.js
- Host: GitHub
- URL: https://github.com/r7kamura/katatema
- Owner: r7kamura
- License: mit
- Created: 2016-11-10T11:50:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-24T15:58:54.000Z (over 7 years ago)
- Last Synced: 2024-10-19T13:07:37.918Z (25 days ago)
- Topics: react, scss, webpack
- Language: JavaScript
- Homepage:
- Size: 469 KB
- Stars: 95
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# katatema
[](https://www.npmjs.com/package/katatema)
[](https://circleci.com/gh/r7kamura/katatema)
A handy static site generator using React.js.
- Minimal setup
- Intuitive templating
- Hot reloading
- SCSS support
- Head support
## Usage
### Minimal setup
To start using it, run this inside a new directory:
```bash
npm install katatema --save
mkdir pages
```
Write `./pages/index.js` as your 1st page:
```javascript
import React from "react";
export default () =>
Hello!
```
Add a script to `package.json` like this:
```json
{
"scripts": {
"serve": "katatema serve"
}
}
```
Run it and open the preview server on [http://localhost:3000](http://localhost:3000):
```bash
npm run serve
```
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:
```json
{
"scripts": {
"build": "katatema build"
}
}
```
And then just run it.
```bash
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.
### SCSS support
We officially support [Sass](http://sass-lang.com/) to style pages.
Import `*.scss` file as a React component, then embed it.
```javascript
import React from "react";
import Style from "./main.scss";
export default () => (
Hello
)
```
```scss
.foo {
background-color: red;
}
.bar {
color: white;
}
```
```html
.foo {
background-color: red;
}
.bar {
color: white;
}
Hello
```
### Head support
Use our `` component to append elements to the `` of the page.
```javascript
import Head from "katatema/head";
import React from "react";
export default () => (
Hello
Hello
)
```
## FAQ
How to deploy to GitHub Pages?
`gh-pages` command line utility helps you deploy your site to GitHub Pages.
```bash
npm install gh-pages --save-dev
```
When using `gh-pages`, your `package.json` looks like this:
```json
{
"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 [email protected]: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
```
What is this inspired by?
- [PHP](https://github.com/php/php-src)
- [next.js](https://github.com/zeit/next.js)
- [gatsuby](https://github.com/gatsbyjs/gatsby)
- [sitespec](https://github.com/r7kamura/sitespec)