DEV Community

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

Posted on • Edited 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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay