Category: Front-End Programming

GitHub Actions로 Vuepress 배포하기

내 TIL 사이트는 Vuepress로 말아져 있다

http://milooy.github.io/TIL/
커스텀하기 편하고 가볍다.
정적 사이트 장점을 살려 GitHub Pages에 배포해뒀다.

사이트를 배포하는 가장 기본적인 방법은
매번 글을 작성할때마다 로컬에서 빌드 -> gh-pages 브랜치에 force push 하는건디
증맬 귀찮은 일이다.

package.json에 deploy 스크립트를 만들어서 가-끔 생각날때마다 돌려주곤 했는데…

"scripts": {
    "dev": "vuepress dev documents",
    "build": "vuepress build documents",
    "commit": "vuepress build documents && git add build -f && git commit -m 'Subtree commit'",
    "deploy": "git push origin `git subtree split --prefix build master`:gh-pages --force"
  },

GitHub Actions를 사용해
코드를 푸시할때마다 자동으로 위 스크립트가 돌도록 업데이트를 해봤다.
(그전까진 왜 안한겨.. 생각보다 나의 참을성이 좋구머잉)

하는법 간단히 기록해두기~

Step 1: Vuepress로 사이트를 만든다

다큐멘테이션 보면 금방 만들어용 https://vuepress.vuejs.org/
다 만들면 GitHub 저장소에 푸시하셈.

Step 2: 저장소에 GitHub Pages 세팅하기.

저장소 Settings탭 -> GitHub Pages 섹션에 가서
Source를 ‘gh-pages’로 바꾼다. 그러면 gh-pages브랜치에 있는 index.html 읽어서 사이트를 보여줌.

image

Step 3: workflow 파일 생성

저장소 루트에 .github/workflows/main.yml 파일을 만든다. main말고 원하는 다른 이름 써도 무방.

아래 코드를 복사하고 저장한다.
jenkey2011이란 깃헙 유저가 배포한 action 가져다 쓴거다.
https://github.com/marketplace/actions/vuepress-deploy

Dockerfile, Docker Hub 이라고 생각함 될듯. 선언적 문법 매력적이다. 일해라 절해라 적어두기.

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@main

    - name: Vuepress deploy
      uses: jenkey2011/vuepress-deploy@1.0.1
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BUILD_SCRIPT: yarn && yarn build
        TARGET_BRANCH: gh-pages
        BUILD_DIR: build/

Step 4: GitHub 저장소에 환경변수 세팅

위 yaml 파일 보면 ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}를 쓰는데, GitHub 저장소에 ACCESS_TOKEN 환경변수를 세팅해줘야 한다.

먼저 내가 나라는걸 증명하는 프라이빗 토큰을 발급받자.
Settings > Developer settings > Personal access tokens에 들어가
https://github.com/settings/tokens

Generate new token 하면 된다(기존에 만들어놨다면 재활용 해도 된다)
image

이렇게 만든 토큰을
저장소 Settings > Secrets > New secret에 key는 ACCESS_TOKEN라 적고 value에 토큰을 복사 붙여넣기 하면 된다. 고럼 yaml 파일이 돌면서 저장소 환경변수를 참고해감.

image

Step 5: Happy TIL-ing!

yaml 파일을 GitHub에 올린다. 코드를 Push할때마다 자동으로 GitHub액션이 돌며 위에 선언한 Yaml코드가 실행된다.
저장소 Actions 탭에서 확인 가능!

image

npx create-react-app 에서 A template was not provided. This is likely because you’re using an outdated version of create-react-app. 에러가 날 때

Problem

CRA 공식 문서대로 npx create-react-app my-app 명령어를 입력했는데

A template was not provided. This is likely because you're using an outdated version of create-react-app.

에러가 나면서 빈 react app이 생성되었다.
훗 뭐 예전에 글로벌로 설치했던 cra 때문이겠지 하고 npm uninstall -g create-react-app 돌리고 재실행했는데 여전히 위에 에러가 났다.

npm list -g 로 글로벌 모듈을 봐도 create-react-app이 없는데 무슨 일이지… 했음

Solution

which create-react-app

명령어로 컴에 아직 cra가 남아있는지 찾는다. 나는 /usr/local/bin/create-react-app 에 있더라.

rm -rf /usr/local/bin/create-react-app

위 명령어로 가뿐하게 지워준다.
다시 npx create-react-app my-app 하면 이젠 template 껴져서 제대로 된다 🙂

[CSS] 반응형으로 정사각형 만들기

결론: after요소에 padding-bottom을 100% 넣어주면 된다.
내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다.

<div class="note">
    <div class="inner">
        <div class="title">{noteData.title}</div>
    </div>
</div>

.note {
  border: 1px solid red;
  &amp;:after { /* after로 반응형 정사각형 만들기 */
    content: &quot;&quot;;
    display: block;
    padding-bottom: 100%;
  }
  .inner { /* 내부에 컨텐츠가 있을 때 추가 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Refer

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

[CSS] div에 의도하지 않은 여백이 들어가 있을 때

Problem

btn-container라는 div에 btn-group 3개 div를 넣었더니 그 3개 div 사이에 틈이 생겼다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-14-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-2-09-25

Solution

  1. whitespace를 주석처리
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
`
  1. 걍 다 붙여버리기.
    django에 {% spaceless %}태그 써도 됨.
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 잔망스런 엔터
<!-- 1 -->
<div>

text
<div>

text
<div>

text
<div>

text
<div>text</div>
<!-- 2 -->
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 부모 폰트사이즈 0, 자식에서 다시 키우기
#parent {
font-size: 0;
}

#child {
font-size: 16px;
}
  1. parent를 display: flex 설정하기
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}

Refer

http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038875#19038875
(아웃사이더님이 알려주심 감사합니다)