Whenever I was faced with a task of quickly creating a page in the past, I went with WordPress. I already had a PHP-enabled server and a database installed on my machine, so I just needed to create a new database user, do some configuration work, and then it just worked. After a few hours to a few days, I had a working website ready for deployment.

This process was fine for me as I have a developer background and used to work with MySQL a lot in the past. For some of my front-end colleagues, this was not the case. Letting them into phpMyAdmin (a web-based administration interface for MySQL) meant that all the data in that database was in danger, so I had to install the development tools and configure their WordPress installations for them. And yet another task that required my attention was the deployment of these sites to a remote server.

Anyway, it's no longer 2010. Front-end development is becoming more and more popular, and almost everyone can write JavaScript now. Hand in hand with this comes a new way of producing and using web templates.

A Better Way with Headless CMS

Ever heard of a headless content management system (CMS)? Nowadays we like to put everything in the cloud as it's easy, more affordable, and available everywhere (provided you have an internet connection). Using a headless CMS is just that. You get a modern administration interface for content management without the need to install, maintain or update.

This brings a fresh new concept into the equation because you don't need to care about that database anymore. Your data sits behind the headless CMS, and you can pull them to your site using the API, which frees up your options immensely. With your content not being tied to your application, website implementation becomes represented only by the front-end implementation itself, which gives you complete freedom over the technology you want to use.

Web Templates 2.0

I've promised a faster way to create simple website, so enough beating around the bush. Here's the template in one small .zip file:

kc-template-multiverse-master.zip (ZIP, 4.6MB)

The package contains everything you need for the implementation of a fully responsive HTML5 website. The second part of it is a data import package with the content itself, including content models and items. You don't need to know a thing about JavaScript or ways to call an API for data - it's all prepared for you. At this point, you're two steps away from a full site. What is there left for you to do?

1. Import the content part into the headless CMS project
2. Let your site know where to find it

Let's do it!

Into Kentico Kontent

I've mentioned headless CMS above, and Kentico Kontent is the one. With an ability to model and limit content, define permissions for editing content and streamlined UI, this is where you and your content editors will have a blast.

Just like we're used to with other cloud services, you can use the headless CMS for free. Kentico Kontent offers a forever free plan called "Starter", which is perfect for smaller websites. Some advanced functionalities unlock with higher tier plans and are definitely worth exploring, but that's a different story. If you're new to Kentico Kontent, you can create a free account at kontent.ai. 

Usually, when you install a CMS, you would hop in and start creating your content. However, with the template, we already have a head start thanks to the content in the package.

So how do you import it? Kentico Kontent has an API which allows you to manipulate the content and models programmatically, which we'll use for the next step. Don't worry though. There's no need to get your hands dirty - someone else has already done the heavy lifting so we can import everything through a nice UI.

Just make sure to mark down your Project ID and Content Management API key. You will find both in Project Settings under API keys in the app.

Importing Content

Note the time now. If the import takes you longer than a few minutes, I'll buy you a beer. To import your data, check out this tool: https://kentico.github.io/kontent-template-manager/templates

This is where the content part of the template was born. The tool itself already uses Kentico Kontent's Content management API, so you don't have to figure out that import/export script. 

So what exactly can it do for us?

• It can create data export package which you can import later
• It can migrate items between existing projects
• It can import data from a project or ZIP package to your new project

The last option is what we're after. The export package is just a big JSON of data that the project manager understands and contains all content models and content items from your project. You can think of it as an SQL import of sorts.

So how to do the import?

1. Unzip the archive and locate the data import package
2. Go to the Import tab of the KC project manager tool
3. Feed the tool with the API keys from the previous paragraph
4. Drag&Drop the import package and confirm the import

Note: The tool is open source as well so feel free to check out the code at GitHub and eventually you can fork it and make adjustments or host it yourself.

Completing the Website 

When you now open Kentico Kontent you should see all the imported data. The last step and the only customization you need to do is to let your site know the Project ID of the project in Kentico Kontent. So open your favorite code editor, or you know, just Notepad, and open the configuration file. Which file it is varies from template to template, in this case, it's /assets/js/kenticokontent.js. Replace the "kontent" part with your Project ID.

That's it! Now you can open index.html in your favorite browser and click through your new site. Whenever you feel like updating some content, open Kentico Kontent and change it. Your website will reflect the changes.

To adjust the site implementation, you can edit site code files. It's separated into specific components, so it's easy to customize with very little to no previous knowledge. If you know a bit of JavaScript, it will be a piece of cake for you. After hitting refresh, you will see your code changes immediately.

Taking Your Site Online

Now you have a website that runs locally with dynamic content that's a breeze to update and maintain. The only thing that's left on the to-do list is to show the world your achievements and publish it online.

The easiest way of deploying a site like this is to copy-paste the files to a remote server. It's just a bunch of static files that requires no additional configuration. If you don't own or have access to a server that would host your new site, there are also more automated ways of deployment and various hosting providers like GitHub Pages, Surge, and others, which can do wonders for you. If you are a real tech and want to know more, check out this article.

Summary

So there you have it! A ready to implement website and a great Content as a Service platform with all the content management features you need, all free in just a few clicks and text file edits. The only thing you need to do is the change the sample content to your own data. Feel free to check out the list of all our templates here:

Kentico Kontent Web Templates Gallery

We are adding new templates every week together with our awesome community members, so make sure you check in every few days if you did not find a template that suits your needs straight away. And if you did, let us know how you found it!