DEV Community

Cover image for Video Tutorial: Converting an HTML template for use in Apostrophe
The Apostrophe Team for Apostrophe

Posted on • Updated on

Video Tutorial: Converting an HTML template for use in Apostrophe

Creating a website from scratch can be a daunting process. Not only do you have to create the HTML markup, but also the styling to make it all look good. One way to get started quickly is to use one of the numerous premade templates available on the internet.

In this video tutorial, we will walk through the steps to convert the "Start Bootstrap Clean Blog" template into an Apostrophe template. While we are starting with a specific template, these steps can be generalized to any template you might download.

What to Expect

Any pre-made HTML template can be converted for use in Apostrophe through some simple steps.

  • Add the front end assets to your Apostrophe project.
  • Create an Apostrophe page type for each of the template pages that substitutes data from the schema fields into each area of the page that you want to edit.
  • Add special piece types and piece page types.

In this tutorial, we took extra steps to create reusable navigation, header, and footer fragments. While this makes the overall project more compact it is completely optional.

Documentation and Resources

For developers that like to follow along with the written documentation, that can be found here in our docs. Additional resource links include the Form Builder Extension and the Cookbook for Building Navigation.

We hope that this tutorial will help you get your Apostrophe project up and running a little more quickly! Have you converted a template into Apostrophe? Tell us about it in Discord.

This article was originally published on ApostropheCMS.com.

Top comments (0)