Verified Commit 885a735a authored by Tom Riedl's avatar Tom Riedl

馃摑 #1 Added new website article

parent a71c985c
Pipeline #236764812 passed with stages
in 3 minutes and 22 seconds
......@@ -9,6 +9,9 @@
"DSGVO",
"Fidor",
"HODL",
"Hetzner",
"Hoster",
"Hostern",
"ICOs",
"Krypto",
"Kryptob",
......@@ -22,14 +25,17 @@
"MCMC",
"MIOTA",
"MITM",
"PWAs",
"Poloniex",
"Riedl",
"Sfinex",
"Slangbegriff",
"Strato",
"Strg",
"TOTPs",
"Tokensale",
"Verifizierungsprozess",
"Versionierung",
"YOGRBLF",
"abkuerzungen",
"aendern",
......@@ -46,7 +52,13 @@
"eosfinex",
"fuer",
"funktioniert's",
"gehostet",
"gemerged",
"getaggte",
"getrackt",
"gitlab",
"hlen",
"hoste",
"hrung",
"hrungen",
"kryptowaehrungen",
......
# Tom Riedl - Startseite
<img src="/logo-200.png" style="float:left;margin-right:1em;width:100px;height:100px;" alt="Tom Riedl Logo klein" />
Willkommen bei tomriedl.com - Beitr盲ge und Anleitungen zu Kryptow盲hrungen, Trading, Technik, Programmieren und anderen Themen.
[脺ber Tom Riedl](/uber/) - [Tags](/tag/) - [Changelog](/changelog/) - [Impressum](/impressum/)
## Neueste Beitr盲ge
- `2021-01-03` [Neue Website - Warum und wie](/website-homepage/neue-website-warum-und-wie/)
- `2020-12-28` [Abk眉rzungen und Begriffe der Kryptowelt](/krypto/abkuerzungen-definitionen-und-begriffe-der-kryptowelt/)
- `2019-16-10` [Anleitung f眉r neues Bitfinex Affiliate/Referral-System](/version1/anleitung-fuer-neues-bitfinex-affiliate-referral-system/)
- `2018-07-20` [Coinlend-App](/version1/coinlend-app/)
## Sicherheit
- [Two-Factor Authentication / Multi-Factor Authentication (TFA, 2FA, MFA, TOTP)](/version1/two-factor-authentication-multi-factor-authentication-tfa-2fa-mfa-totp/)
......@@ -47,3 +49,5 @@ Anleitungen und Informationen zu Kryptow盲hrungen, Wallets und Krypto-B枚rsen.
- [Telegram Tipps und Tricks](/version1/telegram-tipps-und-tricks/)
- [Telegram-Account mit zweistufiger Best盲tigung absichern (Two-Step-Verification)](/version1/telegram-account-mit-zweistufiger-bestaetigung-absichern-two-step-verification/)
## Websites und Homepages
- [Neue Website - Warum und wie](/website-homepage/neue-website-warum-und-wie/)
\ No newline at end of file
# Neue Website - Warum und wie
<img src="/logo-200.png" style="float:left;margin-right:1em;width:100px;height:100px;" alt="Tom Riedl Logo klein" />
Die alte Version war mit WordPress aufgesetzt. In Zeiten von Progressive Web Apps (PWA), Headless-CMS und REST-APIs geh枚rt WordPress wohl eher zu einem Relikt vergangener Zeiten. Den Umbau hatte ich also schon lange vor und habe ihn nun endlich umgesetzt. Wie die aktuelle Website aufgesetzt ist, erkl盲re ich in diesem Artikel.
## Kurzzusammenfassung
| Kategorie | Umsetzung |
| :--- | :--- |
| Quelltexte | [gitlab.com/TomRiedl/tomriedl.com](https://gitlab.com/TomRiedl/tomriedl.com) |
| Tickets | [gitlab.com/TomRiedl/tomriedl.com/-/issues](https://gitlab.com/TomRiedl/tomriedl.com/-/issues) |
| Hosting | [Serverprofis](SERVERPROFIS_URL) |
| TLS | [Let's Encrypt](https://letsencrypt.org/) |
| CMS/Framework | [Codedoc](https://codedoc.cc/) |
| Tools | [Visual Studio Code](https://code.visualstudio.com/), [GitKraken](https://www.gitkraken.com/invite/8dEAeKHi), [GitLab Web-IDE](https://docs.gitlab.com/ee/user/project/web_ide/) |
## Vorher - Nachher
**Screenshot der alten Version**
![Screenshot tomriedl.com alte Version](screenshot-tomriedl.com-alt-h300.png)
**Screenshots der aktuellen Version**
![Screenshot tomriedl.com neue Version dunkel](screenshot-tomriedl.com-neu-dark-h300.png) ![Screenshot tomriedl.com neue Version hell](screenshot-tomriedl.com-neu-light-h300.png)
| Kategorie | Vorher | Nachher |
| :--- | :--- | :--- |
| Website-Technologie | &bull; WordPress, PHP | &bull; Statische Website ohne server-side Rendering<br />&bull; [Codedoc](https://codedoc.cc/) |
| Verwaltung der Inhalte | &bull; Admin-Panel von WordPress | &bull; Alle Artikel/Seiten liegen als Markdown-Dateien in einem [Repository bei GitLab](https://gitlab.com/TomRiedl/tomriedl.com)<br />&bull; 脛nderungen entweder lokal und Git Commit/Push oder [GitLab-Web-IDE](https://docs.gitlab.com/ee/user/project/web_ide/) |
| Versionierung | &bull; keine | &bull; [Semantic Versioning](https://semver.org/lang/de/) |
| Nachverfolgbarkeit der 脛nderungen | &bull; keine | &bull; [Changelog](/changelog/)<br />&bull; [Versionshistorie](https://gitlab.com/TomRiedl/tomriedl.com/-/releases) |
| Progressive Web-App | &bull; keine | &bull; in Arbeit |
**Lighthouse-Tests**
Die Tests mit [Lighthouse](https://developers.google.com/web/tools/lighthouse) zeigen eine deutlichere Verbesserung. Mit der Optimierung bin ich allerdings noch nicht ganz fertig, da kann ich sicherlich noch etwas mehr optimieren.
| Kategorie | Vorher | Nachher |
| :--- | :--- | :--- |
| Mobile | ![Lighthouse Mobil vorher](lighthouse-old-mobile.png) | ![Lighthouse Mobil nachher](lighthouse-new-mobile.png) |
| Desktop | ![Lighthouse Desktop vorher](lighthouse-old-desktop.png) | ![Lighthouse Desktop nachher](lighthouse-new-desktop.png) |
## Design
Design kann man es wohl nicht nennen; f眉r den designlosen und schlichten Ansatz habe ich mich bewusst entschieden. Diese Website soll Informationen liefern, da ist ein h眉bsches Design zwar nett aber unn枚tig. Jedoch: Die Website unterst眉tzt einen Dark- und Light-Mode (kann durch einen Klick rechts oben ge盲ndert werden).
## Hosting
Die Homepage wird bei [Serverprofis](SERVERPROFIS_URL) gehostet. Nachdem ich schon viele Hoster durchprobiert habe, wie All-Inkl, 1&1, HostEurope, DomainFactory und Strato, bin ich nun schon seit einigen Jahren zufrieden bei [Serverprofis](SERVERPROFIS_URL) und [Hetzner](https://www.hetzner.com/de/). Websites hoste ich bei Serverprofis, da deren Preis-Leistung sehr gut ist, der Support schnell und kompetent ist und sie kostenlos die Homepages mit TLS-Zertifikaten von Let's Encrypt versehen (leider ist das bei vielen anderen Hostern noch kein Standard und man muss f眉r die Zertifikate noch extra zahlen). F眉r Docker-Hosting und andere Serveranwendungen verwende ich die [Hetzner Cloud](https://www.hetzner.com/de/cloud) (wird aber f眉r tomriedl.com nicht ben枚tigt).
## Cookies und Analytics
Warum kommt kein Cookie-Banner? Weil keine Cookies gespeichert werden. Ich mag es nicht, wenn ich im Internet 眉berall getrackt werden und deshalb gibt es auf meiner Homepage keine Cookies, kein Google-Analytics und auch keine Server-Logs. Weiterhin werden keine Scripte von anderen Domains geladen. Alle Scripte, Designs, Fonts werden direkt von tomriedl.com gehostet.
## Warum Codedoc
[Codedoc](https://codedoc.cc/) erzeugt aus Markdown-Dateien HTML-Dateien. Somit kann man aus einer Sammlung von Markdown-Dokumenten eine Website erzeugen. Der Fokus von Codedoc liegt in der Erstellung von Dokumentationen f眉r Software bzw. f眉r Quelltexte.
Codedoc ist ein statischer Webseitengenerator; davon gibt es [unglaublich viele](https://jamstack.org/generators/). F眉r Codedoc habe ich mich aus folgenden Gr眉nden entscheiden:
- Basisdateien sind [Markdown (.md)](https://de.wikipedia.org/wiki/Markdown).
- Verwendet [TypeScript](https://www.typescriptlang.org/) statt JavaScript als Prim盲rsprache.
- [Erweiterbar durch Plugins](https://codedoc.cc/docs/customization/overview).
- [Gute Darstellung von Quelltext](https://codedoc.cc/docs/code/overview).
- Live-Reload - Beim Live-Reload kann man die Website lokal ausf眉hren und bei einer 脛nderung in einer Markdown-Datei wird sofort die Seite in HTML 眉bersetzt und der Browser automatisch aktualisiert.
- Funktioniert ohne JavaScript - 脰ffnet man die Seite mit einem JavaScript-Blocker, wie [NoScript](https://noscript.net/) oder uMatrix ([Firefox](https://addons.mozilla.org/en-US/firefox/addon/umatrix/)/[Chrome](https://chrome.google.com/webstore/detail/umatrix/ogfcmafjalglgifnmanfmnieipoejdcf)) funktioniert diese auch bei geblockter Code-Ausf眉hrung.
- Dark/Light-Theme-Unterst眉tzung.
- Verwendet keine Cookies.
## Static Website
Durch das Erzeugen von HTML-Dateien aus Markdown wird auf Serverseite nur ein File-Server ben枚tigt, da kein server-side Rendering durchgef眉hrt werden muss. Das hat folgende Vorteile:
- Die Website wird deutlich schneller
- Es gibt weniger Angriffspunkte f眉r Hacks
- Ein Umzug zu einem anderen Hoster ist einfacher
- Man wird unabh盲ngig von Serversoftware (PHP-Versionen, etc.)
- Progressive Web-Apps sind mit Static Websites leichter umzusetzen
## Warum Open-Source
Die Quelltexte, sowie die Deploy-Skripte sind 枚ffentlich in folgendem Repository einsehbar:<br /><https://gitlab.com/TomRiedl/tomriedl.com/>
Den Code der Website habe ich aus folgenden Gr眉nden 枚ffentlich verf眉gbar gemacht:
- Die Website wird dadurch komplett nachverfolgbar. Jedes Release und jede 脛nderung bleibt f眉r immer im Repository einsehbar. Siehe [Changelog-Seite](/changelog/).
- Die Scripte und Deploy-Prozesse sind eventuell f眉r andere Personen/Firmen interessant.
- Andere Personen k枚nnen Fehler korrigieren oder selbst eigene Artikel schreiben.
Wenn dir also die Struktur und die Technik der Website gef盲llt, kannst du einfach das Repository kopieren und auf dieser Basis eine eigene Website aufsetzen, ohne gro脽en Initialaufwand.
## Deploy
**Mirroring**<br />
Das Repository [gitlab.com/TomRiedl/tomriedl.com](https://gitlab.com/TomRiedl/tomriedl.com) wird 眉ber die [GitLab-Bordmittel](https://docs.gitlab.com/ee/user/project/repository/repository_mirroring.html) automatisch zu einer GitLab-Instanz unserer Firma gepusht. <br />
![GitLab-Mirror auf Firmeninstanz](gitlab-mirror.png)<br />
Der Grund hierf眉r ist, dass ich die SFTP-Zugangsdaten f眉r den Webserver (das sp盲tere Deploy-Ziel) nicht direkt auf gitlab.com speichern m枚chte. Die Zugangsdaten sind als [CI-Variablen gespeichert](https://docs.gitlab.com/ee/ci/variables/).
**Build-Pipeline**<br />
Mit jeder 脛nderung des Quelltextes wird eine [Build-Pipeline angesto脽en](https://gitlab.com/TomRiedl/tomriedl.com/-/pipelines). Die Pipeline selbst durchl盲uft folgende Stages:<br />
![GitLab Deploy Stages](gitlab-deploy-stages.png)<br />
- [Preparation - Meta](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/Preparation.yml)<br />Hier werden aus dem Repository [Meta-Informationen ausgelesen](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/Meta.sh), diese werden prim盲r f眉r die Versionierung verwendet.
- [Build](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/Build.yml)<br />Das Erzeugen der HTML-Dateien aus den Markdown-Dateien. Weiterhin werden in diesem Schritt die [sitemap.xml](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/CreateSitemap.sh) und die [Tag-Pages](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/CreateTagPages.sh) erzeugt.
- [Test](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/Test.yml)<br />Beim Test wird ein [lokaler Webserver gestartet](https://www.npmjs.com/package/http-server), und die Website auf [ung眉ltige Links 眉berpr眉ft](https://www.npmjs.com/package/broken-link-checker).
- [Deploy](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/Pipeline/Deploy.yml)<br />Dieser Job l盲dt die fertige und gepr眉fte Website auf den Webserver hoch. Der Job wird nur auf der Firmen-Instanz ausgef眉hrt (siehe Mirroring oben).
**Versionierung**<br />
Nur getaggte Versionen des `release`-Branches werden auf tomriedl.com deployed und vor dem Upload mit einer [semantischen Versionierung](https://semver.org/lang/de/) versehen. Die aktuelle Version kannst du im Hauptmen眉 sehen:
![Version der Website](website-version.png)<br />
Die [Versionshistorie](https://gitlab.com/TomRiedl/tomriedl.com/-/releases) findest du [bei GitLab](https://gitlab.com/TomRiedl/tomriedl.com/-/releases).
## Online-Editor
F眉r gew枚hnlich editiere ich die Seite 眉ber [Visual Studio Code](https://code.visualstudio.com/) und verwalte das Repository 眉ber [GitKraken](https://www.gitkraken.com/invite/8dEAeKHi). GitLab verf眉gt jedoch 眉ber eine mehr als ausreichende [Web-IDE](https://docs.gitlab.com/ee/user/project/web_ide/) 眉ber die es m枚glich ist, die gesamte Website 眉ber den Browser zu bearbeiten.<br />
Somit kann ich auch schnell unterwegs oder auf meinem Handy einen Artikel editieren.<br />
![GitLab Web-IDE](gitlab-web-ide.png)
## Website lokal 枚ffnen
Zum lokalen Entwickeln kann 眉ber Codedoc ein Web-Server mit Live-Reload gestartet werden. Damit man Codedoc und die n枚tigen Abh盲ngigkeiten nicht auf seinem Rechner installieren muss, habe ich hierf眉r einen Docker-Image erstellt: <https://hub.docker.com/repository/docker/cyancor/codedoc> ([Quelltext](https://gitlab.com/cyancor/docker-codedoc/-/blob/production/Dockerfile)). Zum Starten reicht es, das Script [serve.cmd](https://gitlab.com/TomRiedl/tomriedl.com/-/blob/release/serve.cmd) auszuf眉hren. Das Script ist so geschrieben, dass es auf Linux, Windows und MacOS lauff盲hig ist.
## Progressive Web-App
Die Website als Progressive Web-App ist noch nicht umgesetzt. Sobald ich diese Seite zu einer PWA umbaue, schreibe ich dazu einen eigenen Artikel mit Anleitung.
## Mitgestaltung und Feedback
Zur Mitgestaltung der Website hast du folgende M枚glichkeiten:
- **Ticket erstellen**: Alle offenen Tickets siehst du hier: <https://gitlab.com/TomRiedl/tomriedl.com/-/issues><br />Solltest du einen Fehler gefunden haben oder dir einen Artikel zu einem bestimmten Thema w眉nschen, kannst du jederzeit ein [neues Ticket erstellen](https://gitlab.com/TomRiedl/tomriedl.com/-/issues/new) (hierf眉r ben枚tigst du einen gitlab.com-Account).
- **Quelltext editieren**: Du kannst jederzeit Inhalte korrigieren und sogar eigene Artikel als Gastbeitrag erstellen. Nach einem Review der 脛nderungen k枚nnen diese dann in den Release-Branch gemerged werden. Hierzu gehst du folgenderma脽en vor:<br />1. Einen Fork des Repositories erstellen: <https://gitlab.com/TomRiedl/tomriedl.com/-/forks/new><br />2. Die 脛nderung in deinem Repository durchf眉hren<br />3. Einen Merge-Request an mich stellen
- **Telegram-Gruppe**: In der [Telegram-Gruppe @tomriedl_group](https://t.me/tomriedl_group) kannst du jederzeit beitreten, Fragen stellen und auch Anmerkungen zur Homepage und den Artikeln machen.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment