GitHub 운영 및 페이지

7483 단어 productivitydevopswebdevnode
한동안 GitHub의 작동에 대해 자세히 살펴보고 싶었습니다.이 일을 나는 이미 약 1년 동안 주목했다.
최근에 첨부 프로젝트에 참여할 때 BitBucket과 AWS S3을 웹 사이트로 사용해서 CI/CD 조작을 할 수 있는 기회가 생겼습니다.추가 설명으로 GitHub에서 AWS S3으로 배치하는 것에 대한 제안awesome article을 발견했습니다.
이런 영감을 가지고 나는 또 다른 새로운 프로젝트를 시작했다.
내가 생각할 때, 이것은 나의 여정에 관한 문장이라고 말하라고...
  • 이렇게 하면 나는 내가 길에서 다시 시도할 때 어디에서 물건을 망가뜨렸는지 기억할 수 있다.
  • 그래서 저는 누군가에게 정보를 주고 탐색을 격려할 수 있기를 바랍니다.

    • GitHub 페이지
    프로젝트를 시작할 때 GitHub 페이지를 어떻게 사용하는지 보고 싶습니다.나는 그것들에 관한 몇 편의 문장을 보았는데, 그것이 포함된다.
    그들을 조사하는 것은 논리에 맞는 것 같다.
    우선, 나는 GitHub Pages부터 내가 선택할 수 있다는 것을 깨달았다.
  • 사용자 또는 조직 사이트
  • 프로젝트 현장
    • 내가 무엇을 보고 있는지 확실하지 않기 때문에, 나는 이 두 가지 설명을 통독하였는데, 발견하였다.
  • 사용자 또는 조직 사이트가 초래한 원인https://username.github.io과
  • 프로젝트 현장 위치https://username.github.io/repository
    • ... 이것은 두 번째 옵션을 사용해서 하나의 저장소에 따라 정적 사이트를 만들고 싶다는 것을 나타낸다.
    그래서 지시에 따라 저는 actions-test라는 저장소를 만들었습니다. 이것은 제가 가고 싶은 방향을 설명하는 것 같습니다.
    설명에 따라 저는 저장소를 만들고 사이트에 아래 내용을 수동으로 입력했습니다index.html.
    <html>
  <head></head>
  <body>
    <h1>Hello World!</html>
  <body>
</html>
    알아요...그다지 창의적이지 않다.나는 단지 그것이 쓸모가 있는지 없는지를 보고 싶을 뿐이다.
    그리고 설정 > 페이지에 들어가서 원본 코드를 Branch: main과/ (root)로 설정합니다.저장한 후 저장소 게시를 준비하고 있다는 메시지가 표시됩니다.몇 번 갱신한 후에 이 사이트가 이미 발표되었다는 소식이 전해졌고, 나는 링크를 따라 나의 멋진 사이트를 보았다.

    GitHub 작업
    내가 이 점을 실현할 수 있다는 것을 증명한 이상, 나는 코드를 전송하고 CI/CD 파이프로 페이지를 생성할 수 있는 조작을 찾기 시작했다.
    내가 가장 먼저 발견한 것 중 하나는GitHub Marketplace...나는 분명히 거기에 좀 더 머물러야 한다.
    그리고 시장에서 하나를 만났어요GitHub Pages action.실제로 몇 개...나는 수행자의 수량과 코드 배치 주파수에 따라 이것을 선택했다.
    문서에서 이 코드를 사용할 수 있는 방법은 매우 많다.나는 Static Site Generators with Node.js을 선택했다. 내가 NodeJS로 만든 오래된 프로젝트를 생각해서 대략적인 페이지를 만들었다...이것은 나에게 위의 HTML보다 더 감동적인 것을 주었다.
    다음 단계는 YAML 파일을 작성하는 것입니다.나는 맨 위에 있는 '최신 버전 사용' 단추를 눌렀고, 정확한 버전의 코드를 사용할 수 있도록 확보했다.그리고 나는 위의 링크에 따라 파일을 신속하게 만들었다.github/workflows/gh-pages.yml.
    name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/[email protected]
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
    나는 위의 코드를 상세하게 설명할 생각은 없다...나는 내가 이미 충분히 이해했다고 확신한다.나는 그것이 노드 14npm ci와 npm run build를 사용한 것을 보았다.비록 나는 npm ci의 기능을 배워야 하지만, 이 모든 것은 매우 간단하다.
    호출된 오래된 프로젝트 npm run build 를 사용하여 최종 코드를 만들고 싶기 때문에, 모든 변경 사항은 코드의 마지막 부분에 있습니다.나 바뀌었어...
  • 최신 버전
    • 과 일치하는 uses 줄
  • 코드를 생성하는 publish_dir 폴더의 dist 줄과 일치합니다.

    • 결실
    이 모든 코드와 나의 모든 오래된 프로젝트 코드의 사본을 함께 놓은 후에 나는 밀었다.작업을 관찰하기 위해 워크플로가 실행됩니다(내 저장소를 보면 YAML 파일을 저장하기 전에 버전을 밀어 넣었다가 실패한 것을 볼 수 있습니다).
    곧 나는 새로운 생각이 떠올랐다.설정 > 페이지를 수동으로 설정하고 원본 코드를 Branch: gh-pages 과 / (root) 로 설정해야 합니다.이 지점은 위의 조작 코드로 만들어졌으며 dist 폴더의 내용을 포함한다.
    이렇게 많은 흥분을 겪은 후에 나는 링크를 클릭했다...

    패하다
    ... 404페이지를 보려면 (GitHub에서 시간이 걸리면 내가 무엇을 보고 있는지 알 수 있다.
    긴 말 (대기, 리셋, 검색) 에서 HTML에 <!DOCTYPE html> 표시가 필요하다는 것을 알았습니다.이 탭이 없으면 페이지를 표시할 수 없습니다.

    요약
    mySTATIC REPOSITORY PAGE를 생성하는 과정은 매우 간단하다.이것은 재미있고 유익한 실험이다...파이프가 작동하고 예상한 일을 하는 것을 보면 만족할 것이다. 왜냐하면 언제든지, 언제든지 이 패턴을 반복해서 일을 정확하게 할 수 있다는 것을 알고 있기 때문이다.
    나는 내가 더 많은 것을 배워야 하고 더 많은 글을 써야 한다고 절대로 믿는다.지금 여기는REPO입니다.
    C 언어 병합 정렬
    JavaScript 데이터 구조 - 사전

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage