Astroで自分好みの静的サイトを作る！Hugoからの乗り換え体験記

こんにちは、ねむです。

私はこのブログを運営するために、これまでHugo🔗という静的サイトジェネレータを使ってきました。

HugoはGo言語で書かれた高速で柔軟な静的サイトジェネレータです。

Hugoの特徴やメリットについては、以前の記事で紹介しました。

【ブログリニューアル】WordPressからHugoに乗り換えた理由と手順 WordPressのメンテナンスが大変だったことやSSGの魅力に気づき、Hugoに移行した経緯と手順を詳しく説明しています。

しかし、最近、Hugoに代わる新しい静的サイトジェネレータが注目されています。

その名もAstro🔗です。

AstroはJavaScriptで書かれた静的サイトジェネレータで、以下のような特徴があります。

• HTMLやMarkdownだけでなく、ReactやSvelteなどの人気のフロントエンドフレームワークを使ってコンポーネントベースで開発できます。
• デフォルト状態では、ビルド時にJavaScriptを最小限にして、パフォーマンスやアクセシビリティを向上させます。
• Tailwind CSSやSassなどのCSSフレームワークやプリプロセッサをサポートしています。
• ViteやSnowpackなどの高速なビルドツールを採用しています。
• Cloudflare pagesやNetlifyなどの人気のホスティングサービスと連携できます。

Astroの詳細やメリットについては、公式サイトやドキュメントをご覧ください。

• Astro🔗
• Astro Docs🔗

私はAstroに興味を持ち、試しに使ってみることにしました。

そして、その結果、私はHugoからAstroへとサイトマイグレーションすることを決めました。

この記事では、私がHugoからAstroへとサイトマイグレーションした際の記録をまとめてみました。

ソース管理の設定

まず、ソース管理の設定について説明します。

このブログのソースコードをGitlabというオンラインのリポジトリサービスに保存しています。

また、Windows端末上でGitlabと連携するために、Git for WindowsとTortoiseGitというツールを使っています。

Gitlabとは

GitlabはGitHubと同様に、Gitを使ったソース管理ができるサービスですが、以下のようなメリットがあります。

• 無料プランでもプライベートリポジトリが無制限に作成できます。
• CI/CDやコードレビューなどの開発支援機能が充実しています。
• Cloudflare pagesやNetlifyなどのホスティングサービスと容易に連携できます。

Gitlabの詳細やメリットについては、公式サイトやドキュメントをご覧ください。

• GitLab: DevOps Platform, delivered as a single application🔗
• GitLab Docs🔗

Git for Windows・TortoiseGitとは

Git for Windows🔗はWindows上でGitコマンドを実行できるようにするツールです。

TortoiseGit🔗はWindowsエクスプローラー上で右クリックメニューからGit操作をできるようにするツールです。

Git for WindowsとTortoiseGitのインストールと使い方については、以下の記事を参考にしました。

• WindowsでGitを使うための環境構築🔗
• TortoiseGitのインストールと使い方🔗

これらのツールを使って、HugoからAstroへとサイトマイグレーションするために、以下のような手順を行いました。

• Gitlab上で新しいプライベートリポジトリを作成します。
• Windows端末上で新しいフォルダを作成し、そこにGitlabのプライベートリポジトリをクローンします。
• クローンしたフォルダ内でAstroのプロジェクトを初期化します。
• Astroのプロジェクトに必要なファイルや設定を追加します。
• AstroのプロジェクトをGitlabのプライベートリポジトリにコミットしてプッシュする

コードエディタの設定

次に、コードエディタの設定について説明します。

私はこのブログのコードを書くために、VSCode🔗というコードエディタを使っています。

また、VSCodeでAstroやMarkdownなどに必要な拡張機能をインストールしています。

VSCodeとは

VSCodeはMicrosoft社が開発したオープンソースのコードエディタで、以下のようなメリットがあります。

• 軽量で高速な動作が可能です。
• 様々な言語やフレームワークに対応しています。
• 拡張機能やテーマなどでカスタマイズが可能です。
• デバッグやテストなどの開発支援機能が充実しています。

VSCodeの詳細やメリットについては、公式サイトやドキュメントをご覧ください。

• Visual Studio Code - Code Editing. Redefined🔗
• Visual Studio Code Docs🔗

VSCodeの拡張機能とは

VSCodeの拡張機能とは、VSCodeの機能や外観を拡張するためのプラグインです。

私がインストールした拡張機能は以下の通りです。

拡張機能名	概要
Astro	Astroファイルのシンタックスハイライトや補完機能を利用できます。
Japanese Language Pack for Visual Studio Code	VSCodeのデフォルト言語は英語ですが、この設定を日本語化できます。
markdownlint	Markdownファイルの文法やスタイルをチェックできます。
MDX	MDXファイルのシンタックスハイライトや補完機能を利用できます。
Prettier - Code formatter	コードの整形やフォーマットを行うことができます。
Svelte for VS Code	Svelteファイルのシンタックスハイライトや補完機能を利用できます。
SVG	SVGファイルのシンタックスハイライトやプレビュー機能を利用できます。
Tailwind CSS IntelliSense	Tailwind CSSの補完機能やドキュメント表示機能を利用できます。

これらの拡張機能はVSCode内の拡張機能マーケットプレースから簡単にインストールできます。

拡張機能のインストール方法については、以下の記事を参考にしました。

• Visual Studio Codeで拡張機能をインストールする方法🔗

これらの拡張機能を使って、AstroやMarkdownなどのコードを書く際に便利な機能を利用できるようになります。

Node.jsのインストールとバージョン管理

次に、Node.js🔗のインストールとバージョン管理について説明します。

Node.jsとは

Node.jsとはJavaScriptをブラウザ以外の環境で実行できるようにするプラットフォームです。

AstroはNode.js上で動作する静的サイトジェネレータなので、Node.jsのインストールが必要です。

私はWindows端末上でNode.jsをインストールしました。

Node.jsのダウンロードとインストール方法については、以下の記事を参考にしました。

• Windows 10 へ Node.js をインストールする手順🔗

Cloudflare pagesとは

Cloudflare pages🔗とはCloudflare社が提供するフロントエンド開発者向けのJAMstackプラットフォームで、GitHubやGitLabと連携して、静的なWebサイトを簡単にデプロイできるサービスです。

Cloudflare pagesの特徴やメリットについても解説します。

Cloudflare Pagesの特徴

Cloudflare Pagesは、以下のような特徴を持っています。

• 開発者に優しいGitの統合が可能です。ビルドコマンドを指定するだけで、git pushするたびに自動的にビルドとデプロイが行われます。ビルドログも確認できます。
• コラボレーションを強化する機能があります。各コミットやプルリクエストに対してプレビューリンクが生成され、フィードバックを得やすくなります。無制限のシート数でチームメンバーを追加できます。Cloudflare Accessと統合して、プレビューへのアクセス制御もできます。
• Cloudflareのエッジネットワークでの高速性とスケーラビリティを享受できます。Webサイトは世界中のエンドユーザーから数ミリ秒以内に配信されます。競合他社のプラットフォームよりも最大115%高速です。トラフィックが急増しても安心です。
• Cloudflare Workersとの連携で動的な機能を実現。サーバレスコードを書いて、APIやバックエンドロジックを追加できます。

Cloudflare Pagesのメリット

Cloudflare Pagesを使うと、以下のようなメリットがあります。

• メンテナンスやインフラストラクチャの管理が不要になります。WordPressなどのCMSでは、サーバーやデータベースの更新やセキュリティ対策などが必要ですが、Cloudflare Pagesではそれらを気にする必要がありません。
• Webサイトのパフォーマンスやセキュリティが向上します。静的なWebサイトは動的なWebサイトよりも高速に読み込まれ、DDoS攻撃などにも強くなります。Cloudflare Pagesでは、SSL証明書やWebアナリティクスも無料で提供されます。
• 開発体験が向上します。好きなフレームワークやツールを使って開発できます。ReactやVue、GatsbyやHugoなどの人気のフレームワークに対応しています。もちろん、今回使用するAstroにもしっかり対応しています。Markdownで書いたものをそのままデプロイできます。

ノート

WebアナリティクスはCloudflare pagesで提供されるもので個人ブログ用途としては必要十分だったので、従来利用していたGoogle Analyticsは今回導入するのを止めました。その分、サイトも軽量化できたので一石二鳥です。

ホスティングサービス上にサイトをデプロイする際の注意点

私はこのブログをCloudflare pagesでホスティングしていますが、その際にNode.jsのバージョンが重要になります。

Cloudflare pagesでは、ビルド時にpackage.jsonというファイルに記述されたNode.jsの各ライブラリバージョンを参照して、そのバージョンに合わせてビルドを行います。

Node.jsバージョンずれへの対処方法

しかしながら、ここで問題が発生しました・・・。

私は最新版のNode.jsをインストールしようとしたのですが、そのバージョンはCloudflare pagesでは対応していないことがわかりました。

Cloudflare pagesでは、最新LTS版のNode.js v18.16.0には対応していませんでした。

そのため、私は渋々Node.js v16.20.0という古いバージョンをインストールすることにしました。

最新情報（2023年4月15日時点）

LTSバージョンには非対応・・・と思っていたのですが、記事執筆中に改めて確認したところ、Node.jsのSupported versionsがAny versionに変わってる！？ことが判明。

管理人もまだ試せていないので、LTS版が利用できるかは別途検証したいと思っています。

しかし、これだけでは問題が解決しませんでした。

私は他のプロジェクトでもNode.jsを使っていますが、その際には別のバージョンのNode.jsが必要です。

つまり、プロジェクトごとに異なるバージョンのNode.jsを使い分ける必要があるのです。

そこで、私はNode.jsのバージョン管理ツールnvm🔗というツールを使うことにしました。

nvmとは

nvmとはNode Version Managerの略で、複数のバージョンのNode.jsをインストールして切り替えることができるツールです。

nvmの導入と使い方については、以下の記事を参考にしました。

• Windows 10 へ nvm-windows をインストールする手順🔗

nvmを使って、以下のような手順でNode.jsのバージョンを管理しました。

• nvmをインストールする
• nvmを使ってNode.js v16.20.0とNode.js v18.16.0をインストールする
• nvmを使ってプロジェクトごとにNode.jsのバージョンを切り替える

Astroテーマの選択とカスタマイズ

次に、Astroテーマの選択とカスタマイズについて説明します。

AstroテーマとはAstroで作られたサイトのデザインや機能を提供するテンプレートです。

Astroでは有志のエンジニアがテーマをオープンソースで公開しており、その中から自分の好みや目的に合ったものを選んで使うことができます。

以下のページから提供中のAstroテーマプレビューを見たり、ソースリポジトリのGithubページにアクセスすることができます。

• Astro Themes🔗

私はこのブログ向けに最適なAstroテーマを探しましたが、その中で特に気に入ったものがありました。

その名もAstroPaper🔗です。AstroPaperはミニマルでアクセシブルでSEOに優れたブログテーマです。

AstroPaperの特徴

AstroPaperは、以下のような特徴を持っています。

• TypeScriptでビルドされています。型安全なコードを書くことができます。
• ReactとFuseJSを使って、あいまい検索機能を実装しています。キーワードで記事を探すことができます。
• アクセシビリティに配慮されています。キーボードやVoiceOverなどのナビゲーションが可能です。適切なランドマークや見出し構造などもあります。
• SEOに優れています。カラースキームやソーシャルリンクやメタタグなどをカスタマイズできます。サイトマップやRSSフィードも提供されます。動的にOGイメージも生成されます。
• lightモードとdarkモードに対応しています。好みに合わせて切り替えることができます。
• 下書き記事やページネーションもサポートしています。記事の公開前にプレビューしたり、記事の一覧を分割表示したりできます。
• Markdownで記事を書くことができます。簡単にフォーマットやリンクや画像などを挿入できます。

AstroPaperテーマの詳細やデモについては、以下のサイトをご覧ください。

• AstroPaper🔗
• AstroPaper GitHub🔗

私はAstroPaperテーマを自分のブログに導入することにしました。

AstroPaperのインストール

AstroPaperをインストールするには、以下の手順を踏みます。

1. GitHubからAstroPaperのリポジトリをクローンまたはダウンロードします。
2. ターミナルで、クローンまたはダウンロードしたフォルダに移動します。
3. npm iコマンドで、必要なパッケージをインストールします。
4. npm run devコマンドで、開発サーバーを起動します。
5. ブラウザでhttp://localhost:3000にアクセスして、テーマのデモを確認します。

AstroPaperのカスタマイズ

AstroPaperは、色々な点でカスタマイズできます。以下に主なカスタマイズ方法を紹介します。

• src/config.tsファイルで、ブログのタイトルや説明やカラースキームやソーシャルリンクなどを設定できます。
• src/pages/index.astroファイルで、トップページのレイアウトやコンテンツを変更できます。
• src/layouts/PostLayout.astroファイルで、記事ページのレイアウトやコンテンツを変更できます。
• src/componentsフォルダ内のファイルで、各種コンポーネントのスタイルや機能を変更できます。
• publicフォルダ内に、画像やフォントなどの静的なアセットを配置できます。

これらの手順に従って、AstroPaperテーマを自分のブログに導入することができます。

当ブログでは以下のようなカスタマイズを行いました。

• サイトのカラースキームやフォントの変更（fontsourceの導入）
• サイトのロゴやアイコンの変更
• サイトのヘッダーやフッターに自分のSNSアカウントへのリンクを追加
• サイトのナビゲーションバーに自己紹介ページへのリンクを追加
• 記事のタイトルや日付などの表示位置や全体的なデザインフォーマットを変更
• 記事に目次や前後の記事へのリンクを追加（remarkプラグイン導入）
• 記事にコメント機能やシェアボタンを追加（Giscus導入）
• レイアウト・ページ等で使用する各種コンポーネント（Astro・Svelte・React）を新規作成（一部はHugoで使用していたものを移植したが、Tailwind CSSではなくBootstrapであったため、ほとんどのものは作り直しました）

導入した依存ライブラリの紹介

当サイトのpackage.jsonで今回導入した依存ライブラリは以下のとおりです。

ライブラリ名称	概要
@astrojs/image	Astroで画像を最適化するためのプラグインです。このプラグインを使って、画像のサイズやフォーマットを自動的に調整したり、レスポンシブな画像を生成したりできます。
@astrojs/mdx	AstroでMDXを使うためのプラグインです。MDXとは、MarkdownにReactコンポーネントを埋め込むことができる拡張機能です。このプラグインを使って、Markdownの中に動的な要素を追加できます。
@astrojs/react	AstroでReactコンポーネントを使うためのプラグインです。このプラグインを使って、AstroのページやレイアウトにReactコンポーネントを埋め込むことができます。
@astrojs/rss	AstroでRSSフィードを生成するためのプラグインです。このプラグインを使って、ウェブサイトの更新情報をRSS形式で配信できます。
@astrojs/sitemap	Astroでサイトマップを生成するためのプラグインです。このプラグインを使って、ウェブサイトの構造やメタデータをXML形式で出力できます。
@astrojs/svelte	AstroでSvelteコンポーネントを使うためのプラグインです。このプラグインを使って、AstroのページやレイアウトにSvelteコンポーネントを埋め込むことができます。
@astrojs/tailwind	AstroでTailwind CSSを使うためのプラグインです。このプラグインを使って、Tailwind CSSの設定やカスタマイズが簡単にできます。
@fontsource/ibm-plex-sans-jp, @fontsource/noto-sans-sc	日本語と中国語のフォントを提供するパッケージです。AstroではCSSファイルからフォントをインポートできます。
@giscus/react	GitHub Discussionsをコメントシステムとして使うためのReactコンポーネントです。AstroではReactコンポーネントをハイドレーションすることで動的に読み込むことができます。
@resvg/resvg-js	SVGファイルを高品質にレンダリングするためのパッケージです。このパッケージを使って、SVGファイルをPNGやJPEGなどの他のフォーマットに変換したり、SVGファイルにフィルターやエフェクトを適用したりできます。
@tailwindcss/typography	Tailwind CSSの拡張機能です。このパッケージを使って、MarkdownやHTMLの文章に美しいスタイルを適用できます。
@types/markdown-it	TypeScriptの型定義ファイルです。このパッケージを使って、markdown-itというMarkdownパーサーの型エラーを防ぐことができます。
@types/react, @types/react-dom	TypeScriptの型定義ファイルです。これらのパッケージを使って、ReactとReactDOMの型エラーを防ぐことができます。
@types/sanitize-html	TypeScriptの型定義ファイルです。このパッケージを使って、sanitize-htmlというHTMLのサニタイズライブラリの型エラーを防ぐことができます。
@typescript-eslint/parser	ESLintのパーサーです。このパッケージを使って、TypeScriptのコードにESLintのルールを適用できます。
astro-eslint-parser	Astroのパーサーです。このパッケージを使って、AstroのコードにESLintのルールを適用できます。
astro-i18next	i18nextという国際化ライブラリをAstroで使うためのプラグインです。このプラグインによって、複数言語のページを簡単に作成できます。
astro	Astro自体です。このパッケージには、Astroのコア機能やビルドツールが含まれています。
commitizen	コミットメッセージの作成ツールです。このパッケージを使って、コミットメッセージに一貫性と可読性を持たせることができます。
cz-conventional-changelog	commitizenの拡張機能です。このパッケージを使って、コミットメッセージにconventional-changelogという規約を適用できます。
eslint-plugin-astro	ESLintのプラグインです。このパッケージを使って、AstroのコードにESLintのルールを適用できます。
eslint	JavaScriptやTypeScriptの静的解析ツールです。このパッケージを使って、コードの品質やスタイルをチェックできます。
fuse.js	クライアントサイドで動く高速な検索エンジンです。このパッケージを使って、ウェブサイト内の記事やコンテンツを検索できるようにしました。
github-slugger	GitHubのように見出しにアンカーリンクを生成するためのパッケージです。このパッケージを使って、記事の見出しにユニークなIDとリンクアイコンを追加できます。
husky	Gitフックの管理ツールです。このパッケージを使って、Gitコマンドに対してカスタムなアクションを実行できます。
i18next	国際化ライブラリです。astro-i18nextと組み合わせて、言語ごとに異なるコンテンツやレイアウトを表示できます。
iconify-icon	SVGアイコンのライブラリです。このパッケージを使って、ウェブサイトに様々なアイコンを追加できます。
lint-staged	Gitステージングエリアにあるファイルに対してリントやフォーマットなどの処理を行うツールです。このパッケージを使って、コミット前にコードの品質やスタイルをチェックできます。
markdown-it	Markdownパーサーです。このパッケージを使って、MarkdownファイルをHTMLに変換できます。
prettier-plugin-svelte, prettier-plugin-tailwindcss	prettierのプラグインです。これらのパッケージを使って、SvelteファイルやTailwind CSSのスタイルにprettierのルールを適用できます。
prettier	コードフォーマッターです。このパッケージを使って、コードのスタイルやインデントなどを統一できます。
react, react-dom	Reactフレームワークです。これらのパッケージを使って、ウェブサイトにReactコンポーネントを追加できます。
remark-collapse	Markdownの拡張機能です。このパッケージを使って、折りたたみ可能なセクションを作成できます。
remark-emoji	Markdownの拡張機能です。このパッケージを使って、Markdownの中に絵文字を簡単に挿入できます。
remark-toc	Markdownの拡張機能です。このパッケージを使って、目次を自動的に生成できます。
rimraf	ファイルやディレクトリを削除するためのパッケージです。このパッケージを使って、ビルド前に不要なファイルやディレクトリをクリーンアップできます。
sanitize-html	HTMLのサニタイズライブラリです。このパッケージを使って、HTMLの中に不正なタグや属性を除去できます。
satori	Svelteコンポーネントを使ってスライドショーを作成するためのパッケージです。このパッケージを使って、ウェブサイトにプレゼンテーションやチュートリアルなどのスライドショーを追加できます。
sharp	画像処理ライブラリです。このパッケージを使って、画像のサイズや品質を調整したり、WebPやAVIFなどの最新のフォーマットに変換したりできます。
svelte	Svelteフレームワークです。このパッケージを使って、ウェブサイトにSvelteコンポーネントを追加できます。
swiper	スライダーのライブラリです。このパッケージを使って、ウェブサイトにスライドショーやカルーセルなどのスライダーを追加できます。
tailwindcss	ユーティリティファーストなCSSフレームワークです。このパッケージを使って、HTMLにクラス名を追加するだけでスタイルを適用できます。
typescript	TypeScript言語です。このパッケージを使って、ウェブサイトのコードに型安全性や最新の機能を追加できます。

サイトマイグレーションの手順と結果

最後に、サイトマイグレーションの手順と結果について説明します。

作業手順

私はHugoからAstroへとサイトマイグレーションするために、以下のような手順を行いました。

• Hugoで作成した記事ファイルの拡張子をMDXに変更しました。（そのままではmarkdown内で各種コンポーネントのimport利用ができない）
• Hugoで使っていた設定ファイルやテーマファイルで、Astroで使えないものは削除しました。
• Hugoで使っていた画像ファイルや静的ファイルをAstroで使えるようにsrc/publicフォルダに移動しました。
• Astroで必要な環境変数やビルドコマンド等をCloudflare pagesで設定しました。
• 新規作成したGitlab上のリポジトリブランチでCI/CD設定を行い、プッシュ毎に自動でCloudflare pagesにビルド・デプロイされるようにしました。

サイトマイグレーション後、私はパフォーマンスや見た目などの比較を行いました。

パフォーマンスについては、Googleが提供するPageSpeed Insightsというツールで測定しました。

PageSpeed Insightsとは

PageSpeed InsightsとはGoogle社が提供するウェブページのパフォーマンスやユーザビリティを評価するツールです。

PageSpeed Insightsの詳細や使い方については、以下のサイトをご覧ください。

• PageSpeed Insights🔗

比較結果

私はHugoとAstroで作成した同じ記事ページに対して、PageSpeed Insightsで測定しました。

その結果、以下のようなスコアが出ました。

静的サイトジェネレータ	モバイル	デスクトップ
Hugo	58	98
Astro	90	100

この結果から、AstroはHugoよりもわずかに高いパフォーマンスを示していることがわかります。モバイルに至ってはAstroのほうがスコアは大幅に改善されていることが確認できます。

サイトデザインについては、以下のスクリーンショットで比較できます。

旧デザイン（Hugo）

新デザイン（Astro）

このスクリーンショットから、AstroはHugoよりもシンプルでミニマルな見た目になっていることがわかります。

まとめ

このように、私はHugoからAstroへとサイトマイグレーションしました。

HugoからAstroへのサイトマイグレーションのメリットとデメリットをまとめると以下のようになります。

メリット

• AstroはJavaScriptやフロントエンドフレームワークを使ってコンポーネントベースで開発できるので、柔軟性や拡張性が高いです。
• Astroはビルド時にJavaScriptを最小限にして、パフォーマンスやアクセシビリティを向上させることができます。
• AstroはTailwind CSSやSassなどのCSSフレームワークやプリプロセッサをサポートしているので、スタイルの管理がしやすいです。
• AstroはViteやSnowpackなどの高速なビルドツールを採用しているので、開発効率が高いです。
• Astroは有志のエンジニアがテーマをオープンソースで公開しているので、自分の好みや目的に合ったものを選んで使うことができます。

デメリット

• Astroはまだ新しい静的サイトジェネレータなので、バグや不具合、ドキュメントやチュートリアルが不十分な場合があります。
• AstroはJavaScriptやフロントエンドフレームワークを使って開発することが多いので、学習コストが高い場合があります。

感想と展望

Astroに関する感想や今後の展望を以下のように述べたいと思います。

感想

• AstroはHugoよりも自由度やパフォーマンスが高く、開発体験が良かったです。
• AstroはJavaScriptやフロントエンドフレームワークを使って開発することが多く、新しい技術に触れることができたのは面白かったです。
• まだ新しい静的サイトジェネレータなので、テーマやインテグレーションも含めてバグや不具合に遭遇することもありましたが、それもまた思い出の一つとなりました。

展望

• Astroは今後もアップデートや改善が続くと思うので、常に最新情報をチェックしていきます。
• Astroは今後もテーマやインテグレーションなどのエコシステムが発展すると思うので、積極的に利用したり貢献できればと思います。
• Astroは今後も自分のブログに合わせてカスタマイズしていきたいです。

以上、HugoからAstroへとサイトマイグレーションした際の記録となります。

Astroに興味のある方は、ぜひ試してみてください。

参照先サイト

• Astro Docs🔗
• Astro🔗
• AstroPaper GitHub🔗
• Cloudflare pages🔗
• Git for Windows🔗
• GitLab Docs🔗
• Hugo🔗
• Node.js🔗
• nvm🔗
• PageSpeed Insights🔗
• TortoiseGit🔗
• TortoiseGitのインストールと使い方🔗
• Visual Studio Code🔗
• Visual Studio Codeで拡張機能をインストールする方法🔗
• Windows 10 へ Node.js をインストールする手順🔗
• Windows 10 へ nvm-windows をインストールする手順🔗
• WindowsでGitを使うための環境構築🔗