nemanjam.github.io
1.0.0
Dies ist das Repository für meinen Coding -Blog nemanjamitic.com. Kostenlose und Open Source, können Sie Code wiederverwenden und für Ihren eigenen Entwicklerblog anpassen. Blog -Beiträge (Zukunft) erfordern eine Zuschreibung.
| Verfahren | URL |
|---|---|
| Nginx | https://nemanjamitic.com |
| Github -Seiten | https://nemanjam.github.io |
| Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
Bis Ende 2023. Ich habe darüber nachgedacht, Einblicke aus meiner üblichen täglichen Codierungsarbeit in abgerundete Blog -Artikel zu erfassen, also suchte ich nach einer sauberen, minimalistischen und gut strukturierten Blog -Vorlage. Ich habe angefangen zu recherchieren und überlegte Jekyll, Hugo, Next.js, aber schließlich erkannte ich schließlich, dass Astro derzeit das beste Tool für eine statische, persönliche Website ist.
Dann habe ich alle Open -Source -Astro -Beispiele recherchiert und überprüft, die ich mit der Absicht finden konnte, es wiederzuverwenden und nur Stile anzupassen, aber keiner von ihnen hat meine Präferenz für die Codestruktur und die gewünschten Funktionen erfüllt. Deshalb habe ich mich entschlossen, die besten Teile von allen zu kompilieren Eine Struktur- und Codierungsstil meiner eigenen Vorliebe. Siehe den Abschnitt Credits bellow.
Ich beabsichtige, diese Website für die kommenden Jahre zu nutzen, daher halte ich die zusätzlichen Anstrengungen gut an. Darüber hinaus hat es mir geholfen, dabei praktische Erfahrungen mit Astro zu sammeln.
In der Entwicklung sehen Sie standardmäßig Entwurfsbeiträge.
# .env.development
# this var is always without trailing slash '/'
SITE_URL=http://localhost:3000 # .env.production
SITE_URL=https://nemanjamitic.com
# set to true to preview draft posts in production
PREVIEW_MODE= # install packages
yarn install
# copy and set environment variables
cp .env.development.example .env.development
# run development server and visit http://localhost:3000
yarn dev
# delete node_modules and yarn.lock
yarn clean # copy and set environment variables
cp .env.production.example .env.production
# build website
yarn build
# run website and visit http://localhost:3000
yarn startEs stehen drei Bereitstellungsmethoden vor Ort und in GitHub -Aktionen zur Verfügung. Sie können die aktuell bereitgestellte Version immer leicht identifizieren, indem Sie die neuesten Commit -Informationen in der Fußzeile der bereitgestellten Website überprüfen.
Für Workflows für GitHub -Aktionen müssen Sie diese Geheimnisse in Ihren GitHub -Repository -Einstellungen festlegen:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEFür lokale Bereitstellungen müssen Sie SSH -Alias für den Remote -Server in Ihrer lokalen SSH -Konfigurationsdatei festlegen, zum Beispiel:
# /home/username/.ssh/config
# arm1 ssh alias for remote server
Host arm1 123.123.13.123
HostName 123.123.13.123
IdentityFile ~ /.ssh/my-servers/arm1-ssh-private-key.key
User your-user Alle NGINX -Bereitstellungen werden auf dem Erstellen der Website und dem Kopieren der kompilierten Dateien aus dem Ordner /dist in den NGINX -Webroot -Ordner auf einem Remote -Server gelten.
# package.json
# set your SITE_URL
" build:nginx " : " SITE_URL='https://nemanjamitic.com' astro build " ,
# build the app
yarn build:nginx
# configure ssh for your own "arm1" remote server in /home/username/.ssh/config
# copy compiled app from local /dist folder to Nginx web root on the remote server
" deploy:nginx " : " bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' arm1 " ,
# run deploy
yarn deploy:nginxLösen Sie einfach einen der folgenden Workflows aus:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlNur in Github -Aktionen erhältlich. Lösen Sie einfach einen der folgenden Workflows aus:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml Um linux/arm64 -Docker -Bilder lokal zu erstellen, wenn Sie x86 -Computer haben, müssen Sie QEMU und Buildx lokal installieren. Siehe dieses Tutorial:
Multi-Arch-Bilder mit Docker Buildx und Qemu
Wenn Sie auf Ubuntu sind, müssen Sie dies wahrscheinlich auch ausführen.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesDanach können Sie Multi-Plattform-Bilder lokal erstellen und schieben.
# package.json
# open terminal and login with your Dockerhub account, both locally and on remote server
docker login my-user my-pass
# replace "nemanjamitic/nemanjam.github.io" with your image name
# set ARG_SITE_URL_ARM64 to your production url
# set correct architecture for your production server --platform linux/arm64 or linux/amd64
" docker:build:push:arm " : " docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --progress=plain --push . " ,
# build and push Docker image, replace "arm" with your architecture
yarn docker:build:push:arm
# replace "~/traefik-proxy/apps/nmc-docker" with your path to docker-compose.yml
# replace "nemanjamitic/nemanjam.github.io" with your image name
" deploy:docker " : " bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io " ,
# pull and run latest image on your production server
yarn deploy:dockerLösen Sie einfach diese Workflows aus:
# .github/workflows
# build and push Docker image
default__build-push-docker.yml
# pull and run latest Docker image
# trigger one of the following:
bash__deploy-docker.yml
default__deploy-docker.ymlEine große Versorgung ist einer soliden, klaren, umfassenden, verständlichen, wartbaren und anpassbaren Codestruktur gewidmet. Die Absicht dahinter besteht darin, die Dinge getrennt, klar, lesbar und offensichtlich zu halten und Komplexität und Lärm zu verringern.
Nachfolgend finden Sie eine detailliertere Übersicht über die Funktionen und ihre Implementierungen:
Diese statisch generierte, hohe Leistung, neueste Astro -Website. Es verfügt über Post- und Projektinhaltesammlungen mit .mdx -Dateien und dient als Hauptmodell der App. Beide Tags (1: n) und Kategorien (1: 1) werden für Beziehungen zwischen Posts unterstützt. Die Übergänge von Ansicht sind aktiviert und die Beiträge werden auf allen Seiten mit transition:name Requisiten. Die Bilder sind astro optimiert und alle Bildgrößen werden als wiederverwendbare konstante Voreinstellungen für Konsistenz und Reduzierung des Overheads extrahiert. Pagination ist sowohl für Post- als auch für Projektlistenseiten verfügbar. Der Vorschau -Modus ist entweder mit astro preview -Skript oder durch Einstellen von PREVIEW_MODE=true in .env.production verfügbar. RSS- und JSON -Feeds werden als statische API -Endpunkte implementiert. Für alle Komponenten, die die Interaktivität des Client -Seitens erfordern, gibt es eine React -Integration.
Konfigurationen für Integrationen und Plugins werden extrahiert, um astro.config.ts sauber und lesbar zu halten. Alle Website -Routen sind in ein einzelnes konstantes Objekt zentralisiert, das für Dateipfade. Die Ebenen werden hierarchisch getrennt und organisiert und unterstützen sowohl zentrierte als auch Vollbreiten -Layouts für alle Seiten von Seiten: 1. .mdx -Seiten, 2. Sammlungsseiten - Post und Projekt sowie 3. Listenseiten - Indizes mit Pagination. Abfragen der Hauptantragsmodelle - Post- und Projektinhaltesammlungen werden in den Ordner /modules -Ordner für saubere und lesbare getStaticPaths() extrahiert.
Es gibt eine Unterstützung für helle/dunkle Rückenwindmodi und Farbthemen mit semantischen Farben. Themen werden in separaten Dateien als CSS -Variablen gespeichert, die in zwei Ebenen organisiert sind. Responsive Styling wird sowohl für Bereiche als auch für Typografie unterstützt. Der gesamte CSS -Code ist in drei Rückenwindschichten (Basis/Komponenten/Dienstprogramme) organisiert. Es gibt ein ausgearbeitetes System, mit dem Typografiestile zwischen Markdown -Inhalten ( tailwindcss/typography -Plugin- und prose ) und benutzerdefinierten Komponenten synchronisiert werden können. Typografiestile werden in eine benutzerdefinierte my-prose Klasse angepasst und abstrahiert. Die meisten Komponentenstile werden in eine CSS-Dateien extrahiert und verwenden die Varianten class-variance-authority . Dynamische Klassennamen werden mit tailwind-merge und clsx implementiert.
Metadaten sind zentralisiert und tippt oder alle Arten von Seiten ( .mdx , Sammlungen und Listen) mit Standardeinstellungen als Fallback. Es gibt einen API -Endpunkt für die Erzeugung offener Diagrammbilder mit Hero -Bild und zufälliger Farbgradienten unter Verwendung von Satori und HTML -Vorlage, die auf jede Seite angewendet werden. Sitemap wird zur Build-Zeit mit offizieller Integration generiert. Benutzerdefinierte 404 -Seite wird bereitgestellt.
Es gibt eine organisierte Vermögensstruktur sowohl für optimierte ( /src ) als auch für nicht optimierte ( /public ) Bilder mit bereitgestellten Standardeinstellungen. Für Ikonen wird astro-icon -Paket verwendet, das sowohl Ikonen ( mdi Design) als auch lokale SVGs unterstützt. Für Filterposten gibt es die folgenden paginierten Seiten: nach Tag - /tags , nach Kategorie - /categories , nach beiden Seite - /explore - Erkunden (Archiv). Navbar verfügt über Artikel, die als Array gespeichert sind und aktives Element für die aktuelle Route gestaltet haben. Es gibt eine Komponente für Inhaltsverzeichnisse für Blog-Beiträge, in denen die Hierarchie von Unterhadern aus dem Markdown-Inhalt liest. Ein Designsystem mit .mdx -Seiten ist auf dem /design erhältlich und bietet eine klare Vorschau und Debuggierung aller visuellen Komponenten. Teilen Sie die Komponente zum Teilen von Beiträgen Twitter, Facebook, Reddit, LinkedIn und Hackernews.
Kommentare werden mit Giscus gemacht und der Dunkle -Modus wird mit dem Hauptthema synchronisiert. Das Einbetten von Tweets, YouTube- und Vimeo-Videos und Öffnen von Graph-Links erfolgt mit astro-embed . Die Syntax-Hervorhebung für den eingebetteten Code wird mithilfe expressive-code Integration implementiert.
Der gesamte Code ist in TypeScript geschrieben. Die Typen für die gesamte App befinden sich in einem separaten Ordner. Es gibt zentralisierte ZOD -Schemas für Post-, Projekt- und Konfigurationsmodelle mit geeigneten Standardeinstellungen, um Laufzeitausnahmen zu verhindern. Sowohl die Konfigurations- als auch die Umgebungsvariablen werden typisiert und bau-Zeit validiert. Es gibt abstrahiere Typen für Post- und Projektsammlungsmodelle, die zusätzliche Felder wie die berechnete Lesezeit enthalten können.
tsconfig.json hat die Aliase für saubere und organisierte Importe definiert. Der Code wird mit hübscher mit sortierten Importen formatiert und eslint wird für die Syntaxprüfung verwendet.
Die neuesten GIT -Commit -Informationen finden Sie in der FOOD -FOODE auf der Website, um die derzeit bereitgestellte Version zu identifizieren. Es gibt drei Methoden zur Produktionsbereitstellung: 1. Github -Seiten, 2. Nginx und 3. Docker -Bild, und alle werden sowohl in Github -Aktionen als auch lokal unterstützt. Vermögenswerte, die für NGINX kopieren und Docker -Bilder erstellen, werden in Bash -Skripte abstrahiert und sowohl in Github -Aktionen als auch in lokalen Bereitstellungen für einfachere lokale Debugging wiederverwendet. Es wird eine Unterstützung für das Erstellen von linux/amd64 und linux/arm64 -Docker -Bildern unterstützt.
astro:env - erledigt.mdx für RSS mithilfe von KomponentenbehälternDie wichtigsten Projekte, Beispiele, Demos, Ressourcen, die ich wiederverwendet und überprüft habe:
Andere Projekte, Beispiele, Demos, Ressourcen, die ich wiederverwendet und überprüft habe:
