ブログ記事の投稿の仕方

このブログに記事を投稿する場合、主に2種類の方法がある。

Netlify CMSを使う方法

1. ブログに設定したNetlify CMSにアクセスする
2. GitHubの認証を求められるので実施する。Netlify IdentityがGitHub ID ProviderのProxyとなり認証が完了する。認証が完了しない場合はユーザー登録ができてない
3. New Blogボタンを押す
4. SLUG, TITLE, DESCRIPTION, TAGS, HEADER IMAGEを設定する
5. 記事を書いてpushする
6. publishする

GitHub Actionsでテンプレートを作り、Markdownの編集をする

Netlify CMSは便利だが、もたつくので。

1. https://github.com/tubone24/blog/actions/workflows/create_article_md.yml からActionsをWorkflow_dispatchする
2. PRができるのでMarkdownを編集する
3. masterにマージすれば記事投稿完了

記事のライフサイクル

GitHub Flowっぽい感じで記事作成のワークフローができる。

Feature Branchについては、Netlifyに専用のDeployPreview環境ができあがるため、記事の仕上がりはそちらで確認する。

DeployPreview URLはビルドごとにPRコメントに投稿され、同時にGitHub Deploymentにも反映される

flowchart TB
CreateMarkdown -->|WriteArticle| PushMarkdown
PushMarkdown --->|CreatePullRequest| DeployPreview
EditArticle --->|PushMarkdown| DeployPreview
DeployPreview --->|CheckArticle| EditArticle
DeployPreview --->|ReviewOthersArticle| Approved
Approved --->|Merge| DeployProduction

Loading

画像の取り扱い

Netlify CMSを使うと、画像をブランチにpushしてassetsとして呼び出すことができるが、処理が超重いのと最適化処理をしないため使わないこと。

Imgurを使って画像を投稿し、そのdirect urlを貼り付ける。

注意

中途半端な状態のMarkdownを投稿するとビルドエラーになる。 Table of Contentsの作成に失敗するため。

• h2の見出しは記事に一つは入れること
• h2見出しに必ず段落もしくは小見出しをつけること。h2だけ用意しておくとエラーになる

textlint

pushごとにtextlintが走る。

PRにReviewdogがまずい表現を指摘してくれるので、そちらに基本従う。

例外的にコメントを使うことで無効化することができるが、乱用しないこと。

<!-- textlint-disable -->
不適切な表現
<!-- textlint-enable -->