cuttlebelle - The react static site generator that separates editing and code concerns

  •        23

All static site generators I have used restrict you to use one layout per page. Todays webdesign needs have outgrown this and we often find ourself either adding code into our content pages (markdown files, liquid templates) or content into our code. That makes updating and maintaining a page hard, especially for a non-technical content author. I needed a generator that can separate content from code as cleanly as possible while still staying a static site generator and as dynamic as possible.

http://cuttlebelle.com
https://github.com/cuttlebelle/cuttlebelle

Dependencies:

babel-plugin-import-redirect : ^1.1.1
babel-plugin-syntax-dynamic-import : ^6.18.0
babel-plugin-transform-es2015-modules-commonjs : ^6.26.0
babel-plugin-transform-object-rest-spread : ^6.26.0
babel-plugin-transform-runtime : ^6.23.0
babel-preset-env : 1.6.1
babel-preset-react : ^6.24.1
babel-register : ^6.26.0
babel-runtime : ^6.26.0
browser-sync : ^2.23.2
del : ^3.0.0
fs-extra : ^5.0.0
js-yaml : ^3.10.0
marked : ^0.3.16
node-notifier : ^5.1.2
pretty : ^2.0.0
prop-types : ^15.6.0
react : ^16.2.0
react-docgen : ^2.20.0
react-dom : ^16.2.0
require-from-string : ^2.0.1
slugify : ^1.2.9
traverse : ^0.6.6
upath : ^1.0.2
window-size : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

Netlify CMS - A CMS for Static Site Generators

  •    Javascript

A CMS for static site generators. Give non-technical users a simple way to edit and add content to any site built with a static site generator.Netlify CMS is a single-page app that you pull into the /admin part of your site.

generator-jekyllized - A Yeoman generator for Jekyll to rapidly build sites using Gulp

  •    Javascript

generator-jekyllized is a very opinionated Yeoman generator built with Jekyll and gulp. You will be able to quickly scaffold your site and start developing. As you are working on your site your assets will automatically be updated and injected into your browser as well as your posts. When you are done developing and want to publish it you are two commands away from having everything optimized and published. While developing locally everything you change will automatically be updated and injected into your browser. Changing your SCSS or JavaScript files will automatically updated them, create sourcemaps and inject them. Writing or editing posts and pages for your website will do the same. Simple and effective.

vuegg - :hatching_chick: vue GUI generator

  •    Javascript

Scaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work and helps to achieve a rapid-prototyping workflow (... at least in theory). The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.

react-static - ⚛️ 🚀 A progressive static site generator for React.

  •    Javascript

A progressive static-site generator for React. React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It's been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience.


docpad - Empower your website frontends with layouts, meta-data, pre-processors (markdown, jade, coffeescript, etc

  •    CoffeeScript

Hi! I'm DocPad, I streamline the web development process and help close the gap between experts and beginners. I've been used in production by big and small companies for over a year and a half now to create plenty of amazing and powerful web sites and applications quicker than ever before. What makes me different is instead of being a box to cram yourself into and hold you back, I'm a freeway to what you want to accomplish, just getting out of your way and allowing you to create stuff quicker than ever before without limits. Leave the redundant stuff up to me, so you can focus on the awesome stuff.Discover my features below, or skip ahead to the installation instructions to get started with a fully functional pre-made website in a few minutes from reading this.

generator-flux-react - A yeoman generator for app based on Facebook's Flux/React architecture

  •    Javascript

It's an "Application Architecture for Building User Interfaces", built by the team at Facebook. It's a set of patterns building larger applications on top of the incredible React component library. You must have Node.js w/NPM installed. I recommend installing via homebrew, but you should be able to use the pre-built installers if you prefer.

staticsitegenerators-list - A comprehensive, partially automatically generated comparison of static site generators

  •    Javascript

Currently, this listing is only for projects that relate to Flat File Content Management Systems and/or Static Site Generators, but not for projects which relate only to Dynamic Servers (such as WordPress and Ghost).Entries are stored within the list.json file.

Hugo - A Fast and Flexible Static Site Generator built with love in GoLang

  •    Go

A Fast and Flexible Static Site Generator built with love by spf13 and friends in Go.Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website. Hugo is designed to work well for any kind of website including blogs, tumbles, and docs.

gutenberg - A fast static site generator in a single binary with everything built-in.

  •    Rust

A fast static site generator in a single binary with everything built-in. Documentation is available on its site or in the docs/content folder of the repository.

zola - A fast static site generator in a single binary with everything built-in.

  •    Rust

A fast static site generator in a single binary with everything built-in. Documentation is available on its site or in the docs/content folder of the repository and the community can use its forum.

generator-jekyllrb - Supercharge Jekyll development with Yeoman. Yo, Jekyllrb!

  •    Javascript

Generator-jekyllrb wraps the Jekyll static site generator in a Yeoman development workflow. Scaffold your site with Yo, manage front end packages with Bower, and automate development and build tasks with Grunt. Generator-jekyllrb is ideal for developing performant static sites and prototyping dynamic sites and apps (especially if the final version uses Yeoman too). It's also a great introduction to Yeoman if you're not familiar with JavaScript MV* frameworks.

dummy - A content generation toolkit for rapid web prototyping and QA

  •    PHP

Dummy is a content generation toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by making it easy to populate static HTML with dynamic content, and by randomizing elements within a layout on subsequent loads of a document, in a way, simulating connectivity to a live database. Originally conceived as a tool for helping to simulate the high volume, rapidly changing content characteristics of online newspapers and magazines, it's generalized enough to benefit the early stage front-end development of any website or application with content that frequently changes in length, form or nature.

quokka - Quokka is a small CMF (Content Management Framework) based on Flask, TinyDB or MongoDB and Pelican Themes

  •    Python

Quokka is a Content Management Framework written in Python. A lightweight framework to build CMS (Content Management System) as websites, portals, blogs, applications and anything related to publishing content to the web.

nextein - A static site generator with markdown + react for Next.js

  •    Javascript

nextein is a wrapper around next.js that allows you to write static sites using markdown and react. NodeJS v8.x+ is required to run nextein commands.

Gatsby - Blazing fast static site generator for React

  •    Javascript

Gatsby is a blazing fast static site generator for React. Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

design-system-starter-kit - Rapid prototyping environment using the Salesforce Lightning Design System

  •    HTML

Rapid prototyping environment using the Salesforce Lightning Design System, HTML, and Sass. From the prototyper to the large application developer… the Design System Starter Kit is a helpful tool to get started and run prototypes of all sizes in the browser.

Ponzu - Headless CMS with automatic JSON API

  •    Go

Ponzu is a powerful and efficient open-source HTTP server framework and CMS. It provides automatic, free, and secure HTTP/2 over TLS, a useful CMS and scaffolding to generate content editors, and a fast HTTP API on which to build modern applications.

redux-cli - An opinionated CLI for building redux/react apps quicker

  •    Javascript

There is an init subcommand for you to specify all paths to where components live in your project. The init command just creates a .blueprintrc in your project root. If you want to you can just create the .blueprintrc manually. Note on configuration: This project tries to walk on a fine line between convention and configuration. Since the majority of React applications will separate their smart/dumb components if you pass in those paths you'll get those generators for free. However, some of the other generators might not write files to the exact paths that you use for your project. It's easy to override the CLI generators with your own so that the generators will write files to the correct location. See: creating custom blueprints.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.