Advertisement

Introduction to Webhook: Custom CMS and Website Builder

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Webhook is a new site building platform which was successfully backed on Kickstarter in May 2014 and has just been released to the public. The concept behind Webhook is, if you'll excuse my enthusiasm, absolutely brilliant.

One of the most often heard requests in many CMS communities is "How can I customize the system for (fill in the blank)". The guys behind Webhook wanted to address this common need, but instead of creating a new prebuilt CMS with the idea of making it extensible they took things one step further and asked, "What if we created a CMS builder instead?".

Webhook's most unique, and quite possibly game-changing, feature is that for every single site you can control exactly what type of content can be posted through simple drag and drop form builders in the admin area.

Let's say you need to publish podcasts but you don't want to deal with typical blog posts and pages. You'd create an "Episodes" content type and drag and drop fields through which you can enter episode names, type in your episode blurbs and upload podcast files.

Or, what if you do want a blog, but you also want a place to display a gallery of videos? You can do that too, just "drag and drop" yourself a traditional blog posting area plus another section dedicated to adding videos.

And how about if you need to create several different content types that have complex relationships with one another? Yes, you can do that also. Short of full blown e-commerce or membership management, whatever your site needs you can create the CMS interface to suit.

The underpinning principle of Webhook is you should have the ability to easily create a CMS with everything you need and nothing you don't, for every single project. Let's jump in and take a look at how Webhook works, and how you can get started with it.

Webhook: Local and Live

Webhook lives in two places:

  1. The development version on your local machine.
  2. The live site on the Webhook server, at (yoursite).webhook.org or at your own domain.

You install Webhook locally and build your site offline so you can get the admin area, presentation and content just how you want it. You then deploy it to the live server when you're ready. From that point on you can also continually update your site locally and redeploy as many times as you like.

Installing Webhook

Webhook installs in just a couple of minutes via command line through NPM

After ensuring Node.js is installed, fire up a terminal (Mac / Linux) or command prompt (Windows) and run the command:

npm install -g grunt-cli wh

Note: you might need to prepend that with the command "sudo" to gain admin privileges on Mac or Linux.

This downloads all Webhook's required files and sets up your computer so it can create and manage Webhook sites from command line.

Creating a Webhook Site

Once Webhook is installed you can go ahead and create a site by running the command:

wh create your_site_name

In your terminal you'll then need to enter the email address you have associated with Webhook, and either set or enter your password:

When the site setup is complete you'll see a confirmation:

What just happened?  You'll find a folder has been created locally with the name you specified during creation and the required files have been downloaded into it:

You're now ready to run your local Webhook server so you can work on your site offline before deploying it live. To do this, first go to your site's folder in your terminal by entering:

cd your_site_name

Then run the command:

wh serve

Your local site will automatically open in your default browser, and you'll see:

When you click on the Looking for the CMS? link you'll have to login, then you'll be taken to a screen where you have to decide whether to go with an existing Webhook theme or create one from scratch:

Webhook themes play quite a different role to those on other platforms, so before you proceed you need to understand what you're actually choosing when you select a Webhook theme or elect to build a new one.

Why Webhook Themes are Different

On a traditional CMS themes control the way a site looks, while the types of content and their methods of entry are separately managed. However on Webhook the theme determines not only presentation but the type of content the site accepts, as well as how that content is posted via the admin panel.

For example, if you install the prebuilt "Podcast and blog" theme you'll get a purpose designed front-end with inclusions such as iTunes links, audio players, download links and so on:

But you'll also get a purpose designed admin area specific to the type of content you'll be posting on your site:

Notice the podcast related content types "Cast Members", "Episodes" and "Podcast Details". Note also how in the above screenshot of the "Episodes" posting interface it only has fields specific to posting a podcast i.e. episode number, audio file insertion etc. You don't have to work around any superflous content entry fields that won't be used.

Both the front-end elements and what you see in the back end are controlled by the theme. So in a sense, for each Webhook site the theme is the CMS.

In a lot of ways this makes a great deal of sense. On any platform a theme has to align itself with the type of content that can be posted on the site. On a traditional CMS if a new custom content type is added, by a plugin for example, it often can't be used if a theme doesn't support it. Webhook's approach makes absolutely sure that the theme and content types of a site match up perfectly by containing them in the same system.

Starting From a Prebuilt Theme

In future tutorials we'll be covering in depth how to build out your own custom Webhook themes, so for the purposes of introducing you to the platform I went with the prebuilt option. This gave me eight themes to choose from.

I selected "Bootstrap blog" which is a simple blogging theme styled with Bootstrap which gives you the content types "Articles" and "About Me" in the admin area:

After adding some content the front-end of my local site looked like this:

Deploying to Your Live Site

Taking what you've created locally and deploying it to your live site is also incredibly easy. Open up a terminal in the folder housing your local site and run the command:

wh deploy

Note: I found it easiest to open up a second terminal to do this, because that let me leave the first terminal I opened running my local Webhook site process.

When deployment is successful you'll get a confirmation in your terminal along with a reminder of the URL at which you can see your live site:

You can visit the demo site created above at http://tutsplusdemo.webhook.org/

Basic Admin / Content Type Customization

As I mentioned earlier we'll be giving you full tutorials on Webhook theming in the near future. Nonetheless let's still take a look at a simple example of customizing one of our site's content types so you get an idea of how easy it can be.

By default the "About Me" page shows a heading and a bio:

We're going to add the ability to append a website URL to the end of the page.

Adding a New Content Entry Field / Widget

Head to the admin area and click Add / Edit Content Types in the left sidebar:

You'll be shown a list of the existing content types:

Click the About me entry and you'll be taken to the form building system. On the left side of the screen you'll see all the different types of content entry fields you can add, called "Widgets" in Webhook terminology. Find the Website widget in the Specifics section then drag it from the left side and drop it on the right:

Click the Save Form button at the bottom right of the interface:

After saving is complete you'll be taken to the content entry form you just updated, where you'll see your new Website field. When you hover over the field you'll also be shown the tag you should use to display its contents through the appropriate template file:

Update the Template File

In the "pages" subfolder of this theme is the template file "about.html" that controls the presentation of the "About Me" page. We'll cover more on how the templating system works in our full Webhook theming tutorial.

For now, you can just open up the "about.html" file and locate the line reading:

{{ about.body|safe }}

Under that line add the following:

<a href="{{ about.website }}" target="_blank">{{ about.website }}</a>

Save the file and your local site will detect the change and automatically refresh, at which point you'll see your new link below the main text:

More Awesome Webhook Features

After experiencing all the functionality I've described above I was already hugely impressed by Webhook and busily thinking of applications I could use it for, yet I still found even more features which continued to pique my interest.

Themes Allow Leveraging NPM

With Webhook themes not only can you control data, presentation and the admin area, but you can also have them fetch NPM packages during installation.

This means you can do things like pull in a preprocessor package so LESS / Sass / Stylus files can be compiled on the fly. Whenever you serve your local Webhook site it runs a "grunt watch" task so you can customize the included Gruntfile to handle these types of operations.

It also means you can incorporate any tools that are available via NPM such as preprocessor frameworks, jQuery plugins and anything else useful you might find among the near 80,000 available packages.

You Can Even Style the Admin Area

Because the entire CMS is controlled from within your theme folder, you also have control over the way it's styled. All you have to do is add a link to your own custom CSS in the template file pages/cms.html. For example, you could add your own styling to make text fields wider than their default:

And of course you could also put together some more comprehensive styling to completely rework the color scheme, typography and anything else you choose.

Learn More

Check out these great screencasts demonstrating what Webhook can do:

Other Useful Links:

Advertisement