I’m on a quest to find the simplest, cheapest way to get the content you create to show up on a browser that’s pointed to a domain name that you own.
Right now the easiest front-runner is Pancake.io. It’s free, and it uses Dropbox, which is also free. In a nutshell, it lets you create content on your computer, save it in a Dropbox folder, and then it will magically show up on the internet.
If you want to use Pancake as your host you need to be aware that it’s only going to be able to host static files. In general this will not be very limiting, but be aware that you are not going to be able to install php, ruby on rails, express.js or any other fancy web framework using Pancake. If that sentence made you sad you should look into Digital Ocean or Heroku, if you have no idea what I just said, skip to the next paragraph.
Project Goal
We are going to create a webpage that says “Hello World” when you type in
http://insert-your-cool-domain-name.com
into a web browser. If you want to create something a little more useful, go for it. Pancake allows you to use any html/css/javascript that your little heart desires. If you want to know what a css is, I suggest you take the Intro to HTML class at over at Code Academy.
Prerequisites:
1. Dropbox Account
If you don’t have one sign up here: https://db.tt/28z9hzb, and we’ll both get a 500MB bonus), you are also going to need to install the Dropbox desktop application.
2. Domain Name
If you have not registered for one you should use iwantmyname.com to do it, they are the easiest in my opinion. From here on out I am going to assume that your domain is called marcelshell.com, every time you see that, substitute whatever your domain really is.
Getting started
Sign up for an account at Pancake.io, and then allow it to connect to your Dropbox account. If it asks to sync your entire Dropbox folder, say no. It only needs to create a folder called Apps/Pancake.io.
On your computer create a folder inside of Dropbox/Apps/Pancake.io, called marcelshell.com
Over at panckake.io click “Create New Project” and fill in the fields as shown in the image below and click “Create Project”.
You should now see something like this in your “Projects” view.
Click the project, then click “Edit Project” and put your domain name in the “URL” field, and click “Update Project”.
Now we need to create an index.html file and put it in the the Dropbox/Apps/Pancake.io/marchelshell.com folder we already created. This file can say anything, but for fun let’s put in a “Hello World” file.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello world.
</body>
</html>
You can also use this file I created and save the page as index.html into your Dropbox/Apps/Pancake.io/marchelshell.com folder.
Wrapping Up
We are almost done. You can see your progress by going to marchelshell.pancakeapps.com and make sure that your browser is greeting the earth.
In order to get marchelshell.com to display the same content as marchelshell.pancakeapps.com, we need to tell the internet where your website is located. Pancake.io has some documentation, which you should read, but I will provide an overview.
Log into the website you used to register the domain. If you used iwantmyname.com, go here https://iwantmyname.com/dashboard/dns then click “Edit DNS Records”. Almost every registrar will have some sort of “Edit DNS” setting or menu option. You need to add a DNS A record to tell the world where your website is located, in this case it is on the pancake servers which have an IP address of 54.148.44.157 always check out pankcake.io’s documentation because they have updated this ip a couple of times in the past.
Click “add” and then “save”.
That’s it! Now you just need to wait until the DNS propogates throughout the internet, something like 6-24 hours, maybe faster. Nobody really knows, it’s black magic at this point. Something about a series of interconnected tubes or something.
Now take a nap or go to work or whatever, and a few hours later check to see if http://marcelshell.com and http://marcelshell.pancakeapps.com say the same thing. If so, you just created a website. If not, well, shoot me an email, cris@nobleintentstudio.com, and I will try to help you out.
Now anytime you want to change what your website says, just change the index.html on your computer to say whatever you want. Go wild with CSS. Break your browser with JavaScript. Embed silly videos. It is yours to do with as you please. As soon as you save the file it will auto-magically sync with the pancake servers and to the rest of the internet.