junghanacs🧠

Backlinks

#라이팅허브: #린터: #깃허브 액션

ᨒ Sourceᨒ Blameᨒ History ↗

Created: Modified: 12 min read

이 노트에 대하여

Zenn 기반 글쓰기 저장소에 textlint와 GitHub Actions를 결합해 자동 교열 흐름을 만들려 한다. 로컬 편집과 원격 저장소, 퍼블리시를 하나로 잇는 글쓰기 자동화 구상이 중심이다.

BIBLIOGRAPHY

How to Zenn and Textlint Github Action

  • Related Pages

TL;DR

[2023-08-31 Thu 14:12]

  • 젠을 사용하여 깃허브 저장소 연동하여 글 관리
  • 텍스트린트를 저장소에 추가하여 실시간 교정 : 텍스트 에디터
  • 깃허브 액션을 이용한 글 관리 및 교열 워크플로우

STEP-01 : Zenn Github Repo with Zenn-Cli

[2023-07-11 Tue 13:28] https://zenn.dev/zenn/articles/install-zenn-cli

git clone git@github.com:junghan0611/zenn-blog.git

Connect Zenn and Github Repo on Browser

[2023-07-11 Tue 13:29] https://zenn.dev/zenn/articles/connect-to-github

리포 등록하면 로컬 텍스트 에디터에서 글쓰기 가능. 리포 등록하면 리포 변경이 바로 젠에 반영 된다.

만들고 연결했다. 공개 또는 비공개 다 가능하다.

https://github.com/junghan0611/zenn-blog

빈껍데기를 만들어서 연결한 것이다. 아래와 같은 리포에 가면 잘 구성된 예제를 볼 수 있다. 아무튼 껍데기에서 시작한다. https://github.com/Yuhta28/zenn-blog

Install Zenn-Cli with NPM

[2023-07-11 Tue 13:44]

로컬 프로젝트로 설정하고

npm init --yes
npm install zenn-cli
 
npx zenn init
 
# npm install zenn-cli@latest

그럼 다음과 같이 메시지가 나온다. 일본어로 나온다.

Generating README.md skipped.
 
  🎉  Done!
  早速コンテンツを作成しましょう
  즉시 콘텐츠를 만들어 봅시다.
 
  👇  新しい記事を作成する
  👇  새 아티클 만들기
  $ zenn new:article
 
  👇  新しい本を作成する
  $ zenn new:book
 
  👇  投稿をプレビューする
  $ zenn preview

README.md .gitignore, articles, books 이렇게 생긴다. 오케이.

Learn from Zenn-Cli Guide Document

[2023-07-11 Tue 14:03] https://zenn.dev/zenn/articles/zenn-cli-guide 큰 어려움은 없다. 다음으로 나아가자.

Articles : 기사를 관리하는 방법

[2023-07-11 Tue 14:45]

articles 폴더에 Markdown 파일을 만들면 된다. 샘플로 젠 문서 폴더를 확인하라고 한다. https://github.com/zenn-dev/zenn-docs

아티클을 만들어본다. slug 를 지정하지 않으면 랜덤 값이 들어간다. 지정해주는게 좋겠다.

 
# npx zenn new:article
npx zenn new:article --slug first-zenn-article
 
---
title: "" #기사의 제목
emoji: "😸" #아이 캐치로 사용되는 그림 문자(1글자만)
type: "tech" #tech:기술 기사/idea:아이디어 기사
topics: [] #태그.["markdown","rust","aws"]과 같이 지정한다
published: true #공개 설정(false 로 만들려고 초안)
---
ここから本文を書く

이미지 삽입 관련하여,

  1. GitHub 레파지토리 내에 화상을 배치하는 방법 파일 사이즈 3 메가 제한 images 에 넣고 절대 경로로 지정할 것. 
    #올바른 지정 방법
 
![](/images/example-image1.png)
![](/images/example-article-1/image1.png)
 
#잘못된 지정 방법
 
![](../images/example-image1.png)
![](//images/example-image1.png)
  2. Gyazo 등의 외부 서비스에 업로드한 이미지의 URL 을 붙인다 https://gyazo.com/captures https://imgur.com/user/gtgkjh/favorites

미리 보기는

npx zenn preview

작성 후 공개 할 때는 published true 로 변경하고 깃허브에 푸시 한다.

공개 예약도 가능하다.

published: true #true 를 지정한다
published_at: 2050-06-12 09:03 #미래의 일시를 지정하는

이저 날짜로 설정하여 공개하려면 과거 날짜로 지정하면 된다. 다만, 공개 일시는 한 번만 설정 가능하다.

글 수정해서 깃허브에 푸시하면 젠에도 반영이 된다. 단, Slug 를 변경하면 다른 파일로 인식 된다.

삭제는? 깃허브에서 파일 삭제한다고 해서 젠에서 지워지지 않는다.

데시보드 https://zenn.dev/dashboard 에서 삭제를 해야 한다.

Books : 책을 관리하는 방법

[2023-07-11 Tue 14:45]

글을 모으다 보면 결국 책으로 정리하게 된다.

디렉토리 구성의 예

#구체적인 사례
books
└── my-awesome-book
    ├── config.yaml
    ├── cover.png
    ├── example1.md
    ├── example2.md
    └── example3.md

설정 파일의 예

title: "책의 제목"
summary: "책 소개 글"
topics: ["markdown", "zenn", "react"] #토픽(5개까지)
published: true #false 라고 초안
price: 0 #유료의 경우 200~5000
chapters:
  - example1 #챕터 1
  - example2 #챕터 2
  - example3 #챕터 3

각 챕터 파일의 경우

---
title: "제목"
free: true
---

챕터의 순서를 정하려면, 설정 파일에 나열 한다. introduction.md 파일이 있다는 것을 전제한다.

# config.yaml
...省略...
chapters:
  - introduction
  - results
  - conclusion

Markdown Guide and Zenn Tips

[2023-08-29 Tue 17:08] 문서로 만들어서 올렸다.

[2023-07-11 Tue 15:27] https://zenn.dev/zenn/articles/markdown-guide

STEP-02: Simple Textlint Sample : Obsidian Vscode Emacs : 실시간 교열

[2023-08-31 Thu 14:12] 아래 제대로 정리가 안되어 있긴 하지만. 여기에서 필요한 것은 텍스트린트 입문이다. 젠 저장소에 린터를 붙여서 교정해보는 것 이다. 단순한 수준에서 체험 정도. 여기서 텍스트 에디터가 들어간다.

  • flycheck - 실시간 교정

[2023-07-07 Fri 09:58] 일단 영어 샘플 테스트를 이맥스로 붙여 보자. 이맥스에 넣어주자.

simple workspace

따라하기로 쉽게 경험할 수 있다. 기본은 md, txt 파일인데 오그 파일 지원해보자.

suppoerted file formats

[2023-07-07 Fri 13:45] md txt 말고 다른 포멧을 지원. 특히 org 파일. 어떻게?! https://github.com/textlint/textlint#supported-file-formats

org 만 테스트 해본다.

https://github.com/kijimaD/textlint-plugin-org

여기에서 열심히 만들고 있네. 일본 사람이네. 마스터님이시네. 굉장하구만! 그건 그거고 제대로 동작하겠네 만든 사람을 보니까.

$ npm install --save-dev textlint-plugin-org
$ npx textlint file.org

plugins 에 org 를 넣고 검사 해본다.

test ja

[2023-07-07 Fri 10:17] 일본어 테스트 해보자. 왜?! 이게 한글 지원 기준점이 될 것이니까.

https://github.com/textlint/textlint/wiki/Collection-of-textlint-rule 문서가 기준이 된다.

결국 각각이 기능이 있고, 묶어서 스타일 시트가 된다. 구글 기술 문서 스타일이라던가 각각이 그렇게 엮여 있다.

https://github.com/hata6502/textlint-rule-ja-simple-user-dictionary 실행해 볼 필요가 없겠다. 그것 보다는 어떻게 룰을 만들 것인가가 중요하다.

룰을 만드려면?!

룰을 만드는 방법과 규칙 중복되는 것들과 한글에 필요한 룰 자바스크립트로 만드는 것. 좋다.

룰을 텍스트린트의 일부로 동작하는 코드다. 형식에 맞게 만들어야 동작한다.

문서에서 따라 해보기 를 해봐야 겠다. 배포 할 것은 아니지만 일단 동작이 가능해야 한다.

vscode-emacs-textlint 실시간 교정 환경 구축

[2023-07-27 Thu 11:07]

Vscode - Textlint :: 실시간 검사

[2023-07-13 Thu 06:05] https://qiita.com/takasp/items/22f7f72b691fda30aea2

특별한 것은 없다. 설정이 잡혀있는 경우 텍스트린트가 동작한다. 괜찮네. Flycheck 사용하는 것과 똑같다.

Emacs - Textlint :: 실시간 검사

flycheck 잘 된다

STEP-03 Github Action 활용 교열 리뷰 워크플로우

[2023-08-31 Thu 14:18] 글을 일단 쓰고 자동화 툴을 이용하는 방법. 팀워크로 같이 편집하기도 좋고. 기록 관리도 좋고.

문법 다른 부분을 커버할 수 있는가? 다른 것은 모르겠고 디테일이랑 힌트만 처리할 수 있으면 커버 된다. 액션 으로 넣어야 할 것이 무엇인가?!

  • 텍스트린터 넣는다
  • 일본 글 보면서 따라하기 후 샘플 구성 만들어 본다.
  • reviewdog

아래 글을 기반으로 정리. https://zenn.dev/yuta28/articles/blog-lint-ci-reviewdog

이러한 과정의 목적은 깃에 푸시하고 나서 액션에서 교정 검사를 하고 리포트 하는 것이다. 당연히 필요하겠지만 나는 오프라인에서 내 문서를 실시간으로 교정하길 원한다.

23-07-13 6:08 AM 무엇을 할 것인가? 잠시만. 엑션 테스트가 의미?! 무슨 처리를?! 되는 것을 가정하고 룰을 정리하고 하나씩 만들어야 하지 않을까? 일본일들이 바라는 기준 중에 우리에 가져올 게 있는지도 볼일이다.

Github Action + Textlint + Reviewdog

[2023-07-12 Wed 09:57]

규칙 관련. 아 배고프다.

Action-Textlint — 2023/02 : 템플릿

[2023-07-13 Thu 05:56] https://github.com/tsuyoshicho/action-textlint

액션을 프로젝트 템플릿으로 제공.

NEXT 디노 전체 교정 환경 구축

[2023-07-27 Thu 11:15] 노드 말고 디노 기반으로 내가 만든 디노 플러그인까지 넣어서 리뷰도그 및 일본에서 말하는 최상위 환경 동작 확인

키워드 라이팅허브

Comments

Backlinks