Using DropPages for a Super Easy Static Website

by
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:
  1. index.txt in the "Content" folder
  2. main.css in the "Public" folder
  3. 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
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
: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:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
:base
 
About Our Studio
========
 
 
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
01
02
03
04
05
06
07
08
09
10
11
12
: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
01
02
03
04
05
06
07
08
09
10
11
12
13
: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
01
02
03
04
05
06
07
08
09
10
11
: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
1
2
3
4
5
6
7
8
9
: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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
: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.
 
 
###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
01
02
03
04
05
06
07
08
09
10
11
12
: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.
1
2
3
4
5
6
7
:customhometemplate
 
@Body
Welcome to our amazing business
 
@Mycustomtag
This month's special 50% off!
Advertisement

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

 

Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner