Going From Dumb Little Idea to Real Website in Like 10 Minutes

0
82

I live in Bend, Oregon. I woke up with the dumbest idea ever that there should be a little food truck map website and it should be called Vend, Oregon. It’s not my finest idea, but hey, I’m full of those. Fortunately, we don’t have to spend all day on this.

1) Figure out what’s going to go on this dumb little website

Fortunately, all the hard work was already done. One of our local rags already created a list of them. They allude to a map multiple times, but it’s hard to dig it up. In searching around a bit, I found this which does have an embedded Google Map.

Perhaps this can be useful then! Let’s blow up this map and embed it properly!

2) Make the dumb site

Fortunately, Google Maps are embeddable. Let’s just slap their embed code in an HTML document:

<body>
<iframe src=”https://www.google.com/maps/d/embed?mid=1bg2tr60F_w395jAY-WW8JGbwSCM” width=”640″ height=”480″></iframe>
</body>

And have it cover the entire page:

html, body {
margin: 0;
height: 100%;
overflow: hidden;
}

iframe {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

Let’s use CodePen Projects for this, as that’ll get us another step closer to having this live.

The extra files there are just a Bend logo I fired through RealFaviconGenerator.

3) Buy the dumb domain name

This is the point where you really start to question the idea. But, go ahead and pull the trigger anyway. The internet needs you.

4) It’s dumb, but it it might as well be HTTPS

One big reason to use CloudFlare is you get HTTPS even on their free plan. Might as well take advantage of that. This means pointing the nameservers from your domain registrant over to CloudFlare.

5) Deploy the CodePen Project

You can deploy the site right out of CodePen Projects.

Note that you get some IP addresses there. Add those as A Records right in CloudFlare and you’re done!

6) Bask in your dumb idea

Swear to god, 10 minutes from start to finish.