Whenever someone asked me to create a website for them, I would always start with the design. I'm a developer, not a designer, so apparently not the best idea. I had failed quite a few times before I realized that I had to leave that for more talented people. Over time, I learned it's almost always better to start looking for templates online, and much easier to find something that looks as close as possible to what I had in mind in the first place.

That's the easy part. But it's just a template that needs to be turned into a functional website. And time is money, so how do you do that as quickly as possible?

Turning Templates Into Dynamic Sites

A simple HTML website template is just a bunch of static files (HTML, CSS, JS, images, etc.) showing the design. When you want to change anything on a pre-made site like this, you need to start adding and editing the provided markup files. While adjusting HTML may sound easy for you, your mother, who's a hairdresser and for whom you created the site, will very much disagree. And you don't want to teach her HTML. You know that.

So you need to move the content outside of the implementation. Using a Content-as-a-Service (CaaS) cloud platform is a great way to do so as it's easy for small websites, can be free, and does not require you to install anything. The HTML template is enhanced with code that takes the dynamic content from there.

I showed you how to use a headless web template in my previous article. While that was fun, as developers, we want to get our hands dirty from time to time :-). Let's go and create the template together right now.

Headless Web Template Contents

What will be inside? The original template consists of CSS styles, JavaScript code and the HTML. This is what you get when you download a free HTML website from a catalog site, like HTML5UP.net or startbootstrap.com:

The headless web template will have two main parts, which we need to address:

1. Template implementation
2. Content import package

Let's look at an implementation based on JavaScript framework Vue.js, combined with Kentico Kontent. I picked Vue.js because I only need an internet browser and my very limited knowledge of JavaScript :-). If you prefer another platform, feel free to check out Kentico Kontent's other SDKs (includes PHP, .NET, Java, and more).

The content import package is the separated content condensed into a bunch of zipped JSON data. This is created by a template manager tool automatically.

And, finally, for the purpose of this showcase, I've picked a bootstrap template called Grayscale.

Vue.js Implementation

At first glance, the website is very slick and simple. As it's a single page application, the navigation buttons scroll to sections of the page rather than making redirects. This is perfect because we don't have to address any routing in the code.

Now, what we need to do is to divide the template content into sections. This nicely shows the future Vue.js components and maps the design to content models. Think about which parts of your website will have dynamic content or be rather static. Some parts like the copyright mention at the bottom can stay as part of the code because you don't expect them to change very often.

If we take a look at the top section of the website, this is what mapping the design to a content model will look like:

When we know what type of content we want to store, it's time to create the models in Kentico Kontent. Log in (sign up) and create a new empty project. If you haven't done this before, you can get there from the top-left project context dropdown by selecting "My Projects" (or click here once you're logged in).

In the new project, go to 'Content models' on the left panel and create a new content type for the first section - this is the content template:

Then switch to 'Content & assets' (second link in the left menu) and create a new content item based on the model you've just created and fill in the data - this is the actual content:

Then we will rinse and repeat for all the content we want to pull from the CMS (that is for all components on the template). You probably get the idea, so I won't go through every single part of the website.

When we have the content ready, we can take a look at the template code and replace the static content with references to the content we've modeled and created previously. The steps I've made are the following:

• Include additional JavaScript in index.html - Vue.js, Kentico Kontent JavaScript SDK
• Wrap all the body content in additional <div> with some id to be able to target it with Vue.js
• Instantiate Vue.js as well as the SDK Delivery client
• Move components markup from the index.html to Vue.js components

Find the full implementation on GitHub. Note that the implementation is always in an SRC subfolder to make things clean and organized.

You can see that it gets the data using the deliveryClient and uses them as dynamic values in the template part. If this seems overwhelming or you're just starting with Vue.js, don't worry. There are quite a few step-by-step articles exactly for this case. Check them out here and here.

Preparing the Content Import Package

With the implementation prepared and models created, we need to bundle the content part into the template. You can generate the zip with the Kentico Kontent Template manager under the Export tab. For this step, you will need your Kentico Kontent project GUID. Find it on the project settings screen (under Development -> API keys).

When you press the 'Export data' button, the tool will spit out a .zip file with your project data. Include it in the final template as content.zip.

Show Your Work to the World

When your template is ready for the spotlight, we'd love to include it in the Kentico Kontent Template gallery. Our swag is waiting for your pull request :-).

The contribution checklist looks something like this (from the guidelines):

• Create your repository on GitHub.
• Make sure all required files are in your repository:
  • /src folder that contains template implementation
    • content.zip, an archive generated from Kentico Kontent Template manager
    • template.jpg with site screenshot
    • README.md with instructions to get the site running

Not sure you can do it alone? We are a bunch of nice guys that are always happy to help. Just ping us on Gitter.

Summary

Rapid website development is the future, and we've just made the first step to enable us to go with the flow. Together we created an awesome template that will save someone precious time or help a beginner with building a website. We are excited to see your contributions too, so visit our gallery and become a part of it.