Creating Your Own Bragdoc With Eleventy

As developers, our accomplishments, big or small, significantly contribute to our professional growth. However, these achievements often go unnoticed, lost amidst other tasks. This "invisible work," as described by Ryan T. Harter in his talk "Getting Credit for Invisible Work," is easily forgotten, especially during performance reviews.

Julia Evans's article on maintaining a "brag document" offers a solution. A brag document is simply a record of your valuable contributions, including project involvement, assistance to colleagues, process improvements, presentations, workshops, learning experiences, extracurricular activities (blogging, personal projects), awards, and career advancements.

While various tools exist for creating brag documents, such as bragdocs.com, building your own offers greater customization. This tutorial demonstrates how to recreate a bragdocs.com-like site using the static site generator Eleventy. With minimal JavaScript and CSS, you can build your own personalized brag document.

Building Your Brag Document

This tutorial's outcome mirrors bragdocs.com, providing a foundation for your own unique brag document. A live demo is available here.

Prerequisites

• Node.js (version 10 or higher) and npm.
• Familiarity with HTML and CSS.
• Understanding of Markdown, Nunjucks templating, and JavaScript (helpful, but not strictly required).
• Basic programming concepts (if statements, loops, accessing JSON variables).

Introduction to Eleventy

Eleventy is a static site generator. Unlike full-stack development, it allows flexible content creation using various templating languages (HTML, Markdown, Liquid, Nunjucks, etc.). Eleventy processes this content, generating static HTML pages for easy hosting.

Setting up Your Eleventy Project

This tutorial uses the repository eleventy-bragdoc.

1. Project Creation: Create a GitHub repository (e.g., eleventy-bragdoc) with a README.md and a .gitignore file for Node.

2. Initialization: Navigate to the eleventy-bragdoc directory in your terminal and run: npm init -y This creates a package.json file.

3. Eleventy Installation: Install Eleventy: npm install @11ty/eleventy

4. Configuration (package.json): Update the scripts section of package.json:

{
  // ...
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  },
  // ...
}

5. Eleventy Configuration File (.eleventy.js): Create a .eleventy.js file to specify input and output directories:

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
}

6. Content Creation: Create the src directory and add an index.md file (your first page). Eleventy supports various templating languages; this example uses Markdown.

7. Template Creation: Create the src/_includes/layouts directory and add a base.njk file (your base template using Nunjucks).

8. Connecting CSS and Images: Create src/css and src/images directories. Update .eleventy.js:

module.exports = function(eleventyConfig) {
  eleventyConfig.addWatchTarget("./src/css/")
  eleventyConfig.addWatchTarget("./src/images/")
  eleventyConfig.addPassthroughCopy("./src/css/")
  eleventyConfig.addPassthroughCopy("./src/images/")
  // ...
}

The remaining steps detail the construction of the bragdoc functionality, including collections, data handling, styling, and deployment. The complete code and detailed explanations for each step are available in the original text.

The above is the detailed content of Creating Your Own Bragdoc With Eleventy. For more information, please follow other related articles on the PHP Chinese website!