DEV Community

Cover image for Check how green your web project is
Filip Troníček
Filip Troníček

Posted on • Edited on

Check how green your web project is

My Workflow

Ever wondered, how much carbon gets produced every time someone visits your site? You can now do that, and track the changes in the effects on the environment on every push or PR! With the help of website carbon and their API, you can get a badge in your README and an artifact on every workflow run on where your projects currently sit.

Here is how the badge can look like:
Demo of badge

Submission Category:

DIY Deployments

Yaml File or Link to Code

(Don't forget to edit any parts that you want, especially the URL and the branch)

name: Website green-o-meter

on:
  push:
    branches: main

jobs:
  update-stats:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
        with:
          persist-credentials: false 
          fetch-depth: 0
      - name: green-website
        uses: filiptronicek/green-action@main
        env:
            URL: https://dev.to # Your measured URL
      - name: Commit files
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "Update carbon image" -a
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main # Branch to push to
Enter fullscreen mode Exit fullscreen mode

All the code:

GitHub logo filiptronicek / green-action

Check how your web project is affecting the planet

Green Action

Check how your project is affecting the planet and check the carbon stats

Read about it in my Dev.to post

Demo

Setup

  1. Open your README and add paste the following tag in there (this will be where the image will be placed): <!-- CARBON-STATS -->
  2. Add the following workflow to your .github/workflows folder:
name: Website green-o-meter
on:
  push:
    branches: main

jobs:
  update-gist:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
        with:
          persist-credentials: false
          fetch-depth: 0
      - name: green-website
        uses: filiptronicek/green-action@main
        env:
          URL: https://dev.to #Your measured URL
      - name: Commit files
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "Update carbon image" -a
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main #Change this
Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

Used GitHub projects:

Upload-Artifact v3

This uploads artifacts from your workflow allowing you to share data between jobs and store data once a workflow is complete.

See also download-artifact.

What's new

  • Easier upload
    • Specify a wildcard pattern
    • Specify an individual file
    • Specify a directory (previously you were limited to only this option)
    • Multi path upload
      • Use a combination of individual files, wildcards or directories
      • Support for excluding certain files
  • Upload an artifact without providing a name
  • Fix for artifact uploads sometimes not working with containers
  • Proxy support out of the box
  • Port entire action to typescript from a runner plugin so it is easier to collaborate and accept contributions

Refer here for the previous version

Usage

See action.yml

Upload an Individual File

steps
- uses: actions/checkout@v2

- run: mkdir -p path/to/artifact

- run: echo hello > path/to/artifact/world.txt

- uses: actions/upload-artifact@v3
  with:
    name: my-artifact
    path: 
Enter fullscreen mode Exit fullscreen mode

GitHub logo ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

With ease:

  • update new code placed in the repository, e.g. by running a linter on it,
  • track changes in script results using Git as archive,
  • publish page using GitHub-Pages,
  • mirror changes to a separate repository.

Usage

Example Workflow file

An example workflow to authenticate with GitHub Platform:

jobs
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
        fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
        git config --local user.name "github-actions[bot]"
        git commit -m "Add changes" -a
    - name: 
Enter fullscreen mode Exit fullscreen mode

GitHub logo vercel / ncc

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

ncc

CI Status codecov

Simple CLI for compiling a Node.js module into a single file together with all its dependencies, gcc-style.

Motivation

  • Publish minimal packages to npm
  • Only ship relevant app code to serverless environments
  • Don't waste time configuring bundlers
  • Generally faster bootup time and less I/O overhead
  • Compiled language-like experience (e.g.: go)

Design goals

  • Zero configuration
  • TypeScript built-in
  • Only supports Node.js programs as input / output
  • Support all Node.js patterns and npm modules

Usage

Installation

npm i -g @vercel/ncc
Enter fullscreen mode Exit fullscreen mode

Usage

$ ncc <cmd> <opts>
Enter fullscreen mode Exit fullscreen mode

Eg:

$ ncc build input.js -o dist
Enter fullscreen mode Exit fullscreen mode

If building an .mjs or .js module inside a "type": "module" package boundary, an ES module output will be created automatically.

Outputs the Node.js compact build of input.js into dist/index.js.

Note: If the input file is using a .cjs extension, then so will the corresponding output file This is useful for packages that want…

Help with the project:
I learned a lot from implementations of GH Actions by

yo image

(check him out, he's an awesome developer)

Top comments (3)

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

This is such a cool idea! Also, perfect cover image, haha!

Collapse
 
filiptronicek profile image
Filip Troníček

Thanks very much, very happy, that you enjoyed it. Any ideas how the project could improve?

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

I think it might be cool if the user could pick a different stat to highlight than the percentage of how green it is compared to other sites. I noticed there are other stats on this page - websitecarbon.com/website. Perhaps it'd be cool if you could choose to highlight how much CO2 is produced every time someone visits your page.