TypeScript Static Site Generator

Open-source TypeScript projects categorized as Static Site Generator | Edit details
Related topics: #Markdown #TypeScript #static-site #SSR #Ssg

Top 21 TypeScript Static Site Generator Projects

  • stencil

    A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

    Project mention: By Crayons and For Crayons | dev.to | 2022-05-13

    The app is built using vanilla Web Components without using any component publishing libraries like Stencil, Lit and so on. The reason being I met with some roadblocks in building a drag-n-drop editor using these libraries. Actually the Crayons Team itself is using Stencil to build the Crayons components using TypeScript and React-like component semantics and finally publish them as platform native Web components and React wrappers for the same. You can find out more about this in the Stencil documentation.

  • actions-gh-pages

    GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.

    Project mention: Preview Pull Requests and Automated CI/CD | dev.to | 2021-12-08

    My first workflow is to build and deploy or preview Client, It runs whenever a push or pull request creates for main branch containing changes to the code of client. It install dependencies and builds vue.js app. After build I use peaceiris/actions-gh-pages to deploy it to Github Pages. If the event is Pull Request then deploy to a sub-directory named preview and commit hash and leave a comment on PR.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • Next-js-Boilerplate

    🚀 Boilerplate and Starter for Next.js 12+, Tailwind CSS 3 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS

    Project mention: Just tried the official Jest plugin from Next.js 12.1 works perfectly with VSCode extension for Jest with immediate test feedback, inline code coverage, problem inspector, etc. directly inside VSCode. Writing tests is now much easier and enjoyable. Configuration in the comments. | reddit.com/r/nextjs | 2022-05-03

    You can find the whole configuration on my Boilerplate hosted on GitHub: https://github.com/ixartz/Next-js-Boilerplate

  • elderjs

    Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.

    Project mention: Should I go further with Svelte or just migrate to Sveltekit | reddit.com/r/sveltejs | 2022-01-25

    I like SvelteKit and am using it on projects, but this looked interesting too https://elderguide.com/tech/elderjs/

  • microsite

    Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.

    Project mention: Next.js 11 | news.ycombinator.com | 2021-06-15

  • vscode-front-matter

    Front Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...

    Project mention: What are the weirdest CMS you've seen used to host content? | reddit.com/r/web_design | 2022-05-12

    As it turns out VSCode can be insanely powerful if one sets it up carefully. The Front Matter extension can be enough in itself to manage a blog. The power tools extension can do useful stuff, like it can copy the formatted path of a changed image to clipboard which allows the client to just copy an image to a folder and press ctrl+v anywhere in a markdown file to paste the image there in markdown format. VSCode snippets in tandem with svelte components can do complex and easily usable stuff, and of course there can be simple buttons in vs code for example to build the static site and deploy it to their server.

  • lume

    🔥 Static site generator for Deno 🦕 (by lumeland)

    Project mention: Lume, which is the simplest static site generator for Deno | dev.to | 2022-01-12

    $ mkdir lume-example $ cd lume-example $ lume init Use Typescript for the configuration file? [y/N] y How do you want to import lume? Type a number: 1 import lume from "lume/mod.ts" 2 import lume from "https://deno.land/x/lume/mod.ts" 3 import lume from "https:/deno.land/x/[email protected]/mod.ts" [1] Do you want to import plugins? Type the plugins you want to use separated by comma. All available options: - attributes https://lumeland.github.io/plugins/attributes/ - base_path https://lumeland.github.io/plugins/base_path/ - bundler https://lumeland.github.io/plugins/bundler/ - code_highlight https://lumeland.github.io/plugins/code_highlight/ - date https://lumeland.github.io/plugins/date/ - eta https://lumeland.github.io/plugins/eta/ - inline https://lumeland.github.io/plugins/inline/ - jsx https://lumeland.github.io/plugins/jsx/ - liquid https://lumeland.github.io/plugins/liquid/ - modify_urls https://lumeland.github.io/plugins/modify_urls/ - on_demand https://lumeland.github.io/plugins/on_demand/ - postcss https://lumeland.github.io/plugins/postcss/ - pug https://lumeland.github.io/plugins/pug/ - relative_urls https://lumeland.github.io/plugins/relative_urls/ - resolve_urls https://lumeland.github.io/plugins/resolve_urls/ - slugify_urls https://lumeland.github.io/plugins/slugify_urls/ - svgo https://lumeland.github.io/plugins/svgo/ - terser https://lumeland.github.io/plugins/terser/ Example: postcss, terser, base_path Created a config file _config.ts Do you want to configure VS Code? [y/N] y VS Code configured

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • notablog

    Tell stories of your work with Notion

    Project mention: Ask HN: Where to Blog? | news.ycombinator.com | 2021-12-29

    I currently use Notablog https://github.com/dragonman225/notablog to write in Notion and publish it as a static site on Github pages.

  • log4brains

    ✍️ Log and publish your architecture decisions (ADR)

    Project mention: Can't bring myself to produce code any more, any ideas to help? | reddit.com/r/ExperiencedDevs | 2021-05-31

    I'm a solution architect in my current job, and I love it because I still get to solve technical problems and help/mentor more junior developers but I don't really write code anymore (except on minor occasions and it's mostly by choice). The tradeoff is I have to write docs and make presentations, but I learned how to do that easily enough.

  • Next-js-Blog-Boilerplate

    🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs 12, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS 3.

    Project mention: Made a Free and Open Source Minimalist Blog Template using React, Next.js, TypeScript and Tailwind CSS. Live demo and GitHub repo in the comments | reddit.com/r/reactjs | 2022-02-01

    Next JS Blog Template GitHub

  • API-Portal

    API Portal lets you create and publish a customized site with API documentation, for free and without writing any code.

  • crisp-react

    React boilerplate written in TypeScript with a variety of Jamstack and full stack deployments. Comes with SSR and without need to learn a framework. Helps to split a monolithic React app into multiple SPAs and avoid vendor lock-in.

    Project mention: Best way to create Express websites | reddit.com/r/node | 2022-04-29

    If TypeScript doesn't put you off (it's really a good choice for both backend and frontend), have a look at Crisp React.

  • scaffold-static

    Scaffolding utility for vanilla-js

  • t3mpl-editor

    Generic editor and static site generator in browser.

    Project mention: T3MPL - Have you seen Jekyll clone with web editor? It requires web browser only. Command line is supported too. | reddit.com/r/Jekyll | 2021-12-11

  • avantation

    Build OpenAPI3.0 specification from HAR.

  • prpl

    A lightweight library for building fast static sites

    Project mention: Show HN: A static site generator built for longevity | news.ycombinator.com | 2021-08-28

    Hey thanks! Can definitely empathize with the imposter syndrome, it's a tough hurdle to clear.

    For the templating system I decided to also add an option to define your own if you don't like the [] syntax (https://prpl.dev/api#options). Figured since the system is regex-based instead of AST-based there's no reason not to expose it as an option to users.

    For the metadata I implemented a basic parser. Here's a link to that part of the source code, it's not the most efficient nor does it cover all the edge cases, but it's simple enough it can be easily updated (https://github.com/tyhopp/prpl/blob/master/packages/core/src...).

    Good luck and hope I can see your system on HN someday too!

  • single-page-markdown-website

    :hot_pepper: Create a nice single-page documentation website from one or more Markdown files

    Project mention: A Submarine's Weakness: Its Software? | news.ycombinator.com | 2021-12-07

    how do you see this?? i'm a newbie to web development and selected https://github.com/yuanqing/single-page-markdown-website for something clean and minimal in design.

    but those are crazy stats! what would you suggest for newbies like me?

  • purplehaze

    Purple haze is a TypeScript, Markdown, JS generative bundler that works in headless browser (by aexol-studio)

    Project mention: Useful antipattern - React useImperativeRef hook | reddit.com/r/reactjs | 2022-03-01

    Just use it for fun right now :). Elm is super type-safe and even forces you to handle all the possible exceptions. There are also many libraries providing generative content - so they generate new files like "Routes" "Static Assets defs" on every save while you code. I find it super useful and want to experiment with Elm patterns in TypeScript. https://github.com/aexol-studio/purplehaze I want to also add the possibility to use '.elm' files in TypeScript somehow using generative approach

  • neanderthal

    A static hypertext generator for your blog or website. (by MH15)

    Project mention: A static hypertext generator for your blog or website | news.ycombinator.com | 2021-10-08

  • habanero-bee

    Habanero Bee is a simple AMP-compliant CMS system that makes it easy to create content using Google Sheets.

  • armonia-vite

    Almost bare-metal plugin for multiplatform development in vite, it's even faster.

    Project mention: How to set up Vite and Electron from scratch, with any frontend framework | dev.to | 2022-04-17

    Head over github.com/armoniacore/armonia-vite

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-05-13.

TypeScript Static Site Generator related posts

Index

What are some of the best open-source Static Site Generator projects in TypeScript? This list will help you:

Project Stars
1 stencil 10,691
2 actions-gh-pages 3,061
3 Next-js-Boilerplate 1,890
4 elderjs 1,871
5 microsite 844
6 vscode-front-matter 707
7 lume 511
8 notablog 442
9 log4brains 437
10 Next-js-Blog-Boilerplate 424
11 API-Portal 146
12 crisp-react 140
13 scaffold-static 114
14 t3mpl-editor 105
15 avantation 47
16 prpl 45
17 single-page-markdown-website 18
18 purplehaze 5
19 neanderthal 4
20 habanero-bee 3
21 armonia-vite 2
Find remote jobs at our new job board 99remotejobs.com. There are 12 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.

Sponsored
Less time debugging, more time building
Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
scoutapm.com