tsx-pack
Dead Simple Static Site Generator
Write your website in TSX files and convert them to static HTML files with CSS and JS dependencies optimally bundled inline
✨
Features - Write Type safe component templates with the power of Typescript and JSX
- Generates optimized pages with CSS & JS minified and inlined in HTML document to maximize the core web vital metrics of the page.
🚀
Getting Started bootstrap project by running the below command
npx degit MananTank/tsx-pack/templates/tsx my-website-name
cd my-website-name
npm i
Writing Components 🧑🏻💻
Components are just regular functions that return JSX Element.
If a component has a dependency on a JS or CSS file, it must be declared via useCSS
and useJS
hooks
import { useCSS, useJS } from 'tsx-pack'
type FooProps = {
foo: string
}
export function Foo(props: FooProps) {
useCSS('./blog.css')
useJS('./blog.js')
return <div> {props.foo} </div>
}
🎨
Rendering to HTML render the component with render
method, second argument is the relative path at which you would like to put the generated file. ( make sure that folders you specify in this path already exist)
<CSS />
and <JS />
components represent inlined CSS and JS collected by the tsx-pack
for the page.
import { render, CSS, JS } from 'tsx-pack'
import { Foo } from './components/Foo'
function FooPage() {
return (
<html>
<head>
<CSS />
<title> Foo </title>
</head>
<body>
<Foo />
<JS />
</body>
</html>
)
}
render(<FooPage />, '../../public/foo.html')
🛠
Development Working on a Page
If you are working on page/Home/index.tsx page, run this command
npm run dev src/pages/Home/index.tsx
With this, Everytime you make a change inside the src folder, foo.tsx
will run and generate the HTML file
Starting Live Dev Server
in a new instance of the terminal, run this command to have a live dev server that automatically reloads the page when you make a change in the source code
npm run dev-server
👷♂️ 🧰
Creating Production Build Build All Pages
make sure all the pages you want to generate are listed in the build.ts file.
Then run this command to generate all the files
npm run build-all
Build particular page
If you only want to build a particular page - pages/Home/index.tsx
for example, use this command:
npm run build src/pages/Home/index.tsx