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.
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>
Latest from Gridsome blog
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 Barr – 3 min read
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 Vedvik and
Tommy Vedvik – 7 min read
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 Vedvik and
Tommy Vedvik – 3 min read
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 Vedvik and
Tommy Vedvik – 3 min read
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 Vedvik – 3 min read
? Stay in the loop. Subscribe to Gridsome newsletter!

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?
- IRC in #coleslaw on Freenode!
- Subscribe to the mailing list coleslaw@common-lisp.net.
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…
- Static Pages
- Sitemap generation
- Incremental builds
- Analytics via Google or Piwik
- Comments via Disqus or isso
- Hosting via Github Pages or Amazon S3
- Embedding gfycats
- Tweeting about new posts
- Using LaTeX via Mathjax
- Writing posts in ReStructured Text
- Importing posts from WordPress
- Code Highlighting via Pygments instead of colorize
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.
- Install a Common Lisp implementation (we recommend SBCL) and
Quicklisp. - 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. - 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/")
- Server Install: Copy and
- Optionally, point the web server of your liking at your config-specified
:deploy-dir
. Or “deploy-dir/.curr” if theversioned
plugin is enabled. - 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.

GoPablo a static site generator.
- Introduction
- 1. Installing Node
- 2. Set Up Project
- 3. CSS, PostCSS and Sass
- 4. Images and Fonts
- 5. JavaScript ES6
- 6. External Libraries
- 7. Code Style Rules
- 8. Deploy
- 9. Audit and Page Speed
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.
- Create Heroku application:
heroku create
. - 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:
- Connect your GitHub repository.
- Choose Branch to deploy, usually:
master
. - Set the Build command to:
npm run prod
. - Set the Publish directory to:
dist/
.
We are live
v0.0.1
- Meet GoPablo.
MIT