# jso-react-static-website

> Really simple static site generator based on React.

Latest version **1.0.4** (published 2019-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install jso-react-static-website
pnpm add jso-react-static-website
yarn add jso-react-static-website
bun add jso-react-static-website
```

Provides the command `jso-react-static-website`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-03-03 |
| First published | 2019-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 66 KB |
| Known vulnerabilities | 0 (+6 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | jsocean.com |
| Maintainers | jsoceandiver |

## Links

- npm: https://www.npmjs.com/package/jso-react-static-website
- Repository: https://github.com/jsoceandiver/jso-react-static-website
- Homepage: https://github.com/jsoceandiver/jso-react-static-website.git
- Issues: https://github.com/jsoceandiver/jso-react-static-website/issues
- npm.io page: https://npm.io/package/jso-react-static-website

## Dependencies (16)

- [react](https://npm.io/package/react.md) ^16.6.0
- [colors](https://npm.io/package/colors.md) ^1.3.2
- [pretty](https://npm.io/package/pretty.md) ^2.0.0
- [postcss](https://npm.io/package/postcss.md) ^7.0.5
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.9.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.0
- [uglify-js](https://npm.io/package/uglify-js.md) ^3.4.9
- [uglifycss](https://npm.io/package/uglifycss.md) 0.0.29
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.3.1
- [light-server](https://npm.io/package/light-server.md) ^2.6.0
- [@babel/register](https://npm.io/package/@babel/register.md) ^7.0.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.0
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0

## Recent versions

- 1.0.4 (latest) — 2019-03-03
- 1.0.3 — 2019-03-03
- 1.0.2 — 2019-03-03
- 1.0.1 — 2019-03-03
- 1.0.0 — 2019-03-03

## README

# React Static Website Generator
Really simple static site generator based on [React without ES6](https://reactjs.org/docs/react-without-es6.html). It uses  server side rendering to build the pages. 

## Features
           
- No markdown, only react :) You are free to use any markup you need.
- Uses SASS preprocessor and autoprefixer for CSS, automatically minifies the CSS output.
- Minifies client side javascript using UglifyJS
- MIT licensed

## How to install?

```
cd my-website-folder
npx jso-react-static-website build
npm install
```

## How to use?

- Build the site using 
    ```
    npm run build
    ```
- Run and go to [http://localhost:3000](http://localhost:3000) to see it
    ```
    npm run site
    ```    
- The site output is located at */dist* folder  
- Go to */src/js/website-generator* and edit or add your own react components.

## How to pass general website data to react components?

Use */data/data.json* file, every component has access to its content via *props*. For example *websiteName* property defined in */data/data.json* can be accesses as *this.props.websiteName* in react components. 

## Where to add CSS?

- It's located at */src/css*
- The output file is */dist/css/styles.min.css* and it's already minified using [UglifyCSS](https://github.com/fmarcia/uglifycss)
- SASS preprocessor is used to handle CSS
- All CSS go through Autoprefixer to add vendor prefixes if needed

## Where to add client side JavaScript?

- It's located at */src/js/client*
- The output file is */dist/js/website.min.js* and it's already minified using UglifyJS.

## Where should I add my images and other assets?

- Any assets should be placed at */assets* folder
- They automatically copied to the destination folder */dist*

## License

The project is free for use under the [MIT license](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/jso-react-static-website · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._