nemanjam.github.io
1.0.0
Este es el repositorio de mi blog de codificación nemanjamitic.com. Código gratuito y abierto, no dude en reutilizar el código y personalizar para su propio blog de desarrolladores. Las publicaciones de blog (futuro) requieren atribución.
| Método | Url |
|---|---|
| Nginx | https://nemanjamitic.com |
| Páginas de Github | https://nemanjam.github.io |
| Estibador | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
A finales de 2023. Comencé a pensar en capturar ideas de mi trabajo de codificación diario habitual en artículos redondeados de blogs, por lo que comencé a buscar una plantilla de blog limpia, minimalista y bien estructurada. Comencé a investigar y considerar Jekyll, Hugo, Next.js, pero finalmente me di cuenta de que actualmente Astro es la mejor herramienta para un sitio web estático y personal.
Luego investigué y revisé todos los ejemplos de Astro de código abierto que pude encontrar con la intención de reutilizarlo y simplemente personalizar los estilos, pero ninguno de ellos cumplió con mi preferencia por la estructura del código y las características deseadas, así que decidí compilar las mejores partes de todos ellos en todas ellas. Una estructura y estilo de codificación de mi propio gusto. Vea la sección de créditos a continuación.
Tengo la intención de usar este sitio web en los próximos años, así que considero el esfuerzo adicional bien gastado. Además, me ayudó a obtener una experiencia práctica con Astro en el proceso.
En el desarrollo puede ver el borrador de publicaciones por defecto.
# .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 startHay tres métodos de implementación disponibles localmente y en acciones de GitHub. Siempre puede identificar fácilmente la versión actualmente implementada verificando la última información de confirmación en el pie de página del sitio web implementado.
Para los flujos de trabajo de las acciones de GitHub, deberá establecer estos secretos en la configuración de su repositorio de GitHub:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEPara las implementaciones locales, deberá establecer alias SSH para el servidor remoto, en su archivo de configuración SSH local, por ejemplo:
# /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 Todas las implementaciones de Nginx se reducen a construir el sitio web y copiar los archivos compilados desde la carpeta /dist en la carpeta de raíz web Nginx en un servidor remoto.
# 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:nginxSimplemente active uno de los siguientes flujos de trabajo:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlSolo disponible en acciones de GitHub. Simplemente active uno de los siguientes flujos de trabajo:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml Para construir imágenes de Docker linux/arm64 localmente si tiene una computadora X86, deberá instalar QEMU y BuildX localmente, consulte este tutorial:
Imágenes de arco múltiple con Docker Buildx y Qemu
Si estás en Ubuntu, probablemente también necesitarás ejecutar esto.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesDespués de eso, puede construir y empujar imágenes multiplataforma localmente.
# 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:dockerSimplemente active estos flujos de trabajo:
# .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 gran cuidado se dedica a una estructura de código sólida, clara, integral, comprensible, mantenible y personalizable. La intención detrás de esto es mantener las cosas separadas, claras, legibles y obvias y reducir la complejidad y el ruido.
A continuación se muestra una descripción más detallada de las características y sus implementaciones:
Este sitio web de Astro generado por está estático, de alto rendimiento, último de Astro. Tiene colecciones de contenido de publicación y proyecto con archivos .mdx y sirven como modelo principal de la aplicación. Ambas etiquetas (1: n) y categorías (1: 1) son compatibles con las relaciones entre publicaciones. Las transiciones de vista están habilitadas y las publicaciones se animan en todas las páginas usando Props transition:name . Las imágenes se optimizan astro y todos los tamaños de imagen se extraen como presets constantes reutilizables para la consistencia y la reducción de la sobrecarga. La paginación está disponible para páginas de publicaciones y listas de proyectos. El modo de vista previa está disponible con el script astro preview o configurando PREVIEW_MODE=true en .env.production . RSS y JSON Feeds se implementan como puntos finales de API estáticos. Existe una integración React para todos los componentes que requieren interactividad del lado del cliente.
Las configuraciones para integraciones y complementos se extraen para mantener limpios y legibles astro.config.ts . Todas las rutas del sitio web están centralizadas en un solo objeto constante, lo mismo para las rutas de archivo. Las capas están separadas y organizadas jerárquicamente y admiten diseños centrados y de ancho completo para todos los tipos de páginas: 1. .mdx Pages, 2. Páginas de colecciones - Post y Proyecto, y 3. Listas de páginas - índices con paginación. Consulta de los modelos principales de aplicaciones: las colecciones de contenido de publicación y proyecto se extraen en la carpeta /modules para getStaticPaths() limpios y legibles.
Hay un soporte tanto para los modos de viento de cola ligera/oscura como para los temas de color con colores semánticos. Los temas se almacenan en archivos separados como variables CSS organizadas en dos niveles. El estilo receptivo es compatible tanto para espacios como para la tipografía. Todo el código CSS se organiza en tres capas de viento de cola (base/componentes/utilidades). Existe un sistema elaborado para mantener los estilos de tipografía sincronizados entre el contenido de Markdown ( tailwindcss/typography y la clase prose ) y los componentes personalizados. Los estilos de tipografía se personalizan y se abstraen en una clase my-prose personalizada. La mayoría de los estilos de componentes se extraen en archivos CSS y usan class-variance-authority para variantes. Los nombres de clases dinámicos se implementan utilizando tailwind-merge y clsx .
Los metadatos están centralizados y escriben o todos los tipos de páginas ( .mdx , colecciones y listas) con valores predeterminados como devolios. Hay un punto final API para generar imágenes de gráficos abiertos con imagen de héroe y gradiente de color aleatorio utilizando la plantilla Satori y HTML aplicada a cada página. Sitemap se genera en el tiempo de compilación utilizando la integración oficial. Se proporciona una página de estilo 404 personalizado.
Hay una estructura de activos organizados para imágenes optimizadas ( /src ) y no optimizadas ( /public ) con valores predeterminados proporcionados. Para los íconos se utiliza el paquete astro-icon que admite los iconos de diseño de materiales ( mdi ) y SVG locales. Para las publicaciones de filtrado hay las siguientes páginas paginadas: por etiqueta - /tags , por categoría - /categories , por ambos - /explore - explorar (archivo) página. Navbar tiene artículos almacenados como una matriz y ha diseñado un elemento activo para la ruta actual. Hay un componente para la tabla de contenido para publicaciones de blog que lee la jerarquía de subteleadores del contenido de Markdown. Un sistema de diseño con páginas .mdx está disponible en la ruta /design , proporcionando una vista previa y depuración claras de todos los componentes visuales. Compartir componentes para compartir publicaciones admite Twitter, Facebook, Reddit, LinkedIn y Hackernews.
Los comentarios se realizan con Giscus y Have Dark Mode se sincroniza con el tema principal. La incrustación de tweets, videos de YouTube y Vimeo, y los enlaces de gráficos abiertos se realizan con astro-embed . El resaltado de sintaxis para el código integrado se implementa utilizando la integración expressive-code .
Todo el código está escrito en TypeScript, los tipos para toda la aplicación se encuentran en una carpeta separada. Existen esquemas Zod centralizados para modelos de publicación, proyecto y configuración con valores predeterminados adecuados para evitar excepciones de tiempo de ejecución. Las variables de configuración y entorno se escriben y se validan en el tiempo de construcción. Hay tipos abstractos para modelos de colección de publicaciones y proyectos que pueden incluir campos adicionales como el tiempo de lectura calculado.
tsconfig.json ha definido los alias de ruta para las importaciones limpias y organizadas. El código está formateado utilizando Prettier con importaciones ordenadas y Eslint se usa para la verificación de sintaxis.
La última información de confirmación de Git se incluye en el pie de página del sitio web para una fácil identificación de la versión implementada actualmente. Hay tres métodos para implementaciones de producción: 1. Páginas GitHub, 2. Nginx y 3. La imagen de Docker y todos ellos son compatibles tanto en acciones de GitHub como localmente. Los activos que copian para las imágenes de Nginx y la construcción de Docker se abstraen en scripts bash y se reutilizan tanto en acciones de GitHub como en implementaciones locales para una depuración local más fácil. Hay un soporte para construir imágenes de Docker linux/amd64 y linux/arm64 .
astro:env - hecho.mdx para RSS usando contenedores de componentesLos proyectos más importantes, ejemplos, demostraciones, recursos que reutilizé y revisé:
Otros proyectos, ejemplos, demostraciones, recursos que reutilizé y revisé:
