엔드투엔드 깃허브 중심 SDLC 자동화 프로세스 :
‘딸깍’하면 GitHub가 자동으로 첨부터 끝까지 다 해줌”
프로젝트를 체계적으로 관리할 수 있고 그 과정을 통합하고 자동화해주는 플랫폼과 프레임워크는 원래 있었다. (Jenkins, CircleCI, Travis-CI 등..)
그리고 이런 툴로 SDLC 자동화를 구축 해주는건 국룰이었다.
2019년 깃헙에서도 SDLC 자동화를 지원해주는 Github Actions이 나왔다.
Github Actions를 쓰게 된다면 기존의 SDLC 툴과 달리 원격저장소와 완벽한 통합이 가능 하다는거다.
코드 저장소와 CI/CD가 같은 플랫폼에 있다보니 설정도 간단했고,
외에 GitHub의 형상관리 기능들(Issues, Projects, Security 등)을 활용할 수 있다는 것도 ㄹㅇ개꿀이다.
또한 Marketplace에서 다른 개발자들이 만든 Actions를 가져다 쓸 수 있어서
거의 모든 작업을 복붙 수준으로 구현할 수 있다.
예를 들어 AWS에 배포하고 싶다? → 관련 Action 찾아서 쓰면 끝
Node.js 테스트하고 싶다? → 테스트 Action 가져다 쓰면 끝!
이런 편의성 덕에 특히 작은 규모의 프로젝트나 오픈소스에서 아주 유용하게 쓰이고 있음.
Github Actions의 동작 과정
1.이벤트 발생 : git push 하거나 풀리퀘스트 생성
2.Github가 `.github/workflows` 폴더를 뒤져서 해당 이벤트에 반응하도록 설정된
workflow 파일을 찾아냄
3. `workflow` 에 정의 된 스크립트 실행
workflow 란?
자동화하고 싶은 작업의 절차이다.== pipeline
그 절차를 작성해 놓은 실행파일이 workflowfile이다.
workflow 구성
job :
- 실행할 작업 단위
- 테스트, 빌드, 배포 등등 하고 싶은 일들을 job으로 정의
- 여러 job은 기본적으로 병렬로 실행됨 (순서 정할 수도 있음)
runner :
- job을 실행하는 서버
- Github에서 제공하는 가상 머신
- 각 job마다 깨끗한 새 환경에서 시작함
step :
- job 안의 실제 실행 단계
- 순차적으로 실행되는 명령어들
- marketplace의 action을 가져다 쓰거나 직접 명령어를 실행할 수 있음
workflowfile 예시
on: push: # 코드가 push될 때 branches: [main] pull_request: # PR이 생성될 때 branches: [main] schedule: # 정해진 시간에 - cron: '0 0 * * *' workflow_dispatch: # 수동으로 실행할 때 #event는 workflow의 실행 조건을 정의할 수 있다.
Head to “Settings” tab of your forked repository and in the sidebar, click “Pages”. Under “Source”, select “GitHub Actions”.
Commit these changes by doing npx quartz sync. This should deploy your site to .github.io/.
General Configuration
This part of the configuration concerns anything that can affect the whole site. The following is a list breaking down all the things you can configure:
pageTitle: title of the site. This is also used when generating the RSS Feed for your site.
pageTitleSuffix: a string added to the end of the page title. This only applies to the browser tab title, not the title shown at the top of the page.
enableSPA: whether to enable SPA Routing on your site.
enablePopovers: whether to enable popover previews on your site.
analytics: what to use for analytics on your site. Values can be null: don’t use analytics;
{ provider: ‘google’, tagId: '' }: use Google Analytics;
{ provider: ‘plausible’ } (managed) or { provider: ‘plausible’, host: '' } (self-hosted): use Plausible;
{ provider: ‘umami’, host: '', websiteId: '' }: use Umami;
{ provider: ‘posthog’, apiKey: '', host: '' }: use Posthog;
{ provider: ‘tinylytics’, siteId: '' }: use Tinylytics;
{ provider: ‘cabin’ } or { provider: ‘cabin’, host: ‘https://cabin.example.com’ } (custom domain): use Cabin;
{provider: ‘clarity’, projectId: ‘<your-clarity-id-code’ }: use Microsoft clarity. The project id can be found on top of the overview page.
locale: used for i18n and date formatting
baseUrl: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical ‘home’ of your site lives. This is normally the deployed URL of your site (e.g. quartz.jzhao.xyz for this site). Do not include the protocol (i.e. https://) or any leading or trailing slashes.
This should also include the subpath if you are hosting on GitHub pages without a custom domain. For example, if my repository is jackyzha0/quartz, GitHub ages would deploy to https://jackyzha0.github.io/quartz and the baseUrl would be jackyzha0.github.io/quartz.
Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter where you end up actually deploying it.
ignorePatterns: a list of glob patterns that Quartz should ignore and not search through when looking for files inside the content folder. See private pages for more details.
defaultDateType: whether to use created, modified, or published as the default date to display on pages and page listings.
theme: configure how the site looks.
cdnCaching: If true (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (false) this if you want Quartz to download the fonts to be self-contained.
typography: what fonts to use. Any font available on Google Fonts works here.
header: Font to use for headers
code: Font for inline and block quotes.
body: Font for everything
colors: controls the theming of the site.
light: page background
lightgray: borders
gray: graph links, heavier borders
darkgray: body text
dark: header text and icons
secondary: link colour, current graph node
tertiary: hover states and visited graph nodes
highlight: internal link background, highlighted text, highlighted lines of code
textHighlight: markdown highlighted text background
리로드 문제 발생
layout을 변경하고싶은데,
서버를 껏다켜야만 변경사항이 적용됐다.
package.json에서 npx quartz build --serve가 어떻게 돌아가는지는 위에서 학습했다.
파싱 된 커맨드 파일인 bootstrap-cli.mjs 에서 확인해보니
Contents 만 감지하고 레이아웃은 감지 안한다.
그래서 해결 방법으로 nodemon을 인스톨하고
"scripts": 내부에
새로운 커맨드라인을 생성 해줬다.
