Von einer dummen kleinen Idee zur echten Website in etwa 10 Minuten

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich lebe in Bend, Oregon. Ich bin auf die wohl dümmste Idee überhaupt gekommen, dass es eine kleine Foodtruck-Karten-Website geben sollte und sie Vend, Oregon heißen sollte. Es ist nicht meine beste Idee, aber hey, davon habe ich viele. Glücklicherweise müssen wir nicht den ganzen Tag daran arbeiten.

1) Herauszufinden, was auf diese dumme kleine Website kommt

Glücklicherweise war die ganze harte Arbeit bereits erledigt. Eines unserer lokalen Blättchen hatte bereits eine Liste davon erstellt. Sie deuten mehrfach auf eine Karte an, aber es ist schwer, sie zu finden. Bei einer kurzen Suche habe ich diese hier gefunden, die *eine* eingebettete Google Maps-Karte enthält.

Vielleicht kann das also nützlich sein! Lasst uns diese Karte vergrößern und richtig einbetten!

2) Die dumme Website erstellen

Glücklicherweise sind Google Maps einbettbar. Fügen wir einfach deren Einbettungscode in ein HTML-Dokument ein

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

Und lassen sie die gesamte Seite abdecken

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

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

Nutzen wir CodePen Projects dafür, da uns das einen Schritt näher daran bringt, dies live zu schalten.

Die zusätzlichen Dateien dort sind nur ein Bend-Logo, das ich durch RealFaviconGenerator laufen ließ.

3) Den dummen Domainnamen kaufen

Das ist der Punkt, an dem man die Idee wirklich in Frage zu stellen beginnt. Aber, zieh trotzdem durch. Das Internet braucht dich.

4) Sie ist dumm, aber sie sollte gleich HTTPS sein

Ein großer Grund, CloudFlare zu nutzen, ist, dass man auch im kostenlosen Plan HTTPS bekommt. Nutze das ruhig aus. Das bedeutet, dass die Nameserver deines Domain-Registrars auf CloudFlare umgeleitet werden müssen.

5) Das CodePen-Projekt bereitstellen

Du kannst die Website direkt aus CodePen Projects bereitstellen.

Beachte, dass du dort einige IP-Adressen erhältst. Füge diese als A-Einträge direkt in CloudFlare hinzu und du bist fertig!

6) In deiner dummen Idee schwelgen


Beim heiligen Gral, 10 Minuten von Anfang bis Ende.