{"id":15404007,"url":"https://github.com/r7kamura/katatema","last_synced_at":"2025-07-28T23:37:04.932Z","repository":{"id":57288679,"uuid":"73377299","full_name":"r7kamura/katatema","owner":"r7kamura","description":"A handy static site generator using React.js","archived":false,"fork":false,"pushed_at":"2017-04-24T15:58:54.000Z","size":480,"stargazers_count":95,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T03:47:11.633Z","etag":null,"topics":["react","scss","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/r7kamura.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-10T11:50:17.000Z","updated_at":"2020-09-23T04:03:45.000Z","dependencies_parsed_at":"2022-09-15T19:41:08.207Z","dependency_job_id":null,"html_url":"https://github.com/r7kamura/katatema","commit_stats":null,"previous_names":["r7kamura/modan"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r7kamura%2Fkatatema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r7kamura%2Fkatatema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r7kamura%2Fkatatema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r7kamura%2Fkatatema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r7kamura","download_url":"https://codeload.github.com/r7kamura/katatema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248621794,"owners_count":21134914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","scss","webpack"],"created_at":"2024-10-01T16:11:04.734Z","updated_at":"2025-04-15T16:34:42.286Z","avatar_url":"https://github.com/r7kamura.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# katatema\n\n[![npm](https://img.shields.io/npm/v/katatema.svg)](https://www.npmjs.com/package/katatema)\n[![CircleCI](https://img.shields.io/circleci/project/github/r7kamura/katatema.svg)](https://circleci.com/gh/r7kamura/katatema)\n\nA handy static site generator using React.js.\n\n- Minimal setup\n- Intuitive templating\n- Hot reloading\n- SCSS support\n- Head support\n\n## Usage\n\n### Minimal setup\n\nTo start using it, run this inside a new directory:\n\n```bash\nnpm install katatema --save\nmkdir pages\n```\n\nWrite `./pages/index.js` as your 1st page:\n\n```javascript\nimport React from \"react\";\nexport default () =\u003e \u003cdiv\u003eHello!\u003c/div\u003e\n```\n\nAdd a script to `package.json` like this:\n\n```json\n{\n  \"scripts\": {\n    \"serve\": \"katatema serve\"\n  }\n}\n```\n\nRun it and open the preview server on [http://localhost:3000](http://localhost:3000):\n\n```bash\nnpm run serve\n```\n\n![image](/images/screenshot-serve.png)\n\nThat's all. No time-consuming configuration required. (e.g. .babelrc, webpack.config.js, gulpfile.js...)\n\n### Intuitive templating\n\nWe build sites like it's 1990s, or like PHP in those good old days.\nFiles are translated into HTML pages by using the filesystem as an API.\nAdd a JavaScript file at `./pages/index.js` and it'll be converted to `./docs/index.html`.\n\n```\n./pages/index.js  ---converted---\u003e  ./docs/index.html\n./pages/about.js  ---converted---\u003e  ./docs/about.html\n./pages/usage.js  ---converted---\u003e  ./docs/usage.html\n```\n\nTo build HTML files, add a script to `package.json` like this:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"katatema build\"\n  }\n}\n```\n\nAnd then just run it.\n\n```bash\nnpm run build\n```\n\n### Hot reloading\n\nAll pages will automatically refreshed without page reloading on the preview server.\nThis is powered by webpack's Hot Module Replacement feature in the background.\nDramatically speed development.\n\n![demo](/images/demo.gif)\n\n### SCSS support\n\nWe officially support [Sass](http://sass-lang.com/) to style pages.\nImport `*.scss` file as a React component, then embed it.\n\n```javascript\nimport React from \"react\";\nimport Style from \"./main.scss\";\nexport default () =\u003e (\n  \u003cdiv className=\"foo\"\u003e\n    \u003cStyle/\u003e\n    \u003ch1 className=\"bar\"\u003eHello\u003c/h1\u003e\n  \u003c/div\u003e\n)\n```\n\n```scss\n.foo {\n  background-color: red;\n}\n.bar {\n  color: white;\n}\n```\n\n```html\n\u003cstyle\u003e\n  .foo {\n    background-color: red;\n  }\n  .bar {\n    color: white;\n  }\n\u003c/style\u003e\n\u003cdiv class=\"foo\"\u003e\n  \u003ch1 class=\"bar\"\u003eHello\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n### Head support\n\nUse our `\u003cHead\u003e` component to append elements to the `\u003chead\u003e` of the page.\n\n```javascript\nimport Head from \"katatema/head\";\nimport React from \"react\";\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cHead\u003e\n      \u003ctitle\u003eHello\u003c/title\u003e\n    \u003c/Head\u003e\n    \u003cp\u003eHello\u003c/p\u003e\n  \u003c/div\u003e\n)\n```\n\n## FAQ\n\n\u003cdetails\u003e\n\n\u003csummary\u003eHow to deploy to GitHub Pages?\u003c/summary\u003e\n\n`gh-pages` command line utility helps you deploy your site to GitHub Pages.\n\n```bash\nnpm install gh-pages --save-dev\n```\n\nWhen using `gh-pages`, your `package.json` looks like this:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"katatema build\",\n    \"serve\": \"katatema serve\",\n    \"deploy\": \"npm run build \u0026\u0026 gh-pages --dist docs\"\n  }\n}\n```\n\nThen you can simply invoke `npm run deploy` to deploy.\n\n```\nCloning git@github.com:username/repo.git into node_modules/gh-pages/.cache\nCleaning\nFetching origin\nChecking out origin/gh-pages\nRemoving files\nCopying files\nAdding all\nCommitting\nPushing\nPublished\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eWhat is this inspired by?\u003c/summary\u003e\n\n- [PHP](https://github.com/php/php-src)\n- [next.js](https://github.com/zeit/next.js)\n- [gatsuby](https://github.com/gatsbyjs/gatsby)\n- [sitespec](https://github.com/r7kamura/sitespec)\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr7kamura%2Fkatatema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr7kamura%2Fkatatema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr7kamura%2Fkatatema/lists"}