Eleventy (11ty) has become my go-to static site generator. Its speed, flexibility, and unopinionated nature make it ideal for various projects, including community-driven websites like Style Stage, a CSS showcase powered by community contributions. Eleventy's strengths for this type of project include: lightning-fast builds, template flexibility, versatile file creation and rendering, support for multiple templating languages (HTML, Markdown, Nunjucks), and high performance due to its static HTML output.

The key to a successful community-driven site with Eleventy is its ability to dynamically generate pages from data sources. This article outlines the essential pre-coding steps for building such a site.

Series Overview:

1. Preparing for Contributions (Current Article)
2. Building the Site (Next Article)

Building a Thriving Community Website: Key Considerations

Creating a community-driven site used to be complex. However, with Eleventy and other modern tools, the process is significantly streamlined. Before inviting contributors, consider these crucial steps:

1. Define Contributor Access

Decide what content contributors can modify. For Style Stage, a JSON file allows contributors to submit pull requests with metadata used to generate their pages. You might also allow asset uploads or multiple data files for categorization. Consider the scope of contributions and your capacity for review to ensure a manageable community. GitHub Actions can automate checks for invalid files.

2. Establish Clear Guidelines

Well-defined guidelines are essential. These guidelines should be documented in a CONTRIBUTING.md file in your GitHub repository. This file automatically appears when contributors create pull requests or issues. Address content licensing, author attribution, and acceptable content policies. Style Stage, for example, specifies rejection criteria for inappropriate imagery or guideline violations.

3. Implement Workflow and Automation

Eleventy handles the site build, but other tools like Netlify and GitHub enhance the contribution process. Netlify creates deploy previews for each pull request, allowing contributors to test their submissions and saving maintainers time. GitHub facilitates public discussion and accountability. For more frequent data updates, consider using IFTTT or Zapier to schedule regular deploys. Note that this workflow requires contributors to have GitHub accounts.

4. Choose a Communication Method

Determine the importance of notifying contributors about updates. Style Stage uses a weekly newsletter (managed using Netlify Forms, Netlify Functions, and Buttondown, as detailed in Matthew Str?m's article "Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget"). Alternatives include GitHub repo notifications or releases.

5. Recruit and Engage Contributors

Promote your project to find contributors. Style Stage used Twitter polls and a "call for contributors" campaign, engaging with potential contributors and turning them into project advocates. A launch livestream also helped generate interest. Remember to actively engage with your community and provide avenues for participation. Highlight contribution opportunities within your site content.

6. Configure Repository Settings

Ensure your repository is public and includes essential "community health" files:

• README.md: Project description.
• CONTRIBUTING.md: Submission guidelines.
• Pull Request Template: A structured template for submissions.

Implement branch protection rules (Settings → Branches) to require pull request reviews before merging to the main branch.

Next Steps

This article provides a foundation for building a community-driven site with Eleventy. The next article will delve into the code, creating an Eleventy starter project that you can adapt for your own community or personal website.

Series Overview:

1. Preparing for Contributions (Current Article)
2. Building the Site (Next Article)

The above is the detailed content of A Community-Driven Site with Eleventy: Preparing for Contributions. For more information, please follow other related articles on the PHP Chinese website!