Krobknea: Dropbox

Final product image — What You'll Be Creating

You probably know that Dropbox is perfect for storing data backups and sharing files, but did you know you can use it as a static site web host too? Thanks to nifty apps like DropPages, which we'll be covering here today, you can!
The process behind DropPages is really quite brilliant. You simply give the DropPages app access to your Dropbox account and it creates a "My.DropPages" folder to which you'll upload your website files. Then when people visit your domain DropPages acts as an intermediary between the browser and your Dropbox account, fetching the files from your "My.DropPages" folder and serving them up as a fully functional website.

As Dropbox comes with an application which syncs files on your computer with your online storage, you can just maintain your site locally and allow Dropbox to automatically upload the files for you. This means no worrying about FTP, and given your files are both offline and on Dropbox they're essentially backed up by default.

What We're Going to Do

During this tutorial I'm going to show you how to make a classic five page static site with DropPages, using a modified version of the "Cuda" template from Graphic Burger.
We won't focus on how the base HTML and CSS is written for the template, but rather on how to handle the integration with DropPages. All the required template code will be included in copy & paste ready format below, or you can download the source files via the Download Attachment button here in the sidebar.
Let's begin!

Link DropPages with Dropbox

If you haven't already, go to Dropbox and register, then download and install the application they provide to sync your offline files to your online storage.
Then head over to http://my.droppages.com/ and sign in with your DropBox account details. By doing this you're giving DropPages access to setup a folder in your Dropbox account which will house your website. After the Dropbox application syncs your online files to your computer you'll see a folder structure like this in your offline Dropbox folder:

Each of the sites you create via DropPages will live inside this folder. You're now ready to go ahead and create a new site.

Create a New Site

After granting access to your Dropbox account you should automatically be redirected to your DropPages dashboard. If not, you can access it at http://my.droppages.com/account
To create a new site click the big blue "Create a new site" button:

You will then be taken to a page where you can specify the domain you want to use for your site. You can use any subdomain which isn't already taken by another DropPages user, but you need to ensure you include the "droppages.com" part of the domain when you enter your choice, like so:

After entering your domain, click the "Create" button and DropPages will setup the folder structure for your new site inside your "My.DropPages" folder. When synced to your offline Dropbox folder it will look like this:

What's in the Folder Structure?

The purposes of the three folders you see are:

Content: Holds .txt files written in markdown and / or HTML to form the content of your site's pages.
Public: Holds publicly accessible site files such as stylesheets, images, PDFs etc. For a full list of file types allowed in the "Public" folder take a look at the Dropbox documentation.
Templates: Holds the HTML files of your site's templates, into which the content will be rendered.

When your site is first created it includes a placeholder file in each of these folders:

index.txt in the "Content" folder
main.css in the "Public" folder
base.html in the "Templates" folder

When you visit your newly created DropPages domain those three files will give you this:

The first thing we're going to do is add some custom theme styling around this basic content, replacing the code in the existing "main.css" and "base.html" files.

Note on Editing DropPages Files

Whenever I refer to editing site files throughout this tutorial it will mean using your preferred code editor directly on the files in your offline Dropbox > Apps > My.DropPages > mysubdomain.droppages.com folder.
After you save changes to the file you are editing allow a little time for your Dropbox application to upload your files to your account, then refresh your DropPages site to see your modifications go live.

Adding Custom Theme Styling

As I mentioned earlier, we're not going to talk about the actual processes behind creating the base CSS and HTML of this template design, so we can focus instead on handling DropPages integration. With that said, here's a stylesheet I prepared earlier.

Add Custom CSS

Copy all the code below and paste it into the "main.css" file in your site's "Public" folder (prepare yourself - it's quite a chunk..)
Public > main.css

html {

    font-family: sans-serif;

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {

    display: block;

}

audio,canvas,progress,video {

    display: inline-block;

    vertical-align: baseline;

}

audio:not([controls]) {

    display: none;

    height: 0;

}

[hidden],template {

    display: none;

}

abbr[title] {

    border-bottom: 1px dotted;

}

b,strong {

    font-weight: bold;

}

dfn {

    font-style: italic;

}

mark {

    background: #ff0;

    color: #000;

}

small {

    font-size: 80%;

}

sub,sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline;

}

sup {

    top: -.5em;

}

sub {

    bottom: -.25em;

}

svg:not(:root) {

    overflow: hidden;

}

figure {

    margin: 1em 40px;

}

pre {

    overflow: auto;

}

code,kbd,pre,samp {

    font-family: monospace,monospace;

    font-size: 1em;

}

button,input,optgroup,select,textarea {

    color: inherit;

    font: inherit;

    margin: 0;

}

button {

    overflow: visible;

}

button,select {

    text-transform: none;

}

button,html input[type="button"],/* 1 */,input[type="reset"],input[type="submit"] {

    -webkit-appearance: button;

    cursor: pointer;

}

button[disabled],html input[disabled] {

    cursor: default;

}

button::-moz-focus-inner,input::-moz-focus-inner {

    border: 0;

    padding: 0;

}

input {

    line-height: normal;

}

input[type="checkbox"],input[type="radio"] {

    box-sizing: border-box;

    padding: 0;

}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {

    height: auto;

}

input[type="search"] {

    -webkit-appearance: textfield;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {

    -webkit-appearance: none;

}

fieldset {

    border: 1px solid #c0c0c0;

    margin: 0 2px;

    padding: .35em .625em .75em;

}

legend {

    border: 0;

    padding: 0;

}

textarea {

    overflow: auto;

}

optgroup {

    font-weight: bold;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

td,th {

    padding: 0;

}

* {

    box-sizing: border-box;

    -moz-box-sizing: border-box;

}

html {

    width: 100%;

    height: 100%;

}

body {

    margin: 0;

    width: 100%;

    height: 100%;

    background-color: #e7f1f8;

    font-family: 'Titillium Web';

}

a,a:visited,a:link {

    text-decoration: none;

    color: #3c5499;

}

a:hover,a:active {

    color: #17c2a4;

}

h1,h2,h3,h4,h5,h6 {

    font-family: 'Titillium Web';

    line-height: 1.313em;

}

h1 {

    font-size: 2.625em;

    margin: .563em 0;

}

h2 {

    font-size: 2.25em;

    margin: .563em 0;

}

hr {

    border: 0;

    border-bottom: .25em solid #e7f1f8;

}

.short {

    width: 5.625em;

}

.wrap {

    width: 100%;

    max-width: 75em;

    margin: 0 auto;

    position: relative;

}

.wrap:before,.wrap:after {

    content: " ";

    display: table;

}

.wrap:after {

    clear: both;

}

.site_header:before {

    content: " ";

    background-color: #17c2a4;

    width: 100%;

    height: 40.625rem;

    position: absolute;

    z-index: -1;

    top: 0;

    left: 0;

    right: 0;

}

.site_header {

    text-align: center;

    color: #fff;

    padding: 1.618rem 0 3.236rem 0;

}

.site_title {

    font-size: 4.5rem;

    margin: 0;

}

.site_title a {

    color: #fff;

}

.site_tagline {

    font-size: 1.125em;

    margin: 0;

}

.site_tagline a {

    color: #fff;

}

.mainmenu {

    background-color: #87509c;

    border-radius: .375em .375em 0 0;

    min-height: 3.75em;

    padding-bottom: .875em;

    text-align: center;

}

.mainmenu ul {

    list-style: none;

    display: inline-block;

    margin: 0;

}

.mainmenu li {

    display: inline-block;

    margin: .875em .25em 0 .25em;

}

.mainmenu a {

    padding: 0 1.125em;

    text-transform: uppercase;

    color: #fff;

    line-height: 2em;

}

.mainmenu .current,.mainmenu li:hover,.mainmenu li:active {

    background-color: #643a79;

    border-radius: .25em;

}

.content {

    font-size: 1.125em;

    background-color: #fff;

    color: #3c4761;

    padding: 3.236em;

    min-height: 37.5rem;

}

.content:before,.content:after {

    content: " ";

    display: table;

}

.content:after {

    clear: both;

}

.contentwrap {

    position: relative;

}

.secondarynav {

    float: right;

    margin: 0 0 1.618rem 1.618em;

    border: .0625rem solid #e7f1f8;

    min-width: 18.75rem;

    padding: 0 1.618rem;

}

.breadcrumbs ul {

    list-style: none;

    margin-left: 0;

    padding-left: 0;

}

.breadcrumbs li {

    display: inline;

}

.breadcrumbs li:before {

    content: " > ";

}

.breadcrumbs li:first-child:before {

    content: " ";

}

.bigbutton {

    border-radius: 4px;

    cursor: pointer;

    background-clip: padding-box;

    background-color: #eb7d4b;

    box-shadow: inset 0 -4px 0 #c7693f;

    border: 0;

    margin: 3.236em auto;

    display: block;

    text-align: center;

    width: auto;

}

.bigbutton a {

    padding: 1.125em 4.375em;

    text-transform: uppercase;

    color: #fff;

    font-weight: bold;

    display: inline-block;

}

.candocols {

    width: 25%;

    float: left;

    text-align: center;

    margin: 4.854rem auto;

}

.site_footer {

    background-color: #3c5499;

    padding: 1.618rem 0;

    text-align: center;

}

.site_footer a {

    color: #fff;

    font-size: 1.5em;

    font-weight: 600;

    margin: 0 1.618rem;

}

.site_footer a:hover {

    color: #30bae7;

}

@media (max-width: 55rem) {

    .candocols {

        width: 50%;

        margin: 1.618rem auto;

    }

}

@media (max-width: 35rem) {

    .candocols {

        width: 100%;

    }

}

@media (max-width: 320px) {

    html {

        min-width: 320px;

    }

}

This CSS will handle all the essentials of layout, typography, color scheme and responsiveness.
Now we just need to pull that stylesheet into our main template, as well as adding some extras such as a header and footer.

Add Custom HTML

Copy all the code below and paste it into the "base.html" file in your site's "Templates" folder.
Templates > base.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Easy Static Site via DropPages.com</title>

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700' rel='stylesheet' type='text/css'>

    <link href='/main.css' rel='stylesheet' type='text/css'>

</head>

<body>

<header class="site_header" role='banner' itemscope itemtype='http://schema.org/WPHeader'>

    <h1 class="site_title"><a title="Easy Static Site on DropPages.com" href='/'>Easy Static Site</a></h1>

    <p class="site_tagline"><a title="Easy Static Site on DropPages.com" href='/'>Edit locally and host instantly on Dropbox with DropPages.com</a></p>

</header>

<div class="wrap">

    <nav class="mainmenu">

    {{PrimaryNavigation}}

    </nav>

    <main class="content">

    {{Body}}

    </main>

</div>

<footer class="site_footer" itemscope itemtype='https://schema.org/WPFooter'>

    <p><a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Google+</a> <a href="#">LinkedIn</a> <a href="#">Behance</a> <a href="#">Dribbble</a> <a href="#">GitHub</a></p>

</footer>

</body>

</html>

This HTML code does a few things. It pulls in the "main.css" stylesheet you just edited as well as a webfont from Google. It creates a static header showing a site title and tagline, and a footer with some links off to various social networking and portfolio sites. It also creates a space for a primary navigation menu to live in, as well as a space for content to appear.
The integration with DropPages happens via two very simple template tags:

{{PrimaryNavigation}} - This renders an unordered list of all the pages in your site, including the home page.
{{Body}} - This outputs the content from the files you will add to your "Content" folder.

Note the placement of these two template tags in the above HTML, with the {{PrimaryNavigation}} tag placed inside the nav element, and the {{Body}} tag placed inside the main element.
On refresh your site should now look like this:

Notice how the same "Hello world" content you saw on your new default site is still in place, but surrounded by the styling we have just added via the "main.css" and "base.html" files.
Now let's go ahead and add some of our own custom homepage content.

Adding Homepage Content

As part of our custom homepage content we'll be including four images. You can get your own copies of these images from the source files attached to this tutorial. After downloading and extracting the main EasyDropPagesStaticSite.zip file you will see a second zip file within named homepage_images.zip. Extract this file and place the images it contains into your site's "Public" folder.
Then copy all the code below and paste it into the "index.txt" file in your site's "Content" folder.
Content > index.txt

:base

<h1 align="center">Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>

<button class="bigbutton"><a href="/Contact+Us">Work With Us</a></button>

<h2 align="center">WE GOT SKILLS!</h2>

<hr class="short" />

<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="candocols">

<img src="webdesign.png">

</div>

<div class="candocols">

<img src="htmlcss.png">

</div>

<div class="candocols">

<img src="graphicdesign.png">

</div>

<div class="candocols">

<img src="uiux.png">

</div>

The first line of this file is the most significant as far as DropPages integration goes. It specifies which template you want your content to be rendered into.
In this case we want this content to be rendered into the "base.html" template, so the very first line of the file has to be: :base You can specify that a content file should be rendered into any template file, a feature we'll be using later.

Markdown or HTML?

DropPages content files can render either Markdown or HTML. If you're interested in learning more about Markdown syntax, check out Markdown: The Ins and Outs.
Note: one "gotcha" to be aware of is that if you wrap a line of Markdown in HTML it won't be rendered by DropPages. Another is that if you do use Markdown for text, there's no available syntax to center it.
For example, in the code above there are four images placed, each wrapped in a div with styling that will make them site side by side in columns. To add an image via Markdown you would use the syntax ![Alt text](/path/to/img.jpg). However I found that when image Markdown was wrapped in the divs I used above they did not render, outputing the actual Markdown code onto the page instead.
So, given we want our homepage to have images wrapped in divs, and we want centered text, all of the content added to the "index.txt" file is written in HTML.
Refresh your site and it should now look like this:

We now have some custom homepage content in place, so it's time to add some additional sub pages. Let's begin with the ubiquitous "About" page.

Add "About" Sub Page

To add extra pages to your DropPages site, all you have to do is create new .txt files in your "Content" folder. Links to them will then automatically appear in your "Primary Navigation" menu.
The name that appears in your menu will be taken directly from the name of your content file, i.e. My Page Name.txt. Furthermore, you can control the order of your menu links by prepending each content file with a number followed by a dot.
We want the second link on our menu to be to our "About" page, so in your "Content" folder create a new text file and name it: 2.About Our Studio.txt
Add the following code to your new file:

:base

About Our Studio

========

(Placeholder text from [http://notloremipsum.com/](http://notloremipsum.com/))

We
 are a fairly small, flexible design studio that designs for print and 
web. We work flexibly with clients to fulfil their design needs. Whether
 you need to create a brand from scratch, including marketing materials 
and a beautiful and functional website or whether you are looking for a 
design refresh we are confident you will be pleased with the results.

We offer the following services:

- Branding

- Logos

- Websites

- Web applications

- Web development – HTML5, CSS, jQuery

- Content Management Systems

- Responsive Web Design

- Illustration

- Business cards

- Letterheads and compliment slips

- Flyers

- Mailers

- Appointment cards

This time we don't need any div wrappers or centered text, so the code is written entirely in Markdown syntax.
Refresh the site and you should see a newly added "About Our Studio" link on your primary navigation menu. Click that link and you'll be taken to your new page, which should look like this:

Adding pages for your DropPages site is as simple as that. Just create a new text file, name it according to what you want to appear on your menu, fill it in with your content and you're done.

Creating a Page With Sub Pages

DropPages also gives you the ability to create second level sub pages. For example, you might want to create a page named "Meet the Team" which has links to a sub page for each team member. In this section I'll show you how.

Creating Extra Cascading Templates

For our "Meet the Team" page we want to show links to a sub page for each of our team members, however our base template doesn't include an area to display such links. As such we're going to create a custom template to handle this extra requirement.
DropPages templates have the ability to cascade, meaning one template can load itself into the {{Body}} tag of another template.
In our case we want to add an area with links to our subpages, but we still want to use the HTML from the "base.html" template. To make this happen, create a new file in your "Templates" folder and name it "withsubpages.html". Then copy and paste in the code below:
Templates > withsubpages.html

:base

<div class="contentwrap">

<div class="secondarynav">

<h3>Our People</h3>

{{SecondaryNavigation}}

</div>

{{Body}}

</div>

As you saw earlier in our "index.txt" content file, this template also uses the :base notation on the first line. This lets the system know that the HTML from this template should be loaded into the {{Body}} tag of the "base.html" template.
The actual page content will be loaded into the {{Body}} tag of the "withsubpages.html" template.
In case that's confusing at all, the loading process can be summarized as: base.html > {{Body}} > withsubpages.html > {{Body}} > page content.
In our new "withsubpages.html" file we've added a wrapper div around the page content, and added a box that will be floated to the right containing the template tag: {{SecondaryNavigation}}. This template tag creates an unordered list of any sibling or child pages.
Next, let's look at how you actually create the sub pages whose links will appear in that "Secondary Navigation" box.

Creating a Page Setup to Have Sub Pages

Whenever you want a page to have sub pages, instead of creating a .txt file in the "Content" folder, you create a directory. That directory will hold the top level page as well as any of its children.
You use the same naming conventions for the directory as you would for a .txt file, i.e. begin with a number to denote the position of the primary navigation link, then use whatever name you would like to have appear on the menu.
Create a folder in the "Content" directory and name it "3.Meet the Team".
Inside that folder create a file named "index.txt". The code you add to this file will form your top level "Meet the Team" page content.
Copy and paste in the code below:
Content > 3.Meet the Team > index.txt

:withsubpages

## Meet the Team

Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:

Ross
 has over 10 years experience in the industry. He is our Creative 
Director, digital designer, web designer and front-end developer. He is 
also pretty good with a sketchbook. Before starting the company Ross 
worked as a designer and studio manager for a design house who boasted a
 number of big name clients. Ross has brought his vast experience from 
this role to the work he does now.

Monica
 is Ross’ sister, our Art Director and specialises in graphic and print 
design. She has also worked with some big names and her designs have won
 her a number of industry awards.

Rachel
 and Chandler are our Junior Designers. Rachel is a web designer with 
knowledge of HTML and CSS and supports Ross on projects. Chandler has 
just finished his Graphic Design degree and enjoys continuing to learn 
from Monica and building his experience.

Joey
 and Phoebe focus on bringing new business to the company. They have won
 a number of big clients recently and both also have qualifications in 
project management to ensure that the projects run smoothly from start 
to finish.

Note: On the first line of this code we no longer add :base. Instead, we add :withsubpages as this specifies that we want the page content to be loaded into the "withsubpages.html" template.

Add the Sub Pages

With your main "Meet the Team" content in place in the "index.txt" file you're now ready to add sub pages. The process of adding files within this folder is the same as you followed to add the "About" page in the top level folder. Simply create a new .txt file, with a number for ordering, and a name to control its link text in the secondary navigation box.
Create a file named "1.Ross and Monica.txt" and add this content inside:
Content > 3.Meet the Team > 1.Ross and Monica.txt

:withsubpages

##Ross and Monica

Ross
 has over 10 years experience in the industry. He is our Creative 
Director, digital designer, web designer and front-end developer. 

He
 is also pretty good with a sketchbook. Before starting the company Ross
 worked as a designer and studio manager for a design house who boasted a
 number of big name clients. 

Ross has brought his vast experience from this role to the work he does now.

Monica
 is Ross’ sister, our Art Director and specialises in graphic and print 
design. She has also worked with some big names and her designs have won
 her a number of industry awards.

Again, we use the :withsubpages notation to have this page load into the "withsubpages.html" template.
Create a second file named "2.Juniors and Sales.txt" with this content inside:
Content > 3.Meet the Team > 2.Juniors and Sales.txt

:withsubpages

##Juniors and Sales

Rachel
 and Chandler are our Junior Designers. Rachel is a web designer with 
knowledge of HTML and CSS and supports Ross on projects.

Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.

Joey
 and Phoebe focus on bringing new business to the company. They have won
 a number of big clients recently and both also have qualifications in 
project management to ensure that the projects run smoothly from start 
to finish.

Refresh your site and you should see the new "Meet the Team" link on the navbar. Click it and your new page should show up with a link to each sub page in the secondary navigation box on the right side. Each of your subpages should also have the same layout, like this:

Two More Pages

Generally speaking, with static sites, five seems to be the magic number of pages to have (I've no idea why). So let's go ahead and add two more pages to your site to round out that number.
In your "Content" folder create a file named "4.Markdown Examples.txt" and add the following code:
Content > 4.Markdown Examples.txt

:base

Markdown Examples

=============

* Lorem ipsum

 * Lists

 * are

 * easy

and code?

        code.is {<trivial/>}

You can add links either inline like <http://google.com> or in [a more semantic way](http://en.wikipedia.org/wiki/Semantics)

The markup for *emphasised* or **really really emphasised** content is easy too.

sub title

---------

1. ordered lists are as you'd expect

2. except the number you write

1. don't have to be in order

images are less obvious, but relatively easy.

![another kitten](http://placekitten.com/g/200/300)

###h3 title

They are like links but with an exclamation mark.

####more content

Lorem ipsum etc

The content of this file gives you some working examples of things you can do with Markdown, such as creating lists, bolding, italicizing, showing code, adding images, adding links, adding headings and so on.
Again, in your "Content" folder create another file and this time name it "5.Contact Us.txt".
Content > 5.Contact Us.txt

:base

How to find us

--------------

![Map](http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|label:C|40.718217,-73.998284&sensor=false)

Get in touch

------------

Cal us: 01234 567890

Email us: email@example.com

The code in this page gives you an example of how you might place a Google Map on a contact page. For a more sophisticated contact page you might also like to look into using a service provider that gives you an embeddable contact form, given that DropPages supports static resources only.
Your final site, with all five pages in place, should now look like this;

Dealing with 404 Errors and Cached Content

DropPages is a very cool system, however at the moment it seems to have the tendency to hold onto cached files like a squirrel with a mouthful of chestnuts the day before winter.
You might find that if you make changes within your content files they don't show up, or that if you change a page name you get a 404 error when attempting to visit it. There is a "Publish now" button in the my.droppages.com dashboard, however in my tests it didn't seem to help.
One way I found to push through changes that weren't showing up was to add an extra file to the "Content" folder, named anything random e.g. flushme.txt. The system would detect the new file and then update the rest of the site in the process, after which I could delete the file again.
However this didn't always work with 404 errors. In some cases I found the only way to get rid of a 404 error was to go with a totally new name for the page file/folder, e.g. from 2.About Us.txt to 2. About Our Studio.txt, and then again add a "flushme.txt" file to force the system to update and find the updated name in the process.

Extras

There are a few extra features which can be taken advantage of in the DropPages system that we didn't cover above, so let's take a quick look at them now.

Sitemap

Though it's unlikely to be necessary on a small site, if your site grows and you want to have a sitemap you can create a custom template and include in it the tag {{Navigation}}. This tag generates an unordered list of all the pages in your site. Create a page using your custom template with only a "Sitemap" heading as its content and hey presto, you have a sitemap.

Hidden Pages

If you have a page for which you don't want a link to appear in navigation, prepend its name with an underscore. For example, a sitemap content file might be named "_sitemap.txt".

Custom Error Templates

As well as creating custom templates specifically to display content, you also have the option to create templates that control what visitors will see if they encounter an error or if a page is not found. Simply create template files named "Error.html" and "PageNotFound.html" and include in them whatever you would like. You can see examples of these template files in the "Basic" theme available for download from: http://droppages.com/themes

Breadcrumbs

If you'd like to include a breadcrumb trail in any of your templates, add the tag {{Breadcrumbs}}. This will output the ancestors of the current page as an unordered list.

Custom Tags/Sections

As well as having your content render where the {{Body}} tag is placed in your template, you can also add custom tags and have sections of your content render into them.
For example, in addition to the regular {{Body}} tag you might add a custom tag to a template, like {{Mycustomtag}}.
Then when creating your content file you would include the notation @Body on the line above the content you want to output through the {{Body}} tag, and @Mycustomtag above the content to show where the {{Mycustomtag}} tag is, e.g.

:customhometemplate

@Body

Welcome to our amazing business

@Mycustomtag

This month's special 50% off!

Wrapping Up

DropPages really is quite a clever piece of work, especially when you consider it was created as a side project by one person, Dave McDermid.
Free of charge, you have a usage limit of up to 50MB. To put that in perspective the example we've just run through used only 22Kb. However if you'd like to increase the usage limit to 1GB as well as enable custom domains you can upgrade to a paid version with the first two weeks free, then £5.00 GBP per month thereafter.

Useful Links

droppages.com
keep up with news and updates via droppages.com/updates
@droppages on Twitter

Krobknea

Using DropPages for a Super Easy Static Website