This document introduces Github Actions for beginners. It discusses what DevOps and Github Actions are, how to write Github Actions using YAML files, examples of hosting a React app on Github Pages using Actions, and how to publish custom Actions to the Github Marketplace. The key points are that Github Actions allow automating projects using event triggers, reusable Actions run in isolated environments, and writing Actions only requires basic YAML configuration files.

2. 從 Github Action 開始簡易入門 DevOps
自動化你的專案吧！
Leo Liao
2023.06.04

3. About Me

4. 講者之路初心者
自由潛水員
前端工程師
Leo Liao
LINE Taiwan Limited - UIT 1

5. What is DevOps ?

6. DevOps
開發 Development
+
維運 Operations
=
※Source from： https://www.smartsheet.com/devops
What is DevOps ?

7. C A L M S
What is DevOps ?
Culture
Automation
Lean
Measurement
Sharing

8. What is Github Action ?

9. What is Github Action ?
自動化工具
事件觸發
高複用性
安全環境變數
多環境建置、測試、部署

10. Github Action Scope
Workflow
Action Action
Action
Job
Action Action Action
Job
Action Action Action
Job
Action Action Action
Job
Action Action Action
Job
Action Action Action
Job

11. Where is Github Action running ?
Github Runner
● Public Repo: No limit
● Free Tier
○ Private Repo: 2,000 minutes/month
● Team
○ Private Repo: 3,000 minutes/month
● Enterprise
○ Private Repo: 50,000 minutes/month

12. Where is Github Action running ?
Self-hosted Runner

13. About Github Action
.github/workflows > YAML

14. How to write Github Action ?

15. How to write Github Action?
on
name jobs

16. Github Action - name

17. Github Action - on
Source: https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows
on: push
on: [ push,label ]
on:
label:
types:
- created
push:
branches:
- main
Event Type
● issue
● label
● pull_request
● push
● schedule

18. Github Action - jobs
18
jobs:
[job name]:
run-on: [runner]
steps:
- name: [step name]
run: [bash]
- name: [step name]
uses: [action path]
with:
[input key]: [input value]
jobs:
build-job:
run-on: ubuntu-latest
steps:
- name: Checkout project
uses: actions/checkout@v3
- name: Set up nodejs
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install Package
run: npm ci

19. Github Action - jobs
jobs:
build-job:
run-on: ubuntu-latest
steps:
- name: Checkout project
uses: actions/checkout@v3
- name: Set up nodejs
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install Package
run: npm ci
Condition
if: ${{ github.event_name == 'push' }}
if: ${{ vars.name == 'env value' }}
Context
${{ github.event_name }}
${{ vars.name }}
${{ secrets.name }}
Multiple lines command
- run: |
npm ci
npm build

20. Github Action - Set variable & secret

21. Github Action - Environment
jobs:
build-job:
run-on: ubuntu-latest
steps:
- name: Checkout project
uses: actions/checkout@v3
- name: Set up nodejs
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install Package
run: npm ci
Trigger environment in job
jobs:
build-job:
run-on: ubuntu-latest
environment: development
steps: ……….

22. Case: Host React on Github Page

23. Case: Host React App on Github Page
● npx create-react-app demo-site
● package.json > scripts > build > react-scripts build && cp build/index.html build/404.html
● package.json > homepage > “https://honglinliao.github.io/demo-action”
● create a github repo and push to origin

24. Case: Host React App on Github Page
Pull Reqest Create
Install Package
Workflow
job
Test
Build
Pull Reqest Merged

25. Case: Host React App on Github Page
Push
Install Package
Workflow
job
Test
Build
Deploy job
Upload Artifact

26. Case: Host React App on Github Page
Deploy job
Download
Artifact
Workflow
job
Deploy
Github Action
Github Page Action

27. Case: Host React App on Github Page
Create file: .github > workflows > workflow.yml

28. Case: Host React App on Github Page

29. Case: Host React App on Github Page

30. Case: Host React App on Github Page

31. Case: Host React App on Github Page

32. Case: Host React App on Github Page

33. Case: Host React App on Github Page

34. Case: Host React App on Github Page

35. Case: Host React App on Github Page

36. Publish action to Marketplace

37. Write custom action
Docker
container
Custom Action
Javascript composite

38. Howt to write composite action
● Required: name, description, runs
● For publish marketplace: author, branding

39. Howt to write composite action

40. Publish to Github Marketplace
● Add README.md
● Each repository contain single action.yml
● action.yml in root directory
● action.yml contain auth, branding
● Two-factor authentication (2FA)

41. Publish to Github Marketplace
41

42. Publish to Github Marketplace

43. Publish to Github Marketplace

44. Publish to Github Marketplace

45. Publish to Github Marketplace

46. Publish to Github Marketplace

47. Github Action Advantage

48. Github Action Advantage
方便：不需建置Infra
高彈性：複用Action 整合性：都在Github上操作
易用性：寫YAML不用10分鐘

49. Q & A

50. Medium
Link
LinkedIn Survey