【自作ブログ #1】自作ブログを作りたい

現在はこちらのはてなブログで記事を書いていますが、ブログを自作してみたいなとも思いました。

実際に移設するかどうかは置いておいて、とりあえず作ってみます。

方針を考える

フロントエンドについては、最近のトレンドに倣って下記を採用します。

• TypeScript
• React
• Next.js
• Styled Components

記事管理について、バックエンドのシステムを組んだり、ヘッドレスCMSの導入も考えられますが、
初期段階では一旦Markdownファイルで管理することとします。

デプロイ先はGitHub Pagesとします。
無料で利用できますし、ソース管理もGitHubで行うので、あとは少しの設定やymlファイルを1つ用意するだけで済みます。
楽ちんです。

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

プロジェクト作成

プロジェクトの土台を作っていきます。

editorconfig

editorconfigを利用して、IDEが自動でフォーマットしてくれるようにします。

(.editorconfig)

# EditorConfig is awesome: https://EditorConfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[Makefile]
indent_style = tab

[*.md]
trim_trailing_whitespace = false

asdf

node.jsのバージョンはasdfで管理します。

asdf-vm.com

node.jsの他にも複数の言語を一括で管理できることと、手順が簡略なことがメリットです。

asdf local nodejs [node.jsのバージョン]

Next.jsのプロジェクト作成

npxを利用してNext.jsのプロジェクトを作成します。
typescriptを適用します。

npx create-next-app@latest --typescript

Prettierの導入

ひとまずFormatterのPrettierだけ導入しておきます。
これを入れれば、簡単にソースコードのフォーマットを綺麗に保つことができます。

prettier.io

npm i -D prettier

設定ファイルを用意します。

(.prettierrc.yml)

singleQuote: true
semi: false

Next.jsが自動生成するファイルを、Format対象から除外しておきます。

(.prettier)

.next

実行コマンドを追加します。

(package.json)
{
  ...
  "scripts: {
    ...
    "prettier": "prettier -c .",
    "prettier:fix": "prettier -w ."
    ...
  }
}

ここまでで、プロジェクトの土台が作れました。

Pull Request

https://github.com/nek0meshi/blog/pull/2/commits

あとがき

最近スノボに行ったんですが、あばらを折ったみたいです。