Zenn 입문GiitHub 창고와 Zenn 합작[전편: 환경구축]

수정 내역
2021/3/31 초안
2021/4/12 제목, 기사 2부 구성으로 대폭 변경(전편: 환경구축, 후편: Giit 입문)
2021/8/9Giit 설치를 후편으로 변경

개시하다

기트를 배우게 된 계기.
저는 Zenn에서 기고 기술 보도를 하고 싶습니다. Zenn의 내용 제작 가이드를 보고 기고 방법을 배우고 싶습니다.
제작 안내서를 보니 투고 방법이 두 가지가 있었다.

웹 편집

로컬 텍스트 편집기 + CLI(GiitHub 연합)

인터넷 편집은 현재 자신에게 더 적합하지만 초고 기사 상태로 편집하면 똑똑하지 않다.원상 복구는 번거로우니 현지 환경에서 작업을 확인한 후에 투고해야 한다
주위의 젊은 엔지니어들은 마치 Gitでバージョン管理するのが普通っしょ 같은 분위기다.
좋아!이를 계기로 지트를 배워서 아저씨도 엔지니어의 대화에 들어갈 수 있도록!
그래서 선택했다２．ローカルのテキストエディター + CLI（GitHub連携).
하지만 투고까지 가는 길은 쉽지 않아 (ToT) 내게는
다음은 GiitHub과 공동으로 Zenn에 기고한 두 차례의 절차를 설명할 것이다
자기 스타일이니까 더 좋은 방법 있으면 알려주세요.
【전편: 환경 구축】
　　1. 네트워크 공개용 환경 구축(GiitHub 등록 및 Zenn에 대한 연합)
　　2. 로컬 환경 구축(Zenn CLI 설치)
[후편: 기사 투고(Giit)]
　　3. GTI 설치
　　4. Giit 명령 기반 발언 단계(add,commiit,remote,push)

개요도
Zenn의 투고에 관심이 없네~ 게다가 Giit 환경도 구축됐네~
이런 분들은 건너뛰세요후편: 기사 기고(Git).

1. GiitHub 등록 및 Zenn 협업

곧 GiitHub 사이트에서 자신의 창고를 만들고 Zenn과 그 창고의 일을 합작하세요.
창고가 뭐예요?이 분은
창고는 파일이나 디렉터리 상태를 기록하는 곳을 가리킨다.
간단히 말하면, 자신의 일터(업무 기록)를 만들고 싶다면 된다.
■ 참고: 원숭이 선생님의 깃 입문
https://backlog.com/ja/git-tutorial/intro/02/

1.1 GiitHub 등록 → 1.2 Zenn 공동 작업

1.1 등록 GiitHub

GiitHub에 액세스하여 GitHubに登録する를 클릭합니다.
GiitHub 공식 홈페이지https://github.co.jp/

이렇게 되면 계정 로그인 화면이 나와요.Username, Email, Password 등에 필요한 정보를 입력하고 Create Account를 클릭합니다.

Welcome to GiitHub 등의 화면에서는 주로 어떤 작업을 합니까?이런 질문은 아무거나 괜찮아요.
(예: Software Engineer)
등록된 이메일 주소로 인증만 하면 OK.

다음은 창고 등록.

아래 3개Create repository를 클릭해서 만들었다고 적었습니다.

Reposigtory name : zenn-content

Description:Zenn 연합용 창고(Optional)

Public/Private : Public

창고가 완성되었다.

창고에 패스워드, 클라우드 자원 ID 등을 넣지 마세요.
가상화폐 발굴 처리 등에 악용돼 막대한 비용이 요구되는 경우도 있다
특히 삽입식 코드에 주의해야 한다.

1.2 Zenn과의 협력

그럼 1.1로 만든 창고와 젠의 대시보드를 연합해 보자.

Zenn 대시보드 웹 사이트를 방문하십시오.

Zenn의 대시보드https://zenn.dev/dashboard/deploys

합작 창고를 클릭하세요.

1.1에서 제작한 창고를 선택해 협업을 진행한다.

단계는 다음과 같다.

Only select repositories 선택

Select repositories의 드롭다운 메뉴에서 1.1로 만든 창고

를 선택한다.

Install &Authrize 클릭

Giithub-Zenn 콜라보 완료!!

했어!이렇게 하면 당신의 기사를 투고하는 곳(^o^)/~
Giithub에 투고하면 Zenn에서 기사를 볼 수 있습니다.

그렇지만
기사를 반쯤 썼는데 중간에 공개하기 싫은데...
자기 PC에서 기사를 사전 점검하려고..
내 생각엔 그렇지?
다음은 2. ローカル環境構築(Zenn CLIインストール)에서 자신의 컴퓨터에서 확인할 수 있는 젠 로컬 환경 구축 방법에 대해 설명한다.

2. 로컬 환경 구축(Zenn CLI 설치)

2.1 Zenn CLI(노드.js) 설치

먼저 Zenn CLI 툴을 설치합니다.
설치 후 크롬 등 브라우저에 편집 중인 글 파일(hello-zen-world.md)을 입력하면 Zenn 사이트 투고의 미리보기 화면을 확인할 수 있다.
Node.js 설치 확인
Zenn CLI 는 노드입니다.js제 프로그램이래요.
자기 컴퓨터에서 노드.명령 알림을 통해 js 환경이 설치되었는지 확인하십시오.

$ node --version

버전 나오면 OK.

Node.js를 설치하지 않은 사용자에게
Zenn CLI 는 노드입니다.js라는 언어로 만들어졌기 때문에 노드입니다.js를 미리 설치하지 않아도 안 될 것 같아요.
다음 사이트에서 설치합니다.
https://nodejs.org/ja/download/
참고로 2021/3/9에 추천판 14.16.0LTS를 설치했습니다.
Zenn CLI 설치
명령 알림에서 Zenn의 발언용 작업 폴더로 이동하여 다음 명령을 실행하십시오

$ npm init --yes            # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli      # zenn-cliをインストール

npm init의 실행 결과

npm 설치 실행 결과

2.2 ZennCLI 초기 설정

2.1 작업 폴더에서 Zenn의 초기 설정 명령을 실행하십시오.

$ npx zenn init      # Zennの初期設定

이렇게 하면 문장, 책을 보존하는 데 필요한 서류를 완성할 수 있다.
야!http://localhost:8000 외에 README.md와 gitignore라는 폴더도 만들었다.여기에 투고용 표기문건articles을 넣는다.
실행 결과는 이렇다

2.3 Zenn Preview 화면 시작

다음 명령을 사용하여 Preview 화면을 시작합니다.

$ npx zenn preview      

브라우저에서 동작 확인
크롬과 같은 브라우저에 다음 내용을 입력하십시오

http://localhost:8000/

축하합니다!

현지 환경 작업이 끝났다.
다음 그림과 같이 Zenn Editor의 화면을 표시하면 됩니다.

다음 Zenn Editor 시작

작업 폴더books에서 진행하면 ZennCLI에서 사전에 확인할 수 있습니다.

최후

ZennCLI는 기고문의 태그 파일 (XXX.md) 을 VS 코드에 저장하는 데 매우 편리합니다.
곧 그 결과를 확인할 수 있으니까요.여러분도 꼭 해보세요.
다음에는 기고문 기사 제작부터 기트 투고를 사용하는 순서까지 설명한다.
최후
기술 기사 쓰는 게 쉽지 않네.나는 아래의 보도를 좀 일찍 투고하고 싶다.
후편은 여름방학에 올릴 테니 조금만 기다려 주세요.

사이트 축소판 그림

컨텐트 생성 설명서

원숭이 선생님의 깃 입문

일은 이제 와서 물어볼 수 없다!GiitHub의 사용 방법[초보자용

git 공식 웹사이트(Book)