{"id":24319528,"url":"https://github.com/ryym/calmly","last_synced_at":"2026-04-22T19:34:20.471Z","repository":{"id":57193222,"uuid":"205554263","full_name":"ryym/calmly","owner":"ryym","description":"[WIP] Static site generator that uses React only at the build time","archived":false,"fork":false,"pushed_at":"2020-06-01T13:15:17.000Z","size":1070,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-02T15:56:34.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/ryym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-31T14:24:00.000Z","updated_at":"2020-06-01T13:15:19.000Z","dependencies_parsed_at":"2022-09-01T03:40:25.305Z","dependency_job_id":null,"html_url":"https://github.com/ryym/calmly","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ryym/calmly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryym%2Fcalmly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryym%2Fcalmly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryym%2Fcalmly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryym%2Fcalmly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryym","download_url":"https://codeload.github.com/ryym/calmly/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryym%2Fcalmly/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32152599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T17:06:48.269Z","status":"ssl_error","status_checked_at":"2026-04-22T17:06:19.037Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-01-17T15:33:39.465Z","updated_at":"2026-04-22T19:34:20.447Z","avatar_url":"https://github.com/ryym.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calmly\n\n_Build a website with React, Run it without React_\n\n## About\n\n[react]: https://reactjs.org/\n\nCalmly is a static website generator for [React][react].\nYou can use React to construct web pages and Calmly generate static HTML files from that.\nThe difference with similar tools is that the generated HTML does NOT load JavaScript code by default, including React.\n\nIn other words, **Calmly runs React only at the build time**.\n\n1. Write a component.\n\n   ```javascript\n   export const IndexPage = () =\u003e {\n     const name = 'world';\n     return \u003ch1\u003eHello, {name}!\u003c/h1\u003e;\n   };\n   ```\n\n2. Generate a static markup.\n\n   ```html\n   \u003ch1\u003eHello, world!\u003c/h1\u003e\n   \u003c!-- By default, no JavaScript code is included. --\u003e\n   ```\n\n3. Serve the generated assets!\n\n## Features\n\n- Construct your website based on React components.\n- Generate static HTML files without emitting client side JavaScript code.\n\nThus Calmly is suited for a website where 95% of the pages don't require JavaScript.\n\nAdditionally, you can also attach some client side JavaScript to your components as needed.\nWe know it is not practical nowadays to omit JavaScript completely.\n\n### Wait, why is React necessary for static site in the first place?\n\nThis is a natural question.\nIf you want to create a static website but don't want to use React at runtime,\nwhy don't you just write HTML directly or use some other template engines?\nWithout client side rendering, React cannot provide its killer features such as declarative UI updates based on virtual DOM diffing, powerful state/effect management by React Hooks, etc.\n\nBut we think React still shines even if it loses these functionalities, in the server side. Because:\n\n- It encourages you to mark up HTML as a composition of reusable components. This greatly helps you keep your code base maintainable.\n- You can depend on various Node.js ecosystem because JSX is just a JavaScript code.\n- It works well with TypeScript that makes daily coding very comfortable thanks to helpful compiler assists.\n\nAnd these features still function in the server side. That's why we want to use React just for building web pages.\n\n### How about Gatsby or React Static?\n\n[gatsby]: https://www.gatsbyjs.org/\n[react-static]: https://github.com/react-static/react-static\n\n[Gatsby][gatsby] and [React Static][react-static] are soooo nice tool to build a static site!\nRecently I built some websites using Gatsby and it was so much fun!\nBut they load React on the client side in any page, to provide some client side features like SPA.\nHowever, not all websites require such a rich and dynamic content.\nsome websites mostly consist of static pages.\nFor those sites, loading bunch of JavaScript code including React would be less meaningful,\nsince its content hardly change after their initial renders.\n\nThis is where Camly fits in.\nUsing Calmly you can generate JavaScript-free web pages with React,\nwhile you can bundle a few client side JavaScript code per component as well only if necessary.\n\n## How to use\n\nTODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryym%2Fcalmly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryym%2Fcalmly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryym%2Fcalmly/lists"}