For the final chapter in this manual, let's take a real-world example of a site with many messy pages and convert it to an AutoSite project that can be easily maintained and added onto. This can be done in four easy steps.
Here's one of the pages of a little minisite about guitars. There's six pages to this site, all identical save for the page name, the text on the page, and the image to the right of the layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Epiphone Sheraton II - Dream Guitars/Basses</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dream Guitars/Basses</h1>
<table>
<tr>
<td class="sidebar">
<h2>Other guitars:</h2>
<ul>
<li><a href="sheraton.html">Epiphone Sheraton II</a></li>
<li><a href="firebird.html">Copper Gibson Firebird</a></li>
<li><a href="jaguar.html">Fender Jaguar</a></li>
<li><a href="toronado.html">Fender Toronado</a></li>
</ul>
<h2>Basses:</h2>
<ul>
<li><a href="thunderbird.html">Gibson Thunderbird</a></li>
<li><a href="ripper.html">Gibson Ripper</a></li>
</ul>
</td>
<td class="main">
<h2>Epiphone Sheraton II</h2>
<p>This is probably my premiere dream guitar. So many bands I like have used this thing: Ted Leo, Earlimart, Silversun Pickups, Vampire Weekend, the list goes on. It sounds great, natural and strummy without being explicitly acoustic, and especially with the Silversun Pickups, the noise they manage to kick up with one of these is nuts. It's just this swirling din that should not be coming out of a semi-acoustic, but it does.</p>
<p>I also just think it looks lovely, especially if you get it in a warm finish like the Vintage Sunburst.</p>
</td>
<td>
<img src="sheraton.jpg" alt="Epiphone Sheraton II">
</td>
</tr>
</table>
</body>
</html>
[#] 1. Convert the Page to a Template
The first step is to take a copy of one of the pages and replace the parts of the markup that'll change with attributes.
- The body text of the page in our example will become the
[#content#]attribute. - The name of the guitar across the page will be replaced with one of our own attributes,
[#longname#]. - We'll also replace the name of the image with
[#shortname#], so we can plug into it without needing to bloat the input page with extra markup.
<!DOCTYPE html>
<html lang="en">
<head>
<title>[#longname#] - Dream Guitars/Basses</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dream Guitars/Basses</h1>
<table>
<tr>
<td class="sidebar">
<h2>Other guitars:</h2>
<ul>
<li><a href="sheraton.html">Epiphone Sheraton II</a></li>
<li><a href="firebird.html">Copper Gibson Firebird</a></li>
<li><a href="jaguar.html">Fender Jaguar</a></li>
<li><a href="toronado.html">Fender Toronado</a></li>
</ul>
<h2>Basses:</h2>
<ul>
<li><a href="thunderbird.html">Gibson Thunderbird</a></li>
<li><a href="ripper.html">Gibson Ripper</a></li>
</ul>
</td>
<td class="main">
<h2>[#longname#]</h2>
[#content#]
</td>
<td>
<img src="[#shortname#].jpg" alt="[#longname#]">
</td>
</tr>
</table>
</body>
</html>
You would then save this into your templates folder, perhaps as guitars.html.
[#] 2. Add the Content to an Input Page
The content we removed from the template now gets added to an input page, along with the attribute values that will be re-inserted onto the built page.
<!-- attrib template: guitars --> <!-- attrib longname: Epiphone Sheraton II --> <!-- attrib shortname: sheraton --> <p>This is probably my premiere dream guitar. So many bands I like have used this thing: Ted Leo, Earlimart, Silversun Pickups, Vampire Weekend, the list goes on. It sounds great, natural and strummy without being explicitly acoustic, and especially with the Silversun Pickups, the noise they manage to kick up with one of these is nuts. It's just this swirling din that should not be coming out of a semi-acoustic, but it does.</p> <p>I also just think it looks lovely, especially if you get it in a warm finish like the Vintage Sunburst.</p>
Save this file in your pages folder with the same name you gave the original page (and in a folder with the same name, if you have your pages in folders). In our case, this gets saved as sheraton.html. Repeat this process for the rest of the pages that use this layout.
[#] 3. Copy Any Other Assets to includes
We still have one more step! Notice the picture of the guitar and the stylesheet haven't been factored into the equation yet. These go in your includes folder; again, if they were in a subfolder of your site previously, make sure you remake your folder structure and copy them into that folder.
[#] 4. Build!
And aside from any other pages you'd need to convert, you're done! Once you build your site, you'll have a clean set of pages in your out folder, all guaranteed to be identical to one another, no mistakes or errors between them.
Now, if you decide to, say, add metadata to the page head, or move your images to another folder on your site, all you'd need to fix is fix the template and rebuild. Adding another page? Make a new file in pages using that template and rebuild. It's that easy.