A Simple Way to Develop Static Content Websites
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.sass-cache/2eb5044f4a917a47ca2b43edae4a433d3fd873d3 disable favicon generator Jun 26, 2018
.vscode break a part header, add various components/support/configuration May 26, 2017
data Fix favicon generator (wrong template filename) and update data Aug 10, 2018
source update github username Jan 26, 2019
.babelrc successfully working on webpack v4! Jun 26, 2018
.gitignore package dependancy updates Jun 26, 2018
.ruby-version Port from Vault Labs Jul 8, 2017
README.md Updates to Readme - formatting and clarification Jan 25, 2019
package.json package dependancy updates Jun 26, 2018
postcss.config.js Port from Vault Labs Jul 8, 2017
readme.md update readme Nov 14, 2018
webpack.config.js upgrade to sass with post css autoprefixer Jun 26, 2018



Rapidly Build Static Content Websites

Powered by Vault Labs

Eiffel is an opinionated framework to power your static content websites. It uses Middleman as a base to build the content, and also includes a pre-configured webpack configuration, and a basic template of all the core ingredients needed in any new website (think SEO header tags, CSS utility classes, Templates for headers, layouts, footers).

Middleman drives the core of tools you will use to build a new website: allowing for partials, layouts, frontmatter, livereloading (for development). All of these are pre-installed and pre-configured in Eiffel, you can also easily add blog-like functionality with one additional extension.

Webpack handles most of the assets, including Babel JS transpiling and SCSS support. This gives you support for all the current versions of JS and CSS, plus all the features that future spec's offer. For JS, thats cleaner syntax and the ability to load modules. For CSS, it's variables, autoprefixing, and color functions.

Eiffel can be combined with a static content host like Netlify, which features continuous deployment. Simply sync your code with GitHub, and Netlify will build & serve the latest version of your website.

Eiffel is maintained by the team at Vault Labs.

Getting Started

Instructions are written for MacOS; however all technologies will work on Windows/Linux

  1. Clone this repo or download it manually, and copy/paste the folder to your preferred location.

  2. You need Ruby, Node.js, Yarn to use Eiffel. Make sure those have been installed first.

  • Yarn is used as a preference because it's much faster than NPM. You can use NPM if you prefer
  • If using MacOs, you must also have to make sure to install Xcode Command Line Tools: xcode-select --install
  1. Next, youinstall the neccesary dependancies via terminal:
  • Install Middleman: gem install middleman (core builder for website)
  • Install Bundler: gem install bundler (package installer for project gems)
  • Install ImageMagick: brew install imagemagick (or download here)
  1. Navigate to your project folder (cd/your-project) and:
  • Install Middleman and gem dependancies: bundle install
  • Install node modules: yarn

Development vs. Production

When building your website locally: use the terminal command yarn eiffel from your project folder to start a live-reload server that will preview your website at http://localhost:4567. Middleman will run in the background and render the final build version of your website, without creating the actual files in your project folder.

When you're ready to push the site live, or need a copy of the production-ready code that could be loaded onto a web server: run yarn eiffel-build and a compressed optimized version of your site in the /build folder of your project. If there are any errors with your build, they will print to the console.

Other helpful tips

  • This should allow you to spin up new web projects in a matter of seconds, rather than spending hours building folder structure or finding configurations online. It is intended to allow for lots of hacking to achieve whatever project you're looking to tackle.
  • Use a modern IDE like VSCode or Atom which has a terminal window built into the editor.
  • When you're ready to show the world what you've made, deploy to a static-site deployment service like Netlify and be blown away by fast your new static content website loads in browsers.