Like many of you reading, I am new to the world of blogging (at least, I hope I'm not the only newbie here!) Because my Boss, Jason, was tired of having to go back and forth through numerous applications while blogging, he created a DropBox Powered Blog! Jason even wrote his own article on this subject a couple of years ago. Feel free to check it out here before or after this new exciting read!
Simplicity in Blogging
Jason had the pleasure of teaching me step-by-step how to properly Dropblog, and now it's my turn to teach you! Jason's thought process in creating Dropblog was to create a folder structure in DropBox with simple rules that would automatically post the blogs and images onto our website. Thank goodness I'm doing this rough edit in a personal DropBox folder, or else it would already be out to the world wide web for all to see -- that's how simple it is to use.
If you're like me, and not necessarily "tech-savvy", the above picture may confuse you too. But for all you smarty-pants out there like Jason, the picture will make perfect sense in describing how each application works with one other to ultimately create the Dropblog! To break it down, this process allows you to:
Create or update a "project" or "article" in Markdown, converting it into a clear, understandable document.
Create or update an image or picture.
Remove files, either pictures or documents, that have been deleted from the folder structure.
Organization Made Easy
If you haven't already checked out Never Stop Building LLC online, I'd highly suggest you do so. You'll be able to check out our separate pages of Articles and Projects. We organize it as such, because sometimes Jason has "one-off" articles (or sometimes just rants in general) to write about, that may be unrelated to our current projects. Let's take a look at an example of how we like to organize:
Let's take a look at the image above. The very first column on the left, we have created a folder titled "dropblog". Once inside, we have 2 different folders titled "articles" and "projects". As you can see, now that we're inside the "projects" folder, we have 2 more separate folders titled "private" and "public". Pretty self-explanatory, right? Well, just in case it's not, the items in the "public" folder will go out for all of you to read! Anything in the "private" folder is for our eyes only. Capiche?
Now, notice in the above image that once inside this specific "dropblog" folder, we have 2 folders inside that are titled "articles" and "pictures" as well as the project.md file. This project.md file is very important because it's going to become the main page for this project online. This is basically an overview of the specific project we're working on, and then we can break it down even further by adding "articles" about the project. Let's take a look below...
Once we open up the "articles" folder, you can see that four different Markdown files have been saved. Jason obviously had a lot to say when he first introduced Dropblog to the world! As you can see, each file is saved in the same format, with dashes in between each word, to reflect exactly how it will post as a URL link. For example, the first article is saved as "auto-hosting-dropblog-images.md" so if you go to http://www.neverstopbuilding.com/auto-hosting-dropblog-images, you will find that exact article. Simple as that!
How did you include these pictures?
So, I think it would be most helpful if I include the "pictures" folder image first, and then explain how I magically got it here.
Since Jason is a genius, (I'm only sometimes a suck-up, ok?) he created this Dropblog so that we wouldn't have to surf the internet or link pictures through the internet at all! All we have to do is simply send photos from Instagram, Facebook, or our Camera to their specific Dropbox folder. As I like to say, everything has a "home", so make sure you place the correct photos into their respected folders. This way, you can use this simple code to insert the proper photos to your Dropblog as you please! See example below:
![Inside the Pictures Folder](../pictures/blogpost4.png)
Ta-da! I'm not even a Magician -- and you don't have to be either! I'm even going to break it down for you step by step, in case you're generally confused in life, as I so often am.
- Start with using an exlamation mark (!) first.
- Then, in the square brackets, (which you can technically leave blank, by the way) you will insert a brief descrption of the image you're including.
- Immediately following the square brackets, you will open a set of parantheses ( ( ) ).
- The number of dots in the parantheses represents how many "steps" it took to get into that particular folder of Dropbox. Then, of course, you simply list the folder's name followed by the file name that the image is saved under!
The Title Image
Speaking of pictures, it's important that we discuss how to create the Dropblog's "Title Image". Obviously, you'd like for your Title Image to be relative to whatever your project or article is about. For example, if you're writing about the Public School System, maybe your Title Image would be a picture of a school bus! But how you save this image file is key. Let's take a peek...
Whatever you choose for your Title Image, it must be saved as "Title.something" (whether that be .png or .jpg, etc.) Notice how I have that oceanic Dropblog image above saved as "title.png" in my "pictures" folder. Well, Dropblog is going to pick up on that word "title" and will automatically make that the Title Image as a nice header on our website for this project post! BOOM! Mind-blowing, right?
Now go Dropblog!
Alright, so now that you've got the basics of Dropblogging down, you can be on your merry way! Just remember, since you don't have to go directly onto the internet to post, take your time blogging and perfecting your draft the first time around -- It is after all, open for the world wide web to read!
Catch ya later, Bloggers!