This is a Wunderbucket site

To get started, just open up index.html with your favorite code editor and start making changes. They’ll show up here as you edit.

Here's some of the features that you get with your Wunderbucket site:

A public domain

When you publish your Wunderbucket site it goes directly to your domain. You can add a custom domain any time you want by flipping your site from “Dev” to “Live”.

https://this-is-a-wunderbucket-site-smmall.wunderbucket.dev

A local server

Every Wunderbucket site comes with a localhost server that automatically reloads when you make changes.

Need more?

If you want to do a bit more with your HTML, you can use our simple Merge.js templating framework. Merge.js is a simple templating framework that makes it easier to manage your html websites without having to learn a backend language.

Includes

You can include HTML files with by adding the data-merge-include attribute to an element.

Learn more. 

<div data-merge-include="footer.html"></div>

<!-- will automatically include the footer.html file -->

Loops

If you have a lot of the same elements on a page and want to create a loop that just repeats them, you can use the data-merge-repeat attriute.

Learn more. 

<ul class="links" data-merge-repeat="items">
  <li>
    <a href="${link}">${label}</a>
  </li>
</ul>

<script data-type="merge-script">
document
  .addEventListener('DOMContentLoaded',
 () => {
  merge.loadState({
    items: [{
        link: "https://nunn.ink",
        label: "Personal Site"
      },
      {
        link: "https://twitter.com/LeviNunnink",
        label: "Twitter"
      },
      {
        link: "https://github.com/LeviNunnink",
        label: "Github"
      }
    ],
  });
}, false);
</script>

Markdown

Save your content in Markdown files. Use the data-merge-include-markdown attribute and Merge will include it parse it into HTML for you.

Learn more. 

<div data-merge-include-markdown=”my-article.md”></div>

// my-article.md

## Hello 

- Here’s a cool article
- Pretty neat

Databases

Merge can load JSON content from any accessible URL. For simple databases, you can store it as a JSON file right in your local directory. We’ve created a examples.json example for this site. And we're loding it in on line 135.

Learn more. 

// examples.json

{
   "title": "Hello World",
   "links": [
     { href: "https://wunderbucket.io", "name": "Wunderbucket" },
     { href: "https://github.com/levinunnink/merge.js", "name": "Merge.js" }
   ]
}

// index.html

document
 .addEventListener('DOMContentLoaded', () => {
  merge.loadState('/examples.json');
}, false);

100% static, clean output

When you upload your site to Wunderbucket, we run Merge on the server to generate 100% static output so there's no loading delay like you might see on your localhost site. We also remove every trace of Merge, so your source code stays clean and pretty.

Just try making a change and publishing this site. View the source code on your public domain once it's done to see what we're talking about.