This post is pretty old, and might contain outdated advice or links. We’re keeping it online, but recommend that you check newer posts to see if there’s a better approach.
All blog postsBy using Webhook we can quickly customise the back-end and spend most of our effort on a blazingly fast and responsive front-end.
At De Voorhoede we love all the stuff we can create in the browser. Most of the time we create websites and deliver them as a Front-end guide. But occasionally the client wants more than just the front-end. For those cases we like to use Webhook.
Webhook is a CMS that builds static websites using a popular front-end development stack. It is easy to set up, comes with a database service, an image server, an online content editor and hosting. By using Webhook we can quickly customise the back-end and spend most of our effort on a blazingly fast and responsive front-end.
Case introduction
WeCity assists tourists on a city trip by means of a mobile app. We created the product information website and implemented Webhook so weCity can edit their own content.
Setup
Adding Webhook to your project is as easy as running three commands in your terminal. After that you are all set to begin your journey.
$ npm install -g wh
$ wh init [projectname]
$ wh serveContent first
The weCity website has a homepage and a couple of blog posts. With Webhook you can create a different content type for each. The homepage is a single article, the blog posts we consider 'multiple content'. When creating multiple content you can set up a single content definition and use it for multiple 'child' articles.
Setting up the content
The structure for the homepage content is as easy as drag-n-drop; add fields to your form, order them and set the properties. Webhook has a rich set of predefined field types.
Setting up the homepage with drag and drop
Creating templates
Webhook uses a template engine called Swig which uses a popular syntax (eg. {{ item.property }} ) also seen in Nunjucks, Django and Twig.
Webhook gives you a predefined template structure when creating new content types, but you have complete freedom over how to put it all together, using macros, includes and everything Swig has to offer. Webhook also puts all kinds of filter sauce on top of that. This way you can fully control your data and the markup at the same time.
A Section of the homepage HTML with the use of Swig and the Webhook variables
How it turns out
Next to all the benefits for developers, Webhook is very easy to use for our clients and copywriters. Editing and saving the form causes an instant reload of the browser.
After save the changed content appears right at the templates placeholder
Why we like it
- It's easy to setup
- Ability to create a custom content editor
- Total control of HTML templates, styling and asset management
- Exchangeable content (via API, import or export)
- We can continue to work as kick ass Front-end developers and create websites that are mobile first, small in size, fast and optimised for screen readers
- Open source
- Well documented
- Affordable hosting and a fairly straightforward means to host on our own environments
- If Webhook ever goes away, we still have a very workable development stack with templates that we can build with our own tools
All in all, using Webhook is a painless way to get all the benefits of a CMS while keeping focused on the front-end. Do you want to know more about the way we work, our workflow or webhook in specific? Contact us!
