nemanjam.github.io
1.0.0
Ceci est le référentiel de mon blog de codage nemanjamitic.com. Gratuit et open source, n'hésitez pas à réutiliser le code et à personnaliser pour votre propre blog de développeur. Les articles de blog (Future) nécessitent une attribution.
| Méthode | URL |
|---|---|
| Nginx | https://nemanjamitic.com |
| Pages github | https://nemanjam.github.io |
| Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
À la fin de 2023. J'ai commencé à penser à capturer les informations de mon travail de codage quotidien habituel dans des articles de blog arrondis, alors j'ai commencé à chercher un modèle de blog propre, minimaliste et bien structuré. J'ai commencé à rechercher et à considérer Jekyll, Hugo, Next.js, mais j'ai finalement réalisé qu'Astro est actuellement le meilleur outil pour un site Web statique et personnel.
Ensuite, j'ai fait des recherches et passés en revue tous les exemples Astro open source que je pouvais trouver avec l'intention de le réutiliser et de personnaliser les styles, mais aucun d'entre eux n'a rencontré ma préférence pour la structure du code et les fonctionnalités souhaitées, j'ai donc décidé de compiler les meilleures parties de chacun d'entre eux dans une structure et un style de codage à ma propre goût. Voir la section des crédits ci-dessous.
J'ai l'intention d'utiliser ce site Web pour les années à venir, donc je considère l'effort supplémentaire bien dépensé. De plus, cela m'a aidé à acquérir une expérience pratique avec Astro dans le processus.
En développement, vous pouvez voir le projet de publications par défaut.
# .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 startIl existe trois méthodes de déploiement disponibles localement et dans les actions GitHub. Vous pouvez toujours identifier facilement la version actuellement déployée en vérifiant les dernières informations de validation dans le pied de page du site Web déployé.
Pour les workflows GitHub Actions, vous devrez définir ces secrets dans vos paramètres de référentiel GitHub:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEPour les déploiements locaux, vous devrez définir un alias SSH pour le serveur distant, dans votre fichier de configuration SSH local, par exemple:
# /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 Tous les déploiements Nginx se résument à la création du site Web et à la copie des fichiers compilés à partir du dossier /dist dans le dossier Root Web Nginx sur un serveur distant.
# 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:nginxDéclenchez simplement l'un des flux de travail suivants:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlUniquement disponible dans les actions GitHub. Déclenchez simplement l'un des flux de travail suivants:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml Pour créer des images Docker linux/arm64 localement Si vous avez un ordinateur x86, vous devrez installer Qemu et BuildX localement, consultez ce tutoriel:
Images multi-arc avec docker buildx et qemu
Si vous êtes sur Ubuntu, vous devrez probablement l'exécuter aussi.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesAprès cela, vous pouvez construire et pousser des images multiplateformes localement.
# 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:dockerDéclenchent simplement ces workflows:
# .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.ymlUn grand soin est consacré à une structure de code solide, claire, complète, compréhensible, maintenable et personnalisable. L'intention derrière cela est de garder les choses séparées, claires, lisibles et évidentes et de réduire la complexité et le bruit.
Vous trouverez ci-dessous un aperçu plus détaillé des fonctionnalités et de leurs implémentations:
Ce dernier site Web Astro généré statiquement généré statiquement. Il dispose de collections de contenu post et de projet avec des fichiers .mdx et ils servent de modèle principal de l'application. Les balises (1: n) et les catégories (1: 1) sont prises en charge pour les relations entre les publications. Les transitions de vue sont activées et les articles sont animés sur toutes les pages à l'aide transition:name accessoires. Les images sont optimisées Astro et toutes les tailles d'image sont extraites sous forme de préréglages constants réutilisables pour la cohérence et la réduction des frais généraux. La pagination est disponible pour les pages de publication et de liste de projets. Le mode d'aperçu est disponible avec astro preview du script ou en définissant PREVIEW_MODE=true dans .env.production . Les flux RSS et JSON sont mis en œuvre sous forme de points de terminaison API statiques. Il existe une intégration de réact pour tous les composants qui nécessitent une interactivité côté client.
Les configurations pour les intégrations et les plugins sont extraites pour garder astro.config.ts propre et lisible. Tous les routes de site Web sont centralisées en un seul objet constant, même pour les chemins de fichier. Les couches sont séparées et organisées de manière hiérarchique et prennent en charge les dispositions centrées sur les pages: 1. Pages .mdx , 2. Pages de collections - Post et Projet, et 3. Pages de liste - Index avec pagination. Interrogation des modèles d'applications principales - Les collections de contenu Post et Project sont extraites dans le dossier /modules pour getStaticPaths() .
Il y a un support pour les modes de vent arrière léger / foncé et les thèmes de couleur avec des couleurs sémantiques. Les thèmes sont stockés dans des fichiers séparés sous forme de variables CSS organisées en deux niveaux. Le style réactif est pris en charge pour les espacements et la typographie. Tout le code CSS est organisé en trois couches de vent arrière (base / composants / utilitaires). Il existe un système élaboré pour conserver les styles de typographie en synchronisation entre le contenu Markdown (plugin tailwindcss/typography et classe prose ) et des composants personnalisés. Les styles de typographie sont personnalisés et abstraits en une classe my-prose personnalisée. La plupart des styles de composants sont extraits dans un fichier CSS et utilisent class-variance-authority pour les variantes. Les noms de classe dynamiques sont implémentés à l'aide de tailwind-merge et clsx .
Les métadonnées sont centralisées et typées ou tous les types de pages ( .mdx , collections et listes) avec des valeurs par défaut comme repli. Il existe un point de terminaison de l'API pour générer des images graphiques ouvertes avec l'image du héros et le gradient de couleur aléatoire à l'aide du modèle Satori et HTML appliqué à chaque page. Sitemap est généré au moment de la construction en utilisant l'intégration officielle. La page 404 de style personnalisé est fournie.
Il existe une structure d'actifs organisée pour les images optimisées ( /src ) et non optimisées ( /public ) avec des défauts fournis. Pour les icônes, le package astro-icon est utilisé à la fois des icônes de conception de matériaux ( mdi ) et des SVG locaux. Pour le filtrage des publications, il existe les pages paginées suivantes: par tag - /tags , par catégorie - /categories , par page - /explore - explorer (archive). Navbar a des articles stockés sous forme de tableau et a stylé un élément actif pour l'itinéraire actuel. Il existe un composant pour la table des matières pour les articles de blog qui lit la hiérarchie des sous-t-t-t-thes du contenu Markdown. Un système de conception avec des pages .mdx est disponible sur le chemin /design , offrant un aperçu clair et un débogage de tous les composants visuels. Partagez le composant pour le partage des publications Prise en charge Twitter, Facebook, Reddit, LinkedIn et Hackernews.
Les commentaires sont faits avec Giscus et ont le mode sombre est synchronisé avec le thème principal. Les tweets d'intégration, les vidéos YouTube et Vimeo et les liens graphiques ouverts se font avec astro-embed . La mise en évidence de la syntaxe pour le code embarqué est implémentée à l'aide de l'intégration expressive-code .
Tous les code sont écrits en dactylographie, les types pour l'ensemble de l'application sont situés dans un dossier séparé. Il existe des schémas ZOD centralisés pour les modèles POST, Project et Config avec des défauts de défaut appropriés pour empêcher les exceptions d'exécution. Les variables de configuration et d'environnement sont tapées et validées par le temps de construction. Il existe des types abstraits pour les modèles de collecte de post et de projets qui peuvent inclure des champs supplémentaires comme le temps de lecture calculé.
tsconfig.json a défini les alias de chemin pour les importations propres et organisées. Le code est formaté à l'aide de plus jolis avec des importations triées et Eslint est utilisé pour la vérification de la syntaxe.
Les dernières informations GIT Commit sont incluses dans le pied de page du site Web pour une identification facile de la version actuellement déployée. Il existe trois méthodes pour les déploiements de production: 1. GitHub Pages, 2. Nginx et 3. Docker Image et tous sont pris en charge à la fois dans les actions GitHub et localement. La copie des actifs pour Nginx et la construction d'images Docker sont résumées en scripts bash et réutilisées dans les actions GitHub et les déploiements locaux pour un débogage local plus facile. Il y a une prise en charge de la construction d'images linux/amd64 et linux/arm64 Docker.
astro:env - Done.mdx pour RSS à l'aide de conteneurs de composantsLes projets, exemples, démos, ressources les plus importants que j'ai réutilisés et examinés:
Autres projets, exemples, démos, ressources que j'ai réutilisées et examinées:
