Hello Github Actions
GitHub actions are something that I was always curious about but never really explored, thanks to this hackathon I took a dive and was able to come up with something that actually solves one of my problems.
Gulp Runner
Like many of us, I have a personal site deployed on GitHub Pages. 🌐
It uses SCSS so I have to convert it to CSS pre-deployment, I also like to have my scripts and styles minified.
While building the site I used gulp for these tasks and everything worked as it should.
The only issue is when I have to make some quick updates to the styles or scripts on a new machine or on my phone, I have to setup the local dev environment along with node, npm and lots of node modules.
While reading up on GitHub actions this is the problem that came up to my mind, that can be fixed quite easily using a simple workflow. 🤔
What this action does is, on push events it looks at changes in the script and styles file. If it does find any changes It runs and carries out the gulp tasks (sass -> css & minifying) and makes a new commit.
Thus allowing me to tweak my site from anywhere without worrying about node or npm at all. 📱😁
Submission Category:
- Phone Friendly
- DIY Deployments
gulp-runner.yml
name: Run gulp tasks
# Controls when the action will run.
on:
push:
# On which branch
branches: ["master"]
# On which files
paths: ["scripts/scripts.js", "styles/styles.scss"]
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# Job name
build:
# Runner name
runs-on: ubuntu-latest
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v2
# Sets up node
- uses: actions/setup-node@v1
with:
node-version: 12
- run: npm ci
- run: gulp
- name: Commit files
run: |
git config --local user.name ${{ github.actor }}
git add -A
git commit -m "Update gulp output files"
- name: Push changes
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.REPO_GITHUB_TOKEN }}
# force: true
Additional Resources / Info
My portfolio site's repo, using this workflow
2KAbhishek
/
2kabhishek.github.io
My personal space on the interweb. 🖤🌐
2kabhishek.github.io
This is the source for my personal portfolio site of the same name. Live version
Feel free to fork it for your own use.
Run npm install
after clone to install all the required dependencies. Uses gulp
for task management.
Sections
-
Lead - Contains name, designation & other contact links.
-
About - Contains short description and/or career goals.
-
Experience - Previous work experiences in chronological order.
-
Education - Education details in chronological order.
-
Projects - Projects undertaken with links to source/live version.
-
Skills - Lists acquired skills and industrial knowledge.
My unsuccessful attempt to turn it into a reusable action, need some more reading, If anyone knows what I'm doing wrong please help me out. 🙏🏼
2KAbhishek
/
gulp-runner
Runs defined gulp tasks on push. 🥤🏃🏻
gulp-runner
Gulp Runner
This github action will run default tasks mentioned in a gulp file and then commit the changes.
Requirements
Add a secret named REPO_GITHUB_TOKEN
to your repo for pushing updated changes.
Customization
In your repo's .github/workflows/main.yml
file paths
can be customized.
More customizations
For custom commit messgaes, fork the repo, In the .github/workflows/gulp-runner.yml
commit messages can be customized.
Discussion (0)