Building a Blog in One Day with Small Victories

Last weekend I launched a weekly newsletter titled Manila Folders, and this article covers how I set up the site in about a day. What’s Manila Folders? In short, it’s a music newsletter with no focus on any single genre, no intended themes, and no standard of quality, length, or medium. Instead, it’s a catalog of untitled folders containing music related clippings. If you’re interested in what it’s about, you can check it out here. Today’s article is less about what Manila Folders is and more about how I made the site.

Within the last year or two, I came across Small Victories which, as they describe it, “takes files in a Dropbox folder and turns them into a website” and I’ve been dying to make use of it. It’s a Content Management System-less platform which feels super bare bones and straight to the point. While it can be a really simple solution for documents, splash pages, presentations, and more, it also has the potential to be built into more robust frameworks.

While I’d like to experiment with Small Victories some more and see what else it’s capable of, I’m going to focus on how I set up Manila Folders for the time being.

Why Small Victories

Aside from simply wanting to test out Small Victories, I wanted to find a way that I could “localize” all of my files for the site for easy access and to make gathering content easier. By keeping everything sourced to a Dropbox folder, I can easily drop images into a folder that I want to write about later, and I can quickly draft up posts that can later be drag and dropped into a folder that’s ready to be posted.

Since I wanted this to be intentionally minimal, I really didn’t want sign up for a whole hosting plan that offered way more than I needed and would cost way more than I wanted to pay. With Small Victories, you have two options: Free or Plus. In the Free version, you can use all of their themes aside from the HTML option, but you can’t use a custom domain name nor remove their logo from the bottom. The Plus plan which only costs $36 year allows you to use a custom domain, remove their logo, and use their HTML theme—all of which I wanted.

Setting up a sign up page

Before launching Manila Folders, I wanted to get a simple splash page up so that people could sign up for the newsletter. I knew it’d be really simple, so I went ahead and just coded my own HTML page and tossed it in the root folder. However, I could have saved myself a bit of time by using their Campaign theme which does exactly what I had already done.

So if you’re looking to simply gather some emails prior to setting up a site, you may want to check out Small Victories Campaign theme. Alternatively, if you’re using a service such as MailChimp or Tiny Letter (which I’m using for this) you can simply link people directly to the sign up page they generate for you.

But again, this isn’t the route I took. (Largely because I wanted to have a bit more control over how it was all designed.) In terms of how I made my sign up page, most of the code came directly from Tiny Letter. Just as they make you your own sign up page, they generate an embed code that you can insert on a page just as you would an embed youtube video.

In terms of what I had actually coded, it look a little like this:

<html>
  <body>
    <div id="container">
      <header>
        <h1>Manila Folders</h1>
      </header>
      <div class="description">
        <p>Description</p>
      </div>
      <div class="form-container">
        <form style="text-align:center;" action="https://tinyletter.com/manila-folders" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/manila-folders', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"><input type="text" name="email" placeholder="Email" id="tlemail" /><input type="hidden" value="1" name="embed"/><input id="tlsubmit" type="submit" value="Subscribe" /></form> 
      </div><!--/form-container-->
    </div><!--/container-->
  </body>
</html>

And with a little bit of CSS styling, it looks like this:

Deciding against the Document and Blog themes

Originally, I was thinking that the Document theme would be stylistically perfect for Manila Folders since it—as the name of the theme describes—feel likes a document. With the Document theme, you can drop all of your markdown or text files into the root folder and it’ll generate a link in the navigation to the left for each file.

One of the reasons I decided against this was because I wasn’t sure how it’d hold up with a large amount of navigation items (as I plan on keeping up this newsletter for a while). I also wanted to include a newsletter sign up box on each page beneath the site description which I couldn’t easily do.

From there, I started to look into the Blog theme to see if that’d be a better fit. A big appeal of the Blog theme is the pagination on each blog post, meaning you can easily navigate to the next post. But I ran into similar problems as I did with the Document theme: I couldn’t easily add the sign up box, each post was limited to a single mark down file (I’ll expand more on this later), and I had a particular URL structure I wanted to use.

In both theme formats, pages which are formatted as:

Your Website
 └── Page-01.md
 └── Page-02.md
 └── ...

Would render the pages: your-website.com/page-01 and your-website.com/page-02 . While this could have worked for me, there’s a few reasons why I opted to go a different route.

Folder Structure

There were two things I wanted: a particular URL structure and the ability to collage posts together using multiple files (not just a single markdown file). So I decided to set up the homepage using an HTML theme with a few liquid tags and build each individual page using the Blank theme. So here’s how the Dropbox folder looks:

Manila Folders (HTML Theme)
 └── _assets
 └── content
 └── folder
   └── _drafts
   └── _images
   └── 001 (Blank Theme)
   └── 002 (Blank Theme)
   └── ...
 └── includes

In the last section, I mentioned how pages/URLs are formatted. So following the logic from that section, each post on Manila Folders would follow the format of Manila-Folders.com/folder/[folder number]. While this isn’t an integral detail to the site, it’s one of the things I wanted. One, I liked how it looks. Two, it’ll be super easy for people to navigate/jump to a random page if they want to.

About the folders

In the _assets folder, I keep some working files for smaller site details such as a social card, video player thumbnail, favicon, and a fonts folder (for when I decide to use some more custom typography).

The content folder probably isn’t super necessary, but I keep two text files in there for the site title (Manila Folders) and the site description. These two details are referenced in the HTML file for the home page.

The includes folder is similar to the content folder in that it’s not mega necessary, but is left over from when I was going to use the HTML theme for individual pages. In it, I have three files: foot.html, head.html, and zz-footer.html. All of which are referenced on the homepage and could honestly just be hardcoded into the index.html file in the homepage since these aren’t being referenced any where else. ¯_(ツ)_/¯

The only file of significance in that folder is the zz-footer.html file. This file contains the site description, sign up box, and Archive of published Folder links. This file is actually used on each Folder post, but I’m literally just dragging and dropping it into each Folder for the time being because the Blank theme used for each Folder doesn’t allow liquid tags in HTML files which I’ll expand on in the next section).

Creating a collage-like post format

Considering Manila Folder isn’t intended to follow any specific format in that it each posts isn’t structured the same, content is bound to vary, and it’s supposed to feel a bit like a collage, I wanted to be able to easily collect images and write drafts that could later just be thrown into a folder to generate a post from those files.

So now if I come across a song I want to feature, I can quickly draft up a post or drop a URL into the drafts folder so I can expand on it later. Then all published posts will be placed into archive folder so I can quickly see what I’ve already covered.

The images folder works similarly to the drafts folder. It’s going to be a place that I can just toss images that’ll be referenced in posts. It’ll contain a mixture of used and un-used photos, but that won’t be a problem since they’ll always be supported by some sort of text and it’s likely that I’ll recycle some images.

The image above shows how all of the files come together to form an actual post and better reveals why the Blog and Document theme formats weren’t quite right for what I wanted. As you can see with this Folder 001 shown above, it’s made up of several markdown files which all serve as different sections of a single post. This is how it relates back to feeling like a collage. I plan on gathering a bunch of content in the drafts and images folder and each week just collage together a variety of those posts by copying them into a folder together.

How each post works

The _sv_settings.txt file is what lets Small Victories know to render the page which is why the drafts and images folders are active pages. So in this file, you can define the page title, theme, and sort order. I’m using the Blank theme because it just renders whatever you toss into the folder, and I’m using the default sort order which is alphabetical.

The 01_number.txt and 02_date.txt files are fairly simply. The number is just the folder number, and the date is the date of the post. I want them to be tossed at the top of the page which is why I number them 01 and 02.

Everything beneath that is the actual post content which I also numbered because I wanted to appear in a specific order. So If I didn’t number them, the Andre post would have came first followed by Curtis Harding and so on.

Another thing I really like about Small Victories is that I can write stuff in markdown and it’ll take the markdown file and render it as html on the page. In the screenshot above, you can see how one of the sections was written. It starts out with an image, is followed by a link, a heading, a few paragraphs, a Spotify album, and then ends with a horizontal rule. If you’re interested in learning more about markdown syntax, check out this Markdown Cheatsheet .

At the beginning of the article I included an image, but I just as easily could have placed the image directly into the folder and numbered it accordingly to have gotten it to be rendered before all of the content which followed. Why didn’t I do that? ¯_(ツ)_/¯ In this instance I just decided not to.

The last file in each post is the zz_footer.html file which includes the site description and archive links. Ideally, this would have simply been a quick liquid reference in an html file that read something like {{ includes.footer }} and then the file being reference in the includes folder would generate that whole section automatically, but unfortunately the Blank theme doesn’t support liquid and so I have to manually update each footer. ? I’m sure I’ll find a way to better automate this, but for now this isn’t too difficult. If you have no idea what liquid is, don’t worry, I really don’t know much either. But since I’m not really using it, and I still don’t know much about it, I’ll just leave it at that.

And that’s how Manila Folders is built and functions! I’m sure it’ll change a bit and evolve over time, but that covers (for the most part) how I set up Manila Folders in a day or two. I didn’t touch on any CSS stuff, but if you’re interested in seeing more posts like this and want to see more details like that, just let me know! Oh, and you can read/subscribe to Manila Folders here .