Hallo zusammen, Hello everyone (english see below),
Hier möchte ich rudimentär zeigen, wie ich meine Webseite erstellt habe und diese dann mit einer eigenen Domäne verknüpft habe.
Erstellung einer Webseite mit Lovable.dev
Es gibt viele Wege, einen eigenen Code zu erstellen und zu bearbeiten. Ich benutze zwei Programieroberflächen (IDEs): Lokal verwende ich Visual Studio Code und im Web verwende ich https://lovable.dev. Letzteres hat den Vorteil, dass dort die KI gut integriert ist und man mit wenigen Prompts kompletten, state of the art Code generiert bekommt, dessen Ergebnis, wenn man will, auch direkt aus dem Internet erreichbar ist.
Ich gehe hier nur kurz auf die Besonderheiten ein:
- Hier erstellt man ein neues Projekt
- Hier gibt man den Prompt ein
- Hier togglet man zwischen dem Code und dem Ergebnis (also der Webseite)
- Hier wird eine Verbindung zu Git ermöglicht
- Hier wird der Code auf https://projektname.lovable.dev veröffentlicht
Nachdem man ein "Hello World" Programm (oder was auch immer) erstellt hat (Ja, Programmierkenntnisse sind durchaus von Vorteil, vielleicht geht es aber tatsächlich auch ohne), kann man den Code veröffentlichen (Punkt 5). Das Ergebnis sieht dann z.B. so aus:
Also schon ganz brauchbar. Man hat eine eigene Webseite und diese steht in der einfachen Variante im Internet zur Verfügung.
Die kostenlose Version von lovable.dev erlaubt nur 5 Prompts pro Tag und 30 pro Monat. Außerdem ist der Domänenname "fewo-mertens.lovable.app" nicht schön (wer weiß, was die Gäste denken, wenn sie "lovable" sehen (Rotlichbezirk?)).
Diese beiden Probleme bin ich wie folgt angegangen:
Verknüpfung mit Github
Unter Punkt 4 verbirgt sich eine Vernküpfung mit Github:
Wenn man den Anweisungen folgt, wird der Code als neues Projekt in Github angelegt und automatisch synchronisiert:
Und damit bin ich in der Lage den Code auch lokal zu verarbeiten:
Die Readme-Datei, die natürlich auch in Github zu finden ist, erklärt, wie man den Code nach lokal überträgt und synchronisiert.
In Visual Studio Code (VS-Code), kann man über die Plugins den Github Copiloten aktivieren. Der hat mehrere Modi, zwischen denen man wählen kann. Wenn man den Agenten-Modus wählt, kann man ähnlich arbeiten (prompten) wie in lovable.dev, allerdings ist man nicht auf die 5 Prompts pro Tag beschränkt und kann zwischen mehreren KI-Modellen auswählen.
mit dem Dreisatz:
git add .
git commit -m "Committext Blablabla"
git push
synchronisiert man den Code wieder mit lovable.dev. Und wenn man dort auf Publish/Update klickt, sind die Änderungen auch im Netz.
Was jetzt noch fehlt ist die Domäne:
Eigene Domäne erstellen
Die Domäne habe ich über den Provider https://strato.de bestellt:
Dort sucht man nach dem gewünschten Namen und Endung. Achtung bei den Preisen, die gelten nur für das erste Jahr, danach wird es einiges teuerer. Aber mit 24 €/Jahr komme ich klar.
Die Bestellung ist relativ schnell erfolgt und nach wenigen Minuten war die Domäne verfügbar.
Email einrichten.
In dem Paket enthalten ist auch eine freie Emailadresse, die ich mir hier konfiguriert habe:
Mit einem Emailclient und folgenden Angaben:
Mailaccount:fewo@amertens.me
MailPasswort
Imapserver: imap.strato.de:993
smtpserver: smtp.strato.de:465
komme ich nun an die Mails, die an fewo@amertens.me geschickt werden.
Die Webseite der eigenen Domäne zufügen
Wie erwähnt möchte ich, dass meine Webseite mit meiner neuen Domainadresse erreichbar ist. Diese Verknüpfung erfolgt über den Host, wo meine Webseite dem Internet zur Verfügung gestellt wird. Lovable.dev macht das nur in der Bezahlversion, aber es gibt Alternativen, z.B. Github Pages. Das ist ein Zusatzdienst von Github, also von dort, wo eh schon mein Code liegt.
Um das einzurichten muss man am Code etwas ändern:
In der Datei package.json änderte ich den Anfang wie folgt:
"name": "vite_react_shadcn_ts",
"private": true,
"homepage": "https://fewo.amertens.me",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:dev": "vite build --mode development",
"lint": "eslint .",
"preview": "vite preview",
"predeploy": "npm run build && echo fewo.amertens.me > dist/CNAME",
"deploy": "gh-pages -d dist"
},
Es sind also die Homepage-Adresse und ein paar Scripte hinzugekommen.
Das Deploy Script erzeugt einen Dist-Ordner, in den die statische Webseite rein kopiert wird. Dieser Ordner wird als "gh-pages" Branch erzeugt. Dort wird auch eine Datei Namens CNAME erstellt, die als Inhalt meinen Domänenname hat.
Mit dem Befehl:
npm run build
wird dieser Dist-Ordner erstellt.
Mit dem Befehl:
npm run deploy
wird dieser Dist-Ordner deployt.
Jetzt muss in Github auch bekannt gegeben werden, dass dieses Projekt aus dem Internet erreichbar ist und wo die Information über den Domänennamen liegt. Das konfiguriert man im Projekt unter Settings/Pages:
Wenn also jemand bei github.io vorbei browst, wird er, wenn er eigentlich nach fewo.amertens.me will, auf meine Webseite weiter geleitet.
Aber wie landet der User bei github.io, wo er doch fewo.amertens.me in seinen Browser eingetippt hat?
Domaineinstellungen bei Strato
Das liegt am DNS (Domain Name Service). Dies ist ein Adressregister wo hinterlegt ist, wie man welchen Server erreicht. Dort muss fewo.amertens.me umgeleitet werden nach achimmertens.github.io. Und das tun wir bei unserem Domänenprovider Strato wo wir in der Domainverwaltung unter DNS den CNAME (der Name, wo das Githubprojekt gefunden wird, nämlich achimmertens.github.io) eintragen:
Ergebnis testen
Mit
npm run preview
kann man lokal den Inhalt vom Distordner sehen:
Jetzt lassen wir noch mal laufen:
npm run build
npm run deploy
Und mit viel Glück findet man -Tadaaaa - die Webseite nun unter der gewünschten Domäne:
Übrigens: Die Webseite ist echt, wer möchte darf dort gerne unsere Ferienwohnung buchen.
Fazit
Jetzt brauche ich lovable.dev nicht mehr, kann es aber als "Zusatzintelligenz" weiter nutzen (solange ich mit dem synchronisieren aufpasse, sonst gibt es Merge Konflikte). Ich habe nun meine Webseite unter github Pages laufen und dort mit meinem Domänennamen verknüpft. Ich kann jetzt Emails an meinen eigenen Domänennamen empfangen.
Das war es fürs Erste, bis demnächst,
Achim Mertens
English
Hello everyone (English see below),
Here I'd like to show, in a nutshell, how I created my website and then linked it to my own domain.
Creating a website with Lovable.dev
There are many ways to create and edit your own code. I use two programming interfaces (IDEs): locally, I use Visual Studio Code, and on the web, I use https://lovable.dev. The latter has the advantage that the AI is well integrated, and you can generate complete, state-of-the-art code with just a few prompts, the results of which can also be accessed directly from the internet if you wish.
I'll just briefly touch on the specifics here:
- This is where you create a new project.
- This is where you enter the prompt.
- This is where you toggle between the code and the result (i.e., the website).
- This is where you enable a connection to Git.
- This is where you publish the code to https://projectname.lovable.dev.
After you've created a "Hello World" program (or whatever) (yes, programming knowledge is definitely beneficial, but you might actually be able to do without it), you can publish the code (point 5). The result looks something like this:
So it's quite usable. You have your own website, and the simple version is available online.
The free version of lovable.dev only allows 5 prompts per day and 30 per month. Also, the domain name "fewo-mertens.lovable.app" isn't pretty (who knows what guests think when they see "lovable" (red light district?)). I addressed these two problems as follows:
Linking to Github
Under point 4, there is a link to Github:
If you follow the instructions, the code will be created as a new project on Github and automatically uploaded. Synchronized:
And with this, I'm also able to process the code locally:
The readme file, which can also be found on Github, explains how to transfer the code locally and synchronize it.
In Visual Studio Code (VS Code), you can activate the GitHub Copilot via plugins. It has several modes to choose from. If you choose agent mode, you can work (prompt) similarly to lovable.dev, but you're not limited to the five prompts per day and can choose between multiple AI models.
Using the rule of three:
git add .
git commit -m "Commit text Blablabla"
git push
You synchronize the code back with lovable.dev. And if you click Publish/Update there, the changes are also available online.
All that's missing now is the domain:
Create your own domain
I ordered the domain through the provider https://strato.de:
There, you search for the desired name and extension. Be careful with the prices; they only apply for the first year; after that, it gets considerably more expensive. But €24/year is fine with me.
The order was completed relatively quickly, and the domain was available within a few minutes.
Set up email.
The package also includes a free email address, which I configured here:
With an email client and the following information:
Mail account: fewo@amertens.me
Mail password
IMAP server: imap.strato.de:993
SMTP server: smtp.strato.de:465
I can now access the emails sent to fewo@amertens.me.
Add the website to your own domain
As mentioned, I want my website to be accessible with my new domain address. This link is made via the host where my website is made available to the internet. Lovable.dev only does this in the paid version, but there are alternatives, such as Github Pages. This is an add-on service from Github, where my code is already located.
To set this up, you need to change some of the code:
In the package.json file, I changed the beginning as follows:
"name": "vite_react_shadcn_ts",
"private": true,
"homepage": "https://fewo.amertens.me",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:dev": "vite build --mode development",
"lint": "eslint .",
"preview": "vite preview",
"predeploy": "npm run build && echo fewo.amertens.me > dist/CNAME",
"deploy": "gh-pages -d dist"
},
So, the homepage address and a few scripts have been added.
The deploy script creates a dist folder into which the static website is copied. This folder is created as a "gh-pages" branch. A file named CNAME is also created there, which contains my domain name.
This dist folder is created with the command:
npm run build
.
This dist folder is deployed with the command:
npm run deploy
.
Now, we also need to announce on Github that this project is accessible from the internet and where the information about the domain name is located. You configure this in the project under Settings/Pages:
So if someone browses past github.io, they'll be redirected to my website when they actually want to go to fewo.amertens.me.
But how does the user end up at github.io when they typed fewo.amertens.me into their browser?
Domain settings at Strato
This is due to the DNS (Domain Name Service). This is an address register that stores how to reach each server. There, fewo.amertens.me must be redirected to achimmertens.github.io. We do this with our domain provider Strato, where we enter the CNAME (the name where the GitHub project is found, namely achimmertens.github.io) in the domain management under DNS:
Test the result
With
npm run preview
you can locally preview the contents of the dist folder see:
Now let's run it again:
npm run build
npm run deploy
And with a bit of luck, you'll find—ta-daaa—the website under the desired location. Domain:
By the way: The website is real; anyone who wants to can book our vacation apartment there.
Conclusion
Now I don't need lovable.dev anymore, but I can continue to use it as "additional intelligence" (as long as I'm careful with synchronization, otherwise there will be merge conflicts). I now have my website running under Github Pages and linked it to my domain name there. I can now receive emails to my own domain name.
That's it for now, see you soon,
Achim Mertens