Bring your data

CMSs

Any Headless CMS, Contentful, WordPress, Drupal, Sanity.io, etc.

Data

Any APIs, Databases, AirTable, YAML, CSV, JSON, etc.

Markdown

Any Git-based CMS, Forestry, Netlify CMS, Blogs, Documentation.

Build

Powered by

GraphQL

  • HTML
  • Vue.js
  • CSS

Easy, local development

Build websites with modern tools like

Vue.js, GraphQL & all the power of Node.js & the JavaScript ecosystem. Develop locally and get instant hot-reloading for any code change.

Fast by default

Gridsome builds ultra performance into every page by using the PRPL pattern. You get code splitting, asset optimization, progressive images, and link prefetching out of the box. Gridsome sites get almost perfect page speed scores by default.

PWA-ready

Gridsome generates static PWAs. Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline.

Build on the JAMstack

The future of the web is JavaScript, APIs, and Markup – the JAMstack. Gridsome uses the power of blazing fast static site generation, JavaScript and APIs to create stunning modern web experiences.

Simple, safe deployment

No servers. No databases. Only files. Deploy your entire site to a CDN and forget about it. A Gridsome site can handle thousands to millions of hits without breaking – and no expensive server costs.

SEO-friendly

Gridsome sites loads as static HTML before it hydrates into a fully Vue.js-powered SPA. This makes it possible for search engines able to crawl content and give better SEO ranking, and still have all the power of Vue.js.

Connect the modern web

The modern web is decoupled and modular. Gridsome makes it painlessly easy to build JAMstack websites using data from multiple sources such as Content API’s, Headless CMSs, and other web services.

Browse Gridsome Plugins

The Modern Web Logos

A better way to build websites & apps

Gridsome makes it simple & fast to build modern websites for any data source.

<template>
  <Layout>
  	<h1>My blogh1>
   	<div v-for="{ node } in $page.allPost.edges" :key="node.id">
      <h3>{{ node.title }}h3>
   	  <g-link :to="node.path">Read moreg-link>
   	div>
  Layout>
template>


<page-query>
query {
  allPost {
    edges {
      node {
      	id
        title
        path
      }
    }
  }
}
page-query>


Get started

Latest from Gridsome blog


Read more

How to integrate Infinite Loading with Gridsome

Infinite loading is an alternative strategy for loading additional nodes/content onto a page without the use of traditional pagination. Infinite loading instead loads the next batch of content when a user scrolls to the bottom of a web page.


Posted 8. October 2019 by
Cody BarrCody Barr3 min read


Read more

Gridsome v0.7

Version 0.7 is finally here! Enjoy Vue Components in Markdown, new Schema API, File-based dynamic routing, better Template config, Custom App.vue, Shareable Network URL and more!


Posted 17. September 2019 by
Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik7 min read


Read more

Gridsome v0.6

Gridsome 0.6 introduces a Pages API that gives you full control of page creation. It also has an API that lets you fetch internal pages into other pages and components. This is perfect for lightboxes or «Click for more» pagination etc. 0.6 also improves build times and has a smaller core JS bundle size!


Posted 10. May 2019 by
Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik3 min read


Read more

Gridsome v0.5

We’re really excited to release Gridsome 0.5. The biggest update yet. It has many important features that make data handling easier and a lot more flexible. It opens up a whole new world of what you can build with Gridsome. Easily build Taxonomy pages and connections for any data.


Posted 19. February 2019 by
Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik3 min read


Read more

Say hello to Gridsome ???

A new static site generator baby is born. It’s highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!


Posted 10. October 2018 by
Tommy VedvikTommy Vedvik3 min read

? Stay in the loop. Subscribe to Gridsome newsletter!

Performance Matters

coleslaw:-static-site-generator-in-common-lisp

Build Status
Quicklisp

coleslaw logo

Czeslaw Milosz was the writer-in-residence at UNC c. 1992.
I used to see him all the time at the Hardback Cafe, always sitting at a two-top
drinking coffee, reading, writing, eating chips and salsa. I remember a gentleness
behind the enormous bushy eyebrows and that we called him Coleslaw. – anon

Coleslaw is Flexible Lisp Blogware similar to Frog, Jekyll, or Hakyll.

Have questions?

Features

  • Git for storage

  • RSS and Atom feeds

  • Markdown Support with Code Highlighting provided by colorize

    • Currently supports: Common Lisp, Emacs Lisp, Scheme, C, C , Java, Python, Erlang, Haskell, Obj-C, Diff.
  • A Plugin API and plugins for…

Example Sites

See the wiki for a list of coleslaw-powered blogs.

Hacking

A core goal of coleslaw is to be both pleasant to read and easy to
hack on and extend. If you want to understand the internals and bend
coleslaw to do new and interesting things, I strongly encourage you
to read the Hacker’s Guide to Coleslaw. You’ll find some
current TODO items towards the bottom.

Installation

Coleslaw should run on any conforming Common Lisp implementation but
testing is primarily done on SBCL and
CCL.

Coleslaw can either be run manually on a local machine or
triggered automatically on git push to a server. If you want a
server install, run these commands on your server after setting up a
git bare repo.
Otherwise, run the commands on your local machine.

  1. Install a Common Lisp implementation (we recommend SBCL) and
    Quicklisp.
  2. Place a config file for coleslaw in your $HOME directory. If you
    want to run multiple blogs with coleslaw, you can keep each blog’s
    config file in that blog’s repo. Feel free to copy and edit the
    example config or consult the config docs
    to create one from scratch.
  3. This step depends on whether you’re setting up a local or server install.
    • Server Install: Copy and chmod x the
      example post-receive hook to your blog’s bare repo.
    • Local Install: Just run the following commands in the
      REPL whenever you’re ready to regenerate your blog:

      (ql:quickload :coleslaw)
      (coleslaw:main "http://www.webdesignernews.com/path/to/my/blog/")
      
  4. Optionally, point the web server of your liking at your config-specified
    :deploy-dir. Or “deploy-dir/.curr” if the versioned plugin is enabled.
  5. If you use Emacs, consider installing
    coleslaw-mode to author your
    posts.

Now just write posts, git commit and build by hand or by push.

The Content Format

Coleslaw expects content to have a file extension matching the class
of the content. (I.e. .post for blog posts, .page for static
pages, etc.)

There should also be a metadata header on all files
starting and ending with the config-specified :separator, “;;;;;” by
default. Example:

;;;;;
title: foo
tags: bar, baz
date: yyyy-mm-dd hh:mm:ss
format: html (for raw html) or md (for markdown)
excerpt: Can also be extracted from content (see :excerpt-sep config param)
;;;;;
your post

Posts require the title: and format: fields.
Pages require the title: and url: fields.

To omit a field, simply do not have the line present, empty lines and
fields (e.g. “tags:” followed by whitespace) will be ignored.

Theming

Two themes are provided: hyde, the default, and readable (based on
bootswatch readable).

A guide to creating themes for coleslaw lives
here.

a-comparison-of-static-form-providers

Let’s attempt to coin a term here: “Static Form Provider.” You bring your HTML

, but don’t worry about the back-end processing that makes it work. There are a lot of these services out there!

Static Form Providers do all tasks like validating, storing, sending notifications, and integrating with other APIs. It’s lovely when you can delegate big responsibilities like this. The cost? Typically a monthly or annual subscription, except for a few providers and limited plans. The cost is usually less than fancier “form builders” that help you build the form itself and process it.

In this article, we are going to review some of the most popular static form providers:

Before moving forward, just a note that the information for these comparisons came from visiting the site for each product and learning about the included features. Once I got all the information, I sent an email to each provider to confirm the list of features. Some of them confirmed, some didn’t. Special thanks to Kwes, FormKeep, Formspree, FormSubmit, formX, and Netlify Forms teams for confirming.

Form building components and validation

Name Custom Components Front-End Validation Back-End Validation
Kwes
Basin
FieldGoal Unable to confirm Unable to confirm Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

Components for building a form are HTML input elements, like text inputs, textareas, checkboxes, and radio buttons. When using a static form, most providers require adding custom HTML attributes. By providing the custom URL in the form action attribute, the form gets submitted on the provider’s side where it gets stored.

If you are looking for a form builder, FormKeep has a form designer feature. That means you embed custom HTML and JavaScript files in the page, and you get a styled form. Otherwise, you have to style the form by yourself.

If you need custom components, like a date picker or card inputs, Kwes and FormKeep are the only providers with this feature. If you want to validate input fields in the browser, you might use third-party libraries or writing your code which means adding additional JavaScript code to the site. Kwes is the only provider that supports front-end validation based on the rules you set in each input component. To enable this feature, you should include additional JavaScript file, which you might do nevertheless. Other static form providers rely only on HTML5 validation.

Kwes is the only provider with back-end validation, too. The rules you set in the front end are passed to the back end side. In case when front-end validation fails, you are safe, the backend validation would work. Other providers don’t have this feature; they rely only on spam protection.

Spam protection

Name Spam Protection
Kwes Artificial intelligence


Automatic Honeypot


Blacklists


Proprietary technology
Basin Akismet


CleanTalk


reCAPTCHA


Honeypot
FieldGoal Provided, but unable to confirm what powers it
FormCarry Akismet


reCAPTCHA
FormKeep Provided, but unable to confirm what powers it
Formspree reCaptcha


Profanity filter


Automated classification
FormSubmit reCaptcha


Honeypot
formX Provided, but unable to confirm what powers it
Getform Akismet


reCAPTCHA
Netlify Forms Akismet


reCAPTCHA


Honeypot

Kwes advertises a 99.6% spam block success rate with no setup required.

Once your form is ready for submissions, you might find it hard to deal with spam. That’s why spam protection is essential, especially if you want to keep your sanity and serenity. All providers provide spam protection in this way or another. Some rely on Google reCAPTCHA or Akismet, some on Honeypot techniques, and some use artificial intelligence to get the job done. It is worth noting that adding an additional step to your form, like adding reCAPTCHA might affect the conversion rates on form submissions.

Email notifications

Name Confirmations Notifications Email Routing Logic
Kwes
Basin
FieldGoal Unable to confirm Unable to confirm Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

Email confirmations are essential if you want to provide a fast response to your users. With a contact form, for example, you want to get an email for every new submission. That way, you’re able to respond to the submission quickly and efficiently.

All providers, except FieldGoal, have confirmation, notification, and email routing logic features. You could set up an email form element which would be used to send an email automatically to the user with confirmation about the submission.

Some providers have other sorts of notifications besides email, like push notifications or Slack messages, which might be handy.

White labeling

Name White Label
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

When communicating via email notifications with your clients, you might want to use your brand and style. It creates better awareness and that way you familiarize your clients with your product. All providers offer this feature, with the exception of FieldGoal, which I was unable to confirm (although it might be under paid plans).

Custom redirects

Name Custom Redirects
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

Once you have captured a response from your user, you may want to let the user continue using your site. Also, you might want to communicate to the user that the submission was received. This feature is called “custom redirect,” and every provider has this feature (with another exception for FieldGoal because I was unable to confirm). Note that this feature might not be available in a free plan and require a paid or upgraded account.

Upload storage

Name Upload Storage
Kwes 200MB per file

20GB storage
Basin 100MB per submission
FieldGoal Amazon S3
FormCarry 5MB per file

5GB storage
FormKeep Included, but unconfirmed storage amounts
Formspree 10MB per file

10GB storage
FormSubmit Included, but unconfirmed storage amounts
formX
Getform 25MB per submission

25GB storage
Netlify Forms 1GB storage

Not every static form provider provides file storage. For example, formX doesn’t provide it at all. In most cases, this feature is available under paid plans. You might want to invest additional time to find out which provider offers the best service for you. Be sure to look specifically at single file size and form submission size limitations.

Data export

Name Data Export
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

Data export is important feature if you want to use it for analysis or for import to third-party software. Most providers offers CSV and JSON exports, which are the most commonly used ones.

API access

Name API Access
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX On demand
Getform
Netlify Forms

If you want to control your data submissions by building custom application or script, you might benefit from having API access. Most providers have this feature, except Getform. formX offers it, but only on demand.

Webhooks/Zapier

Name Webhooks Zapier
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

When building a custom application or a script is out of budget, you might want to use webhooks to integrate data submissions with third-party software. Zapier is one of the most commonly used services for this, and only FormSubmit doesn’t support it (though it does support webhooks).

Analytics

Name Analytics
Kwes
Basin
FieldGoal Unable to confirm
FormCarry
FormKeep
Formspree
FormSubmit
formX
Getform
Netlify Forms

Analytics for static forms is a neat feature that could offer beneficial insight into how your form is performing. It may help you understand how your users interact with it, and you may spot ways to improve the form submission experience as a result. This feature is the least supported of all other features. Only Basin, FormKeep, and formX provide it.

Plan comparison

Name Plan 1 Plan 2 Plan 3 Plan 4
Kwes Free Tier

$0/mo.

Build spam-protected, and validated forms quicker than ever.

1 Website

Unlimited Forms

50 Spam Blocks

Bronze Tier

$9/mo.

Unlimited spam blocks, more form tools, and submissions.

1 Website

Unlimited Forms

Unlimited Spam Blocks
Silver Tier

$29/mo.

Build more powerful forms with integrations and webhooks.

3 Websites

Unlimited Forms

Unlimited Spam Blocks

4 Users
Gold Tier

$79/mo.

Enjoy more team members and everything with increased limits.

10 Websites

Unlimited Forms

Unlimited Spam Blocks

11 Users
Basin Standard Tier

$4.17/mo. (billed annually)
Premium Tier

$12.50/mo. (billed annually)
FieldGoal Single Tier

1 form

$5/mo.
Freelancer Tier

5 forms

$15/mo.
Studio Tier

15 forms

$39/mo.
Agency Tier

50 forms

$79/mo.
FormCarry Baby Tier

Free
Basic Tier

$15/mo.
Growth Tier

$40/mo.
FormKeep Starter Tier

$4.99/mo.
Starter Pack

$7.50 per form per month
Freelancer Tier

$5.90 per form per month
Formspree Free Tier

$0/mo.
Gold Tier

$10/mo.
Platform Tier

$40/mo.
FormSubmit Unlimited
formX Free Tier

$0/mo.

100 submissions max.
Starter Tier

$4.99/mo.
SMBs & Freelancers

$49.99/mo.
Business & Agencies

$99.99/mo.
Getform Free Tier

$0/mo.
Basic Tier

Perfect for small businesses

$7.5/mo.

$90 per year
Agency Tier

$24/mo.

$290 annually
Enterprise Tier

$57.5/mo.

$690 annually
Netlify Forms Level 0

$0

100 submissions/mo.

10MB uploads/mo.
Level 1

$19/mo. per site

1,000 submissions/mo.

1GB uploads/mo.
Level 2

Custom pricing and limits

Static form providers have different plans, from entirely free plans and trials, to enterprise plans for every business need. Depending on a plan, you might have different features enabled. For example, FormSubmit is the only provider that offers all of its features for free, though it doesn’t support every feature we’ve covered here. You will want to invest some time to learn about which features that are most important for you and your product or business. Then go ahead and decide on which provider is most suitable for your needs.

Wrapping up

Having a form of any kind is a must-have for a large number of sites. When you use a static site generator, you might discover that static form providers make adding forms to a site almost trivial. By following a few rules for enabling static forms, you could benefit from essential features like spam protection and email notifications.

I have been using Kwes for a while now and I can honestly tell you it is a great product that fulfills all of my needs. It has smart spam protection, an easy-to-use dashboard, and impressive validation, both on the front end and back end.

Before choosing your static form providers, be sure to put down all requirements to the paper, and then find your perfect provider.

gopablo-–-static-site-generator

Dependencies

GoPablo a static site generator.

TL;DR

Install dependencies

npm install

Runs the app in the development mode

Build and open your browser to http://localhost:3000.

npm run dev

Linting JS & CSS

npm run lint

Builds distribution files for the app in production

npm run prod

Ready to deploy ?


Introduction

GoPablo is a static site generator with a modern development workflow, integrated web server, auto-reload, CSS preprocessors, and ES6 ready.

Features

? Includes
? Live Server
? Hot Reload & CSS Injection
Babel 7
? Express Server
? Code Minification
? Image Compression
? Templating & Partial HTML Injection
? PostCSS & Next Generation CSS
✂️ Cache-Busting
? Distribution Files

GoPablo requires Node v7.5 . This is the only global dependency. You can download Node here.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

File Structure

    ├── build/                   # Build files
    ├── dist/                    # Distribution files
    ├── src/                     # Source files
    │   ├── assets/              # Assets directory
    │       ├── css/             # CSS files
    │       ├── fonts/           # Fonts directory
    │       ├── img/             # Image directory
    │       ├── js/              # JavaScript files
    │   ├── etc/                 # Extra files
    │   ├── includes/            # HTML template partials
    │   ├── index.html           # Index page
    └── .babelrc                 # Babel configuration
    └── .gitignore               # Git ignored files
    └── .stylelintrc             # Stylelint configuration file
    └── gulpfile.js              # Gulp configuration
    └── LICENSE                  # License agreements
    └── package-lock.json        # Packages lock file
    └── package.json             # Node packages
    └── README.md                # You are reading this
    └── server.js                # Express server

To install GoPablo you need to clone the repository from GitHub:

git clone https://github.com/luangjokaj/gopablo
  • This will clone the repository on your local machine. Navigate to the newly created folder and install the dependencies:

INSTALL DEPENDENCIES

npm install

START WORKFLOW

  • We are ready to start our development server with the command:
npm run dev

Templating and HTML Partials

To avoid repetitive HTML code, GoPablo uses gulp-file-include. It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory:

src/includes/

For more information check out their documentation and examples: https://github.com/haoxins/gulp-file-include

New pages

To create new pages, simply create new .html files in the src/ directory.

Generate production files

To generate your distribution files run the command:

npm run prod

The files will be generated in the dist/ directory.

PostCSS

By default GoPablo supports PostCSS, a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. postcss-preset-env is installed by default. Read more about PostCSS here.

POSTCSS PLUGINS

GoPablo has two different sets of PostCSS plugins – one for the development environment (pluginsListDev) and one for the production task (pluginsListProd).

//--------------------------------------------------------------------------------------------------
/* -------------------------------------------------------------------------------------------------
PostCSS Plugins
 ------------------------------------------------------------------------------------------------- */
const pluginsDev = [
	postcssImport,
	postCSSMixins,
	postcssPresetEnv({
		stage: 0,
		features: {
			'nesting-rules': true,
			'color-mod-function': true,
			'custom-media': true,
		},
	}),
];
const pluginsProd = [
	postcssImport,
	postCSSMixins,
	postcssPresetEnv({
		stage: 0,
		features: {
			'nesting-rules': true,
			'color-mod-function': true,
			'custom-media': true,
		},
	}),
	require('cssnano')({
		preset: [
			'default',
			{
				discardComments: true,
			},
		],
	}),
];
//--------------------------------------------------------------------------------------------------

WRITING CSS

The starting point for CSS is the file:

src/assets/css/styles.css

Sass

GoPablo is super flexible. You can install Sass and use it as the main CSS preprocessor:

npm install gulp-sass --save-dev

Include Sass in gulpfile.js:

const sass = require('gulp-sass');

Change the gulp tasks stylesDev to:

function stylesDev() {
	return src('./src/assets/css/styles.scss')
		.pipe(sourcemaps.init())
		.pipe(sass().on("error", sass.logError))
		.pipe(sourcemaps.write('.'))
		.pipe(dest('./build/assets/css'))
		.pipe(browserSync.stream({ match: '**/*.css' }));
}

Also the watch task has to be changed in order to watch for .scss filetypes:

watch('./src/assets/css/**/*.scss', stylesDev);

Change the gulp tasks styleProd to:

function stylesProd() {
	return src('./src/assets/css/styles.scss')
		.pipe(sass().on("error", sass.logError))
		.pipe(dest('./dist/assets/css'))
}

Images

It is recommended to store image assets in the directory:

src/assets/img/

In the production build SVGs and other image assets will go through a minification process.

Fonts

Fonts are always special. Your fonts should be stored in:

src/assets/fonts/

Then you can include them in your CSS:

@font-face {
	font-family: 'Helvetica Neue Thin';
	src: url('./fonts/Helvetica-Neue-Thin.eot');
	src: url('./fonts/Helvetica-Neue-Thin.eot') format('eot'),
	url('./fonts/Helvetica-Neue-Thin.woff2') format('woff2'),
	url('./fonts/Helvetica-Neue-Thin.woff') format('woff'),
	url('./fonts/Helvetica-Neue-Thin.ttf') format('truetype'),
	url('./fonts/Helvetica-Neue-Thin.svg') format('svg');
}

GoPablo supports ES6 JavaScript with Babel. Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

Write ES6 JavaScript

Your JavaScript code should be located in:

src/assets/js/

GoPablo will watch for changes under the js directory and bundle the code in a single file, which will be included in the footer of the page as:

footer-bundle.js

Check the gulp configuration to learn more about how JavaScript is generated.

Including external JavaScript libraries is as simple as installing the npm script and including it in the gulpfile.js

/* -------------------------------------------------------------------------------------------------
Header & Footer JavaScript Boundles
-------------------------------------------------------------------------------------------------- */
const headerJS = [
	'./node_modules/jquery/dist/jquery.js',
	'./node_modules/nprogress/nprogress.js',
	'./node_modules/aos/dist/aos.js',
	'./node_modules/isotope-layout/dist/isotope.pkgd.js'
];
const footerJS = [
	'./src/assets/js/**'
];
//--------------------------------------------------------------------------------------------------

You can include the scripts in the head of the page before the DOM is loaded by placing them in the headerJS array or in the footer of the page after the DOM is loaded in the footerJS array. Only footer scripts are processed with Babel thus supporting ES6, however you can change this in the configuration if you want to run both header and footer scripts with Babel.

A build restart is required for changes to take effect.

GoPablo comes with its own set of code style rules:

.stylelintrc

Lint CSS

Before pushing changes make sure you have clean and consistent CSS. Run stylelint with the command:

npm run lint

There are a lot of possiblities and different ways to deploy your static website. The most traditional one being: generating your distribution files and uploading them manually, usually FTP.

Heroku

With the help of a simple Express server, with GoPablo we can deploy to heroku out of the box.

  1. Create Heroku application: heroku create.
  2. Push the branch to Heroku origins: git push heroku master

Automated Netlify deployments

Netlify is a great service that can be used to deploy generated websites. All you have to do is:

  1. Connect your GitHub repository.
  2. Choose Branch to deploy, usually: master.
  3. Set the Build command to: npm run prod.
  4. Set the Publish directory to: dist/.

We are live ?


v0.0.1

  • Meet GoPablo.

MIT