DEV Community

loading...
Cover image for Check how green your web project is

Check how green your web project is

Filip Troníček
Open Source for life <3
Updated on ・2 min read

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

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

Read about it in my Dev.to post

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 to master, or any other branch

Additional Resources / Info

Used GitHub projects:

Upload-Artifact v2

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@v2
  with:
    name: my-artifact
    path: 

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@master
      with
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
        fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git commit -m "Add changes" -a
    - name: Push

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

Usage

$ ncc <cmd> <opts>

Eg:

$ ncc build input.js -o dist

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 to use .js files as modules in native Node.js using a "type": "module" in the package.json file.

Commands:

  build <input-file> [opts]
  run

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

yo image




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

Discussion (3)

Collapse
michaeltharrington profile image
Michael Tharrington (he/him) • Edited

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

Collapse
filiptronicek profile image
Filip Troníček Author

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

Collapse
michaeltharrington profile image
Michael Tharrington (he/him) • 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.

Forem Open with the Forem app