Recientemente me encontré recurriendo a Eleventy (también conocido como 11ty) por encima de todas las demás herramientas cuando quiero desarrollar un sitio web. Es difícil superar a un generador de sitios estáticos que brinda oportunidades avanzadas de creación de plantillas y al mismo tiempo se aparta de su camino y le permite simplemente crear .
Uno de esos sitios es Style Stage , una moderna muestra de CSS diseñada a partir de contribuciones de la comunidad. Eleventy fue perfecto para este proyecto impulsado por la comunidad en varios sentidos:
- Su construcción excepcionalmente rápida es local y en un host de producción.
- No tiene opiniones sobre cómo construir plantillas.
- Su capacidad para crear cualquier tipo de archivo con control total sobre cómo y dónde se procesan los archivos.
- Su capacidad para mezclar lenguajes de plantillas, como HTML, Markdown y Nunjucks.
- Tiene un alto rendimiento porque se compila en HTML estático sin dependencias necesarias para la producción.
La razón número uno por la que Eleventy es una excelente opción para crear un sitio impulsado por la comunidad es la capacidad de crear dinámicamente páginas del sitio a partir de fuentes de datos. Revisaremos cómo utilizar esta función y más cuando creemos nuestro sitio comunitario de muestra.
Serie de artículos:
- Preparándose para las contribuciones (¡usted está aquí!)
- Construyendo el sitio (¡próximamente mañana!)
¿Qué implica la creación de un sitio impulsado por la comunidad?
En un pasado no muy lejano, la creación de un sitio impulsado por la comunidad podría ser un proceso doloroso que implicaba pesadillas de CMS al intentar crear flujos de trabajo para los contribuyentes. Armado con Eleventy y algunas otras herramientas modernas, esto ahora es casi completamente automatizable con un mínimo de supervisión.
Antes de comenzar a invitar a colaboradores, tenemos algo de trabajo que hacer nosotros mismos.
1. Determinar qué contenido tendrán acceso los contribuyentes para modificarlo.
Esto guiará muchas de las otras decisiones. En el caso de usar Eleventy para Style Stage, creé un archivo JSON que los contribuyentes pueden usar para crear solicitudes de extracción para modificar y proporcionar sus propios metadatos relevantes que se utilizan para crear sus páginas.
Quizás también desee permitir el acceso para incluir activos adicionales, o quizás tenga sentido tener varios archivos de datos para facilitar la categorización y consulta de datos. O tal vez los contribuyentes puedan agregar archivos Markdown dentro de un directorio en particular.
Considere el alcance de lo que los contribuyentes pueden modificar o enviar y compárelo con una estimación de su disponibilidad para revisar los envíos. Esto ayudará a permitir una comunidad exitosa y manejable.
Las acciones de GitHub pueden hacer posible etiquetar o cerrar una solicitud de extracción con archivos no válidos si necesita una detección automatizada avanzada del contenido entrante.
2. Cree pautas para los contribuyentes
Dedicar tiempo a pensar detenidamente sus pautas puede ayudarle con su plan general. Puede identificar funciones adicionales necesarias o elementos que pueden automatizarse.
Una vez que sus pautas estén preparadas, es mejor incluirlas en un archivo especial en su repositorio de GitHub llamado CONTRIBUTING.md. El nombre del archivo en mayúsculas es el formato esperado. Tener este archivo crea un enlace adicional automático para los contribuyentes cuando crean su solicitud de extracción o problemas en un mensaje que les pide que se aseguren de haber revisado las pautas:
Cómo manejar las licencias de contenido y la atribución de autores son cosas que entran en esta categoría. Por ejemplo, Style Stage publica hojas de estilo aportadas bajo la licencia CC BY-NC-SA, pero los autores conservan los derechos de autor sobre los gráficos originales. Como parte del proceso de creación, la licencia y la atribución del autor se adjuntan a los estilos y los metadatos de atribución de los autores se actualizan dentro de la plantilla de página de estilo.
También querrás considerar políticas sobre contenido aceptable y qué causaría que se rechacen los envíos. Style Stage afirma que:
Los envíos serán rechazados por utilizar imágenes obscenas, excesivamente violentas o desagradables, violar las pautas anteriores u otras razones a discreción del responsable.
3. Preparar el flujo de trabajo y las automatizaciones.
Mientras Eleventy se encarga de la construcción del sitio, los otros actores clave que permiten las contribuciones de Style Stage son Netlify y GitHub.
Los contribuyentes envían una solicitud de extracción al repositorio Style Stage en GitHub y, cuando lo hacen, Netlify crea una vista previa de la implementación. Esto permite a los contribuyentes verificar que su envío funciona como se esperaba y me ahorra tiempo como mantenedor al no tener que bajar los envíos para asegurarme de que cumplan con las pautas.
Toda la discusión se lleva a cabo a través de GitHub. Esto tiene la ventaja adicional de la rendición de cuentas pública que ayuda a disuadir a los malos actores.
Si el colaborador necesita realizar un cambio, puede actualizar su solicitud de extracción o solicitar una nueva implementación de la vista previa de la rama si se trata de un activo remoto que ha cambiado. Esta nueva implementación es un paso manual muy pequeño y es posible que no sea necesario para todos los RP, o incluso que no sea necesario, dependiendo de cómo acepte las contribuciones.
El último paso es la aprobación final del PR y su fusión con la rama principal. Una vez que se fusiona la solicitud de extracción, Netlify implementa inmediatamente los cambios en producción. Noticias raras y curiosas
Eleventy is, of course, a static site generator, and several hosts offer webhooks to trigger a build. Netlify’s build plugins are a good example of that. But if you need to refresh data more often than each time a PR is merged, one option is to use IFTTT or Zapier to set up daily deploys, or deploys based on a variety of other triggers.
It’s worth noting that what we’re talking about here does limit your contributor audience to having a GitHub account. However, GitHub contributions can be done entirely via the web interface, so it’s very possible to provide guidance so that other users — even those who don’t code — can still participate.
4. Choose a method for contributor and community updates
The first consideration here is to decide how critical it is for contributors to know about updates to your site by evaluating the likely impact of the change.
In the case of Style Stage, the core will be unchanging, but there is some planned optional functionality. I went with a weekly(-ish) newsletter. That way, it is something folks can opt into and there is value for contributors and users alike.
Matthew Ström’s “Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget” is a great place to learn how to add subscribers to your newsletter with a static form in Eleventy. It also covers a function for sending the subscriber’s email to Buttondown, a lightweight email service. For an example of how to manage your Buttondown email template and content in Eleventy, review the Style Stage setup which shows how to exclude the newsletter from the published site build.
If you’re only expecting low priority updates, then GitHub’s repo notifications might be sufficient for communication. Creating releases is another way to go. Or, hey, it’s even possible to to incorporate notifications on the site itself.
5. Find and engage with potential contributors
Style Stage was an idea that I vetted by tossing out a poll on Twitter. I then put out a “call for contributors” and engaged with responders as well as those who retweeted me. A short timeline also helped find motivated contributors who helped Style Stage avoid launching without any submissions. Many of those contributors became evangelists that introduced Style Stage to even more people. I also promoted a launch livestream which doubled as promotional material.
This is what it means to “engage” with contributors. Creating avenues for engagement and staying engaged with them helps turn casual contributors into “fans” who encourage others to participate.
Remember that the site content is a great place to encourage participation! Style Stage dedicates its entire page to encouraging submissions. If that’s not possible for you, then you might consider using prompts for contributions where it makes sense.
6. Finalize repo settings and include community health files
Finally, ensure that your repository is published publicly and that it includes applicable “community health” files. These are meant to be documents that help establish guidelines, set good expectations with community members, define a code of conduct, and other information that contribute to the overall “health” of the community. There are a bunch of examples, suggestions and tips on how to do this in the GitHub docs.
While there are a half dozen files noted in the documentation, in my experience so far, the three files you’ll need at minimum are:
- a
README.mdfile at the root of the project that includes the project’s name and a good description of what it is. GitHub will display the contents below the list of files in the repo. - a
CONTRIBUTING.mdfile that describes the submission process for contributions. Be explicit as far as what steps are involved and what constitutes a “good” submission. - a pull request template. I wouldn’t exactly say this is a mandatory thing, but it’s worth adding to this list because it further solidifies the expectations for submitting contributions. Many templates will even include a checklist that details requirements for approval.
Oh, and having a branch protection rule on the main branch is another good idea. You can do this by going to Settings → Branches from the repo and selecting the “Add rule” option. “Require pull request reviews before merging” and “Require review from Code Owners” are the two key settings to enable. You can check the GitHub docs to learn more about this protection.
Coming up next…
What we covered here is a starting point for creating a community-driven site with Eleventy. The point is that there are several things that need to be considered before we jump straight into code. Communities need care and that requires a few steps that help establish an engaged and healthy community.
You’re probably getting anxious to start coding a community site with Eleventy! Well, that’s coming up in the next installment of this two-parter. Together, we’ll develop an Eleventy starter from scratch that you can extend for your own community (or personal) site.
Article Series:
- Preparing for Contributions (You are here!)
- Building the Site (Coming tomorrow!)
Tal vez te puede interesar:
- La innovación no puede mantener la Web rápida
- Rendimiento web ultrarrápido
- Tabla de contenidos fijos con estados activos de desplazamiento
- “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario
Un sitio impulsado por la comunidad con Eleventy: preparación para las contribuciones
Serie de artículos:1. Determinar qué contenido tendrán acceso los contribuyentes para modificarlo.2. Cree pautas para los contribuyentes3. Preparar el flujo
programar
es
https://aprendeprogramando.es/static/images/programar-un-sitio-impulsado-por-la-comunidad-con-eleventy-preparacion-para-las-contribuciones-1696-0.jpg
2024-06-13
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente