Zenn으로 이동: Zenn Getting Started

생각한 게 있어 주요 기술 블로그를 젠으로 옮기기로 했다.
그리고 젠에서 집필하기 위해 조사를 해봤는데, 젠은 간단한 방법을 준비했다.
다만, 젠 측은 이른바'Getting Started'없이 젠 공식 계정 기사로 각 기능에 대한 설명을 준비했다.
가볍게 투덜거려도 한꺼번에 제대로 된 것을 찾지 못해'없으면 혼자 해라'라는 주제로 이 기사를 썼다.

본 보도에서 할 수 있는 일

로컬 환경에서 기사를 미리 볼 수 있음

Yaml 설정을 포함하는 글 파일을 명령으로 만들 수 있음

GiitHub의 창고와 협업하여 누르기만 하면 기사를 투고할 수 있음

전제 조건

Zenn에 계정 등록

GiitHub에 계정 등록

Zenn CLI 환경 구축

참고자료①:Zenn CLI 설치
참고자료 ②: Zenn CLI로 기사·문서 관리 방법
젠에서는 문장의 집필과 미리보기 수단Zenn CLI으로 마련됐다.Zenn CLInpm 라이브러리로 로컬 환경에서 글 파일을 만들거나 미리 볼 수 있는 환경을 구축할 수 있습니다.
온라인 편집도 있지만 후술한 지티허브 협업으로 개인은 현지 환경에서 집필하는 것을 추천한다.
이 항목에서는 사용Zenn CLI 환경을 구축합니다.
좋아하는 곳에 작업 디렉터리를 만들고 작업 디렉터리에 터미널을 엽니다.
종착역에서 하는 상황

$ mkdir {作業ディレクトリ名}
$ cd {作業ディレクトリ名}

작업 디렉터리에서 npm를 초기화하고 가져오기 Zenn CLI 를 설정합니다.

$ npm init --yes
$ npm i zenn-cli
$ npx zenn init

도입 후 정상 근무 여부를 확인한다.

$ npx zenn preview

적절한 브라우저 액세스http://localhost:8000/를 사용하십시오.Zenn Editor뜨면 오케이!

npx가 아니라 npm의 경우입니다.

Zenn 측 기사에는 npx zenn *** 명령 실행 형식으로 기술되어 있습니다.
근데 npm script로 하고 싶어요.어떻게든 하고 싶어요.npx로 타자하는 게 익숙하지 않아서요.
따라서 먼저 npm script로 만드는 방법을 기술해 봅시다.npm run xxx에서는 다음과 같습니다.
package.json

{
  (略),
  "scripts": {
+     "p": "zenn preview",
+     "n:a": "zenn new:article",
+     "n:b": "zenn new:book",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  (略)
}

package.json를npx zenn ***로만 썼을 뿐이다.
이렇게 하면"xxx": "zenn ***" 열려면Zenn Editor 된다.잘 됐다!

GiitHub 제휴

참고 자료: GiitHub 창고를 이용하여 Zenn의 콘텐츠 관리
Zenn이 GiitHub 창고와 합작할 수 있어서 정말 기쁩니다.
지정한 지점만 업데이트하면 자동으로 동기화됩니다.
이 항목에서 Giit의 초기화, GiitHub 창고의 제작과 동기화 설정을 진행한다.
방금 환경을 구축한 작업 디렉토리에서 Giit를 초기화하여 제출합니다.

$ git init
$ git add -A
$ git commit -m "最初のコミット"

GiitHub 측의 설정을 진행한다.
공중이든 개인이든 창고를 적당히 만들 수 있다.
제작이 완료되면 초기 페이지의 지시에 따라 작업 디렉터리를 눌러라.

$ git remote add origin https://github.com/{GitHubアカウント名}/{リポジトリ名}.git
$ git branch -M main
$ git push -u origin main

다음은 GiitHub과 Zenn의 연합이다. 그러나 이 시간npm run p에는 지점만 존재한다.
zenn의 동기화 설정은 지점 이름을 지정할 수 있기 때문에 main 지점 이외의 지점을 사용하려면 만들 수 있습니다.
(이후 변경 가능, 연기 가능)

$ git branch {ブランチ名}
$ git push origin {ブランチ名}

창고가 있다면 젠의프로그램 관리부터 합작한다.
이것은 보면서 Zenn 공식 계정 글 진행할 수 있습니다.
설정이 완료되면 잘 협조할 수 있는지 확인해 주세요.main로 문장 파일을 만들고 적당히 뭘 쓰세요.
이럴 때는 위npx zenn new:article를 사용하면 멋있어진다.

자동 제작된 기사는 초고 설정인 만큼 젠과 협업해도 공개되지 않으니 안심이다.
(문장 파일의 여섯 번째 줄에서 좌우로 기술한Zenn Editor글을 쓴 후 방금 지정한 지점을 제출하고 창고로 옮겼다.
아니면 다른 지점으로 눌러서 GiitHub로 합병을 요구해도 됩니다.
지정한 분기를 업데이트하면 Zenn이 변경 사항을 감지하고 동기화합니다.
비공개 기사를 보통으로 볼 수 없으니 프로그램 관리부터 확인하세요.
잘 협력한다면'최근 절차'로서 방금 추가된 기사를 열람할 수 있을 것이다.

끝말

협조해 주셔서 감사합니다.
미리 보기 기능도 준비할 수 있다.
이렇게 하면 로컬 편집자로부터 복제하지 않고 순조롭게 글을 쓸 수 있다.나는 매우 기쁘다.