Introduction
Howto get started with Smarthtml.
5 minutes tutorial
In this tutorial you will learn in couple simple steps how to externalize content in your HTML.
Step 1 Create project
The project will be a place where you can upload your files.
To create project you will need to visit smarthtml.io, use add project button, then enter name for your project. After confirmation you will be moved to your project details view.
Prepare HTML file
Having your project created you may start working on your site. Let's start with simple HTML file to see main smarthtml features.
Create sample HTML file with content above (or download from link: sample.html )
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section sh:list="title-section" class="jumbotron">
<div class="container">
<h1 sh:text="header" class="jumbotron-heading">Album example</h1>
<p sh:text="subheader" class="lead text-muted">Something short</p>
<p>
<a sh:link="main-link" href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div sh:list="cards" th:remove="all-but-first" class="row">
<div sh:list-iterator class="col-md-4" >
<div class="card mb-4 box-shadow">
<img sh:image="card-image" class="card-img-top" src="https://via.placeholder.com/100x55" alt="Card image cap">
<div class="card-body">
<p sh:text="card-text" class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://via.placeholder.com/100x55" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://via.placeholder.com/100x55" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Sample html file is a template based on bootstrap with some extra attributes guiding app where and how externalize content.
see: Header content definition
<h1 sh:text="header" ..... >
Links destinations on buttons
<a sh:link="main-link" .... >
List definition and iteration on cards
<div sh:list="cards" th:remove="all-but-first" class="row">
<div sh:list-iterator class="col-md-4" >
Image definition on card header
<img sh:image="card-image" ....>
When on root folder drag&drop created file into folder or click on "Browse file" button to select file from disk.
You will be prompted to confirm file import, after upload project tree should show your filename.
Customize content
Click on your HTML file in project files tree.
You will see form generated on smarthtml directives placed in file.
Initially form data is fulfilled with content from html, when you start editing, then content from form will start overwriting HTML content.
Download results
Goto "Deploy" view in main menu. Select which files should be exported, confirm dialog. Application generates static files with your content included.
Basic concepts
Smarthtml transforms any static html template to static website by externalizing content definition from a template.
The transformation is based on additional attributes added to the html elements that inform the engine which content in the template should be editable by users.
For example we have main header in our website template,
<h1>Main header</h1>
Adding sh:text="header" attribute to an element tells the engine that text will be replaced there.
Modified html will be
<h1 sh:text="header">Main header</h1>
The form associated with the page is extended with a section that allows you to enter a header value.
Transformed html page will be produced with replaced text in header, instead of template content header will contain text entered by user in form control related to header.
Transformed resources including html pages could be downloaded as static website and hosted on any serverless environment or used internally as fully functional static website.