【執筆中】「Si-Fa-printの個人サイト」の作り方

🚧 注意: この記事は現在執筆中です 🚧

情報が不完全であるか、今後内容が大きく変更される可能性があります。あらかじめご了承ください。

[1章]この記事の目的は、このサイトを作れるようになること

このページでは、「Si-Fa-printの個人サイト」がどのように作成されているかということについて説明します。個人サイトを作りたいと考える人にとって参考になれば幸いです。私にはそんなに専門的な知識は無いです。その辺の人よりは詳しいかな？くらいの知識。ですが、この記事を読んでいただければこのサイトと同じものを作れるようになるということを目標にして記事を書きます。

なお、この記事と同じ方法で小規模なサイトを作ったときにかかる費用は年間約10ドルです。

……本当のことを言うと、正直、私がこのサイトを作った方法を忘れないようにメモするという意味が大きいです。まあ後で私が見返しても理解できるように一定以上の質で書いているつもりなので、ついでに記事として公開して読者の参考になればいいかなと。

これ以降、横線で上から消してる文章がちょこちょこ出てきます。それらは重要度の低い部分です。些細な補足情報とかなので、読み飛ばしてOKです。 も

[2章]予備情報:Webサイト作りの一般論概説

この「予備情報」では、私がなぜサイトを作るにあたって現在の方法を選んだのかということを書いていきます。そのために、Webサイト作りというものの全般についてざっくり書きながら、どんな方法を私が採用しているかを書いていきます。予備情報として知るべきものがそこそこ多いので、この章は結構長いです。この章をまるごと飛ばしても、私のサイトがどう作られているかという説明としては成立していますが、Webサイトや情報系の知識が全くない人が読むと「なぜこの方法?」だとか、「これってどういう意味?」という疑問がたくさん生じると思いますので、この章で最低限の解説を試みます。

正直Web作りの方法自体は様々な方が解説しているので私が説明する必要もなく、あくまで私が今の方法でサイトを作ることを選んだ理由を書くためだけに、サイト作りの概説を書くに過ぎないので、さまざまなサイト作り全般の詳細を知りたい人は他のサイトも参考にしてもらえるとよいと思います。

サイトの仕組み

大前提、Webサイトの仕組みをざっくりと知らないとサイトは作れないですので、この段落ではラフに仕組みを見ておきましょう。

サイトはテキストファイルで管理する

まず原則的に、Webサイトというのは、文字を表示するためのものです。そのため、Webサイトの根本は単なるテキストファイル(つまり、文字が並んでいるだけのファイル)です。つまり、「ご飯はおいしい」と書いておけば、「ご飯はおいしい」と表示されます。当たり前のことですが、これが原則です。

しかし、文字の情報として単に「ご飯はおいしい」などと書いても、それは単なる平坦な文字の羅列であって、強調や題名などという意味は持ちえません。そのため、「ご飯はおいしい」と書いても、「ご飯はおいしい」というように「おいしい」の部分だけが強調された表示はされません。当たり前ですね。しかし、強調の全くないWebサイトなど、想像するだけでも質素すぎるなと感じるはずです。

強調と聞いてパッと浮かぶものは、Microsoft社Wordの「強調したいところを選択して太字にするボタンを押す」という方法でしょう。Wordの太字化ボタンは雑な文章作成には便利です。しかし、そんな方法ではWord以外の場所にその文字列をコピペしたくなったら強調が外れてしまったり、あるいは文字化けに近いことが起きたりする可能性だってあります。というかWordファイルって、Wordで開くためだけに作られたものです。Wordで作った文書は、汎用性が低いため、そのままWebサイトにすることはできないのです。

そこで、ホームページ作りではhtmlという規格を用います。htmlの特徴は、すべてを文字で管理することです。 強調するためには、「ご飯は**おいしい**」と書けばokです。Wordのように専用ボタンをクリックはしないのです。このように「*」という文字を用いた書き方をしておくと、ChromeやSafariやFirefoxといったブラウザで見たときに「ご飯はおいしい」という強調表示が可能なのです。もちろん強調以外の段落構成や見出しなんかも、全てボタンではなく文字で管理します。こうした、文字情報のみを持つファイルのことをテキストファイルといいます。(Wordファイルはテキストファイルではないという事実には特に留意してください。)

サイトはhtmlというテキストファイル

さて、ここでひとつ重要なことを言います。それは、

個人サイト作りとは、htmlファイル作りのことです。

サイトの作り方は色々ありますが、これはhtmlファイルの作り方が色々あるということです。どういうツールを使おうとも、ホームページ作りは最終的にはhtmlファイルを作らなければいけないのです。メモ帳アプリを開いてhtmlファイルを自らの手とキーボードでタイピングしようが、Wordpressを使おうが、Markdownを変換しようが、Wixにただ文章を打ち込もうが、手段は色々あれど、サイトを見てくれる人に対してhtmlファイルを届けることこそが、ホームページ作りのゴールなのです。同じことばかり何度も書きますが、しかし重要なことなのでもう一度だけ書きます。

サイト作り＝html作りです。

厳密に言うとhtmlを使わない方法が無いというのは少し嘘です。しかし、2026年現在、html関係ないWebサイトを作るのは、かなりかなり変な部類だと思います。

最初の分かれ道: ブラックボックスに委ねるか、努力してすべてを理解しようとするか

個人サイトを作る方法(つまりhtml作り)についてはざっくり言って2つ存在するらしいです。第1に「完成品のhtmlファイルに近いテキストファイル(Markdown)を自ら作る」方法。第2に「CMSと呼ばれるツールを用いて、そのツール独自の形式で記事を書いてからツール独自の方法によってhtmlに変換してもらう」方法です。第2の方法であるCMSの例としては、WordPressやWixが存在しますが、これらの名前は聞いたことがある人もいるかもしれませんね。Markdownについては後で説明します。

それぞれのメリットとデメリットを比較しておきましょう。

• 方法1のメリット

  • 手元に残るテキストファイルが再利用しやすいので移行しやすい
  • 内部構造が見えるので細かい変更をしやすい

• 方法2のメリット

  • 編集画面がツールによって見やすくなっている
  • ツールに任せるからサイトを作り始めやすい
  • そのツールを使ってサイト作りを行いやすくしてくれているサービスが世の中に結構ある

• 方法1のデメリット

  • 最初に準備を整えるのが比較的面倒
  • 理解しないといけないことが割と多い

• 方法2のデメリット

  • 見た目が綺麗でも実はデータとしてはぐちゃぐちゃになってるかもしれない
  • 別のツールに移行したくなったときに地獄になるリスク有り

総じて、方法1の方がより根本的な部分に自ら乗り込んでいくイメージです。明らかに最初にかかる労力が大きい。知識的な負担も大きい。一方、方法2は気楽に始めやすいが、そのツールに依存してしまうことは避けられません。移行は大変だと思います。実際に移行した方のブログを見ても、まあ大変そうですね。

このサイトが選んでいる方法は方法1。つまりMarkdown。

どうせ移行時などに苦しむなら、先に苦しめばよくない？と個人的には思ったのでこのサイトが選んでいるのは方法1です 。つまり、このサイトは、運営者がMarkdownファイルを自らの手で作成しています。 つまり、MarkdownをHTMLに変換するツールを用いてHTMLを作成するため、自らの手で編集するのはMarkdownファイルであるということです。

Markdownとは何か

まだしていなかったので、Markdownの説明をします。

Markdownとは、「HTMLより人間にとって読みやすいが、HTMLに容易に変換可能な形式」として開発された形式です。こう言うとHTMLのメリット無くない？という気にはなりますが、Markdownとは、あくまでサイトの内、文章の部分だけ書きやすい形式です。ですから、HTMLに書きたいもののうち、文章の部分や少しの装飾だけMarkdownに書きます。それ以外はHTMLへの変換ツールを使うときに工夫します。

なお、一口にMarkdownと言っても、Markdownに書く内容は人によって少し変わりうることには注意が必要です。なぜなら、Markdownに書いたものはHTMLに変換しないといけないので、Markdownに書く内容が、MarkdownからHTMLに変換するツールに依存するからです。私のサイトではAstro(後述)を利用していますので、Astroのローカルルールに従ったMarkdownを書く必要があります。

余談:Markdownwを書くのも少し面倒

なお、Markdownも単なるテキストファイルであることを既に述べたように、Wordのように直感的に書くことはできないです。いや実際かなり直感的に書くことはできます。が、完全に視覚的な不自由さがないかというと、それはちょっと嘘なのです。そうした少しの書きにくさを解消する方法として、「機能を大幅に制限する代わりにMarkdownに変換できるようにしたWord」みたいなものとして開発されたKeystaticなどのツールも存在するようです。しかし今のところ、導入するほど手が回っていないので、当面の間は直接Markdownを書きます。気が向いたら導入しようかなと思っています。

[3章]本題の前の少しの注意書き

さて、次の章からが本編です。

予備情報を書き終えたので、ここからやっと、私が何を使ってサイトを作っているかということを述べていきます。読むにあたっての注意(お願い)を少しだけ。

本ページにおいて、これ以降に太字になってない単語で、分からないものがあったら調べてください。丁寧に説明はするつもりですが、説明なく用いている単語は前提知識としています。

また、これ以降、WordpressやWixは本記事に一切登場しません。

[4章]このサイトを作るための道具を知ろう

まずは必要なものの一覧を知ろう

予備知識でも触れましたが、このサイトは、Markdownで書いたテキストをAstroというツールでHTMLに変換して作られています。

もう少し詳しく言います。本サイトでは、MarkdownファイルをGitHubに保存すると、Cloudflare Pages（Webサイト作成に特化したサービス）がそれを自動で読み込みます。そして、サーバーの中でAstroがHTMLへの変換を行い、自動的にWebサイトとして公開してくれます。エンジニアの方にならこの説明で十分伝わるのでしょうが、分からない人のために、ここから先の文章ではこの内容をもっと詳しく書いていきます。

今回の私の方法では、以下のものを利用し続けることになります。

• 無料のもの
  • VS Code
  • Github
  • Astro
• サイトが大規模にならないなら無料のもの
  • Cloudflare Pages
• Cloudflare

この4章ではこれらについて簡単に知っていきましょう。順に説明していきます。

VS Codeとは

VS Codeとは、Microsoft社が提供するソフトウェアです。完全無料です。メモ帳よりも高機能なメモ帳です。こういう「高機能なメモ帳」のことをテキストエディタといいます。VS CodeはMarkdownの記述に使います。本当にメジャーなツールなのでテキストファイルを編集する初心者は迷わずに入れちゃっていいです。良質なデファクトスタンダードなので、VSCodeを聞いたことのない人間も、これだけは他の選択肢を探そうとしないことを推奨します。もし不満が出てきたら、そのとき乗り換えれば問題ないので。

なのですが、VS Codeは雑に拡張機能を入れるとコンピュータウイルスとかが怖いので、 VS Codeのカスタマイズだけは慎重に調べながらやってください。

Githubとは

Githubとは、今回の運用では、ざっくり言って「Markdownをインターネット上に保存するためのクラウドストレージ」です。私のサイトのように Markdownの文章を入れるだけなら容量がオーバーするわけがないので無料です。これも本当にものすごくメジャーなのでこれ一択と考えても間違いではないです。

これもGithub以外の選択肢は提示しません。Githubでいいので。

本当はバージョン管理とかが重要で、単にGithubはクラウドストレージであると考えるのは間違いです。でもその知識は無くてもサイトを自然に完成させられると思います。Githubを使ったことない人が今回の目的でGithubを使う場合、クラウドストレージと認識して大きな問題はないはずです。

Cloudflare Pagesとは

Cloudflare Pages(以下、CF Pages)とは、ざっくり言って「Webサイト作りに特化したサーバー」です。個人利用の規模感ならほぼ確実に無料です。これが無料じゃなくなるくらい閲覧者がいるなら広告収益で大量に儲かってると思いますし。一応、従量課金のサービスではあるので、どうしても費用が心配なら調べるか、一度AIに聞いてみてください。

サーバーとは、これまたざっくり説明すると「HTMLファイルなどを置いておく、世界中の人がいつでも閲覧できるWebサイト専用のクラウドストレージ」のようなものです。先ほど話した、「WebサイトとはHTMLファイルである」という話を思い出してください。すると、CF Pagesがサイトの本体であるHTMLの置き場になるということが理解できると思います。

CF Pagesは、Cloudflare社が提供しています。HTMLファイルは完成させるだけでなく、閲覧可能な場所に保管しておくことは当然重要ですのでサーバーは必ず必要なのですが、CF Pagesはサーバー機能だけでなく、様々な機能があります。さらに使用量が少ない限りにおいて無料ですので、これを使っています。Cloudflareで取得している独自ドメインとの紐づけが非常に簡単なことも大きなメリットです。

ただし、様々な機能があっても、将来CF Pagesを使わずに別のサーバーを利用することになる可能性を想定すると、むやみに独自機能に依存するのは良くないです。最小限の機能だけを用いるようにすることで、CF Pages以外への移行が簡単になるはずです｡

ただし、独自ドメインとの紐づけは他のサービスへの移行を不便にする類のものではないので、ありがたく使いましょう。

あと、日本語に対応してます。嬉しいね。

Cloudflare Pages以外のサーバーの選択肢

Cloudflare Pagesの代替となる選択肢としては、VercelやNetlify、Github Pagesなどがあります。どれもサーバー機能以外の機能をも持ち、かつ一長一短です。金銭面ではCF PagesかGithub Pagesが良いですが、Github Pagesは動的な要素を作りにくいらしいです。よく知らないですが。(なお、動的というのはユーザーによる行動でサイトが返すレスポンスが変化するということです。)まあCloudflare Pagesが一番良さそうかなということでこれ使ってます。

Cloudflareとは

Cloudflareとは、同名のCloudflare社が提供する「独自ドメインを取得できるショップ」です。いや、ほんとはCloudflareが扱うサービスは広いんです…。直前に説明したCloudflare Pagesもその1つですし。ですけど今回はそのうち独自ドメイン取得の部分だけをCloudflareと思いましょう。

ドメインとは、www.example.comみたいなネット上の場所を示す名前のことです。ドメインにお金を払わなくても、意味不明な文字列をドメインとして指定されることにはなります。が、どうせならオリジナルの名前を考えて付けたいところです。独自ドメインを使っておけば、サイトをどこかのサーバーに置きなおしたいと考えたときに検索エンジンからの評価を引き継ぐこともできます。

このサイトの独自ドメインはSi-Fa-print.comです。多分、画面のどこかにSi-Fa-print.comと表示されてると思います。

私が用いているもののうち、唯一この独自ドメインだけが必ず有料です。取得すると1年間そのドメインを使うことができ、それ以降1年ごとに更新料を支払う必要があります。そのため、費用は年額10ドルちょっとかかることになります。

独自ドメインを取るための、Cloudflare以外の選択肢

Cloudflareに替わる選択肢としては、Porkbunとかなのかなと思います。とはいえ私もよく知りません。まあ、最悪Cloudflareでドメインを購入してから60日経ったら、ドメイン名はそのままに別のサービスに移管できます。(この60日は国際的なルールなので大きな変更は考えにくいです。)なので最初はCloudflareで取ればいいと思います。

一応、Cloudflareでドメイン管理している限りネームサーバーをCloudflare以外のものを使えないというデメリットがあるらしいですが、正直に言って、私はネームサーバーが何かをあまり理解していません。まあ不便を感じたらCloudflareから移管するつもりです。移管するデメリットもほぼ無いはずなので、最初にCFでドメイン取得すればいいと思います。間違ってたらごめんなさい。

補足として、「独自ドメイン　取得」などと検索するとお名前.comというサイトが出てくると思います。しかしGMOはダークパターン(つまり、ユーザーの勘違いを誘うような表示を用いて、実際には高い金額のものを安い金額だと誤認させる手法などのこと)だらけなので、私は絶対にお名前.comでドメインを取得しませんし、オススメもしません。2年目以降に価格が吊り上げられるみたいなことが常習的に行われているので、もし万が一利用するにしても、サイトの隅から隅まで半日かけて全文読んでから契約することを推奨します。自分ならそもそも契約しませんが。

Astroとは

Astroとは、Markdownで書いたものをHTMLに変換してくれるものです。こうした変換装置をSSG(Static Site Generation)といい、AstroはSSGの一種です。今回の運用では、このAstroをCF Pagesの中で動かします。ものすごく便利なことにCF Pagesは、GithubにMarkdownをアップロードしたという情報を自動で検知して、AstroでMarkdownをHTMLに変換してくれます。

これは重要なことなのでもう一度書きます。CF Pagesは、GithubにMarkdownをアップロードしたという情報を自動で検知して、AstroでMarkdownをHTMLに変換してくれます。

つまり、一度仕組みを整えてしまえば、MarkdownをGithubにアップロードするだけでサイトが自動で更新されます。これは非常に便利です。

Astroの代わりになるSSGは、多分色々あります。正直、Astroが正解かは分かってません。

例えば、HugoとMkDocsは維持が容易そうです。一方これらは、TeXで書いた数式の表示がブラウザに依存します。Astroだと、AstroがMarkdownからHTMLに変換するときに数式もTeXから変換してくれるように設定できるんです。でもそれをせずにブラウザに依存するとその分表示が遅くなるので、そこがHugoとMkDocsの欠点っぽかったので避けました。(大量の数式なんてサイトに書くつもりがなければ、TeXのことは知らなくて完全にokだし、HugoやMkDocsを使えばいいんじゃないかなと思います。)

また、quartzも選択肢には挙がると思います。これはAstroのように数式の表示は早いです。一方、quartzは設計思想的に、サイトの構造を整理して維持するというよりは、サイトの記事1つ1つを繋げるということを前提にサイトの機能が作られているそうです。よく知りませんが。なので、「次の記事へ」のボタンをつけるなどの機能が使いやすいAstroを選びました。まあ好みの範疇なのではないでしょうか。

4章のまとめ: このサイトを作るのに必要なもの

おさらいです。このサイトを作るには以下のものを使います。

• 無料のもの
  • VS Code(サイトの文章を実際に書くための高機能なメモ帳)
  • Github(サイトを構成するためのデータを保存する場所。)
  • Astro(MarkdownからHTMLを生成してくれるもの)
• サイトが大規模にならないなら無料のもの
  • Cloudflare Pages(HTMLを保存しておき、読者に見せる場所)
• 必ず有料のもの
  • Cloudflare(独自ドメインの取得・維持)

さて、それでは5章では実際にこれら5つの準備に取りかかっていきましょう。

[5章] 必要な道具の準備

それではいよいよ実際にどのような手順を踏んでいくかを説明していきます。まずは4章で紹介した5つのツールやサービスを使うための準備をしていきましょう。なお、ここから実際の手順を説明するにあたり、私はSi-Fa-printという名前を使っているので何度もSi-Fa-printという文字列が出てきますが、読者の方はSi-Fa-print以外の名前に置き換えて書いてくださいね。

(0/5)Gmailの準備

まずはGmailを使えるように、Googleアカウントを作成しましょう。つい先ほど挙げた5つにGmailは入ってはいないなのですが、これは本当に準備するべきだと思います。もちろん普段の名義と同じ名義でホームページを作成するならそのGoogleアカウントを用いるのが適しているとは思います。ですが、新しい名義を使ってホームページを作ろうとしているそこのあなたは、普段のGoogleアカウントを使いまわすのはやめておきましょう。Googleアカウント作成の手順はわざわざここでの説明はしませんが、これだけはやっておきましょう。

(1/5)VS Codeの準備

まずはVS Codeのインストールから行いましょう。まずはVS Codeのダウンロードページ にアクセスします。Windowsパソコンを使っている人はWindowsと書いてある大きなボタンを、Macのパソコンを使っている方はMacと書いてある大きなボタンを押します。するとダウンロードが始まるはずですので、ダウンロードが終わったらそのファイルを開きましょう。開いたらセットアップが始まるはずですので、ひたすら「次へ」を押すとVS Codeのインストールは終了です。

この説明じゃ雑すぎてVS Codeをインストールできない！という人は「vscode インストール」と検索してみてください。いくらでも説明が出てきます。

(2/5)Githubの準備

次にGithubを使う準備ですが、これはVSCodeのインストールと違って意外と大変なんです。この記事にある行程の中でも最上位の大変さなので、気合い入れていきましょう。Githubの会員登録だけなら楽なんだけど、Gitも準備しないと結局Githubを使えないから面倒なんですよ…

Githubの会員登録

Github自体はVS Codeとは異なり、サービス名なのでインストールではなく会員登録をしましょう。Githubだけは日本語に全く対応していないので、英語が苦手な方は頑張りましょう。

Githubのサイトにアクセスすると、「Sign Up」を押して会員登録をしましょう。普通の会員登録なので、普通に会員登録してください。

Gitのインストール・初期設定

次に、Gitというものをインストールします。混同されがちですが、GitとGithubは別のものなので注意しましょう。GitはGithubを用いる上でPC上にインストールする必要のあるソフトです。詳しい説明は長くなるのでこの記事では簡潔な説明に留めますが、Githubにデータを保存する方法は一般のクラウドストレージとは少し異なるため、それに対応したデータ形式でGithubにデータを送信する必要があるのです。Gitはそれに必要なので、必ずインストールしましょう。

Gitのインストール手順について書いていきたいのですが、VSCodeと違って、インストール手順を書くのがはっきり言って面倒です。ですのでプログラミングスクールであるProgateのサイトを参照していただく形にしたいと思います。説明の通りにGitのインストールとGitの初期設定を行ってください。Gitのインストール時には「次へ」の連打はやめた方がいいので、読みながらのインストールを行ってください。なお、Macを使っている人はリンク先のサイトからさらにMacの人向けのページに飛んでください。

[!NOTE] リンク先が消えたりする可能性を考慮して、一応Gitのインストール・初期設定の流れを簡単に書いておきます。

まずはGitのダウンロードサイトでインストーラをダウンロード。インストール中の選択肢は、VSCodeをデフォルトのエディタに設定し、デフォルトのブランチ名を”main”に設定し、あとは概ね流れに沿って進めていく。

インストールが終わったら、次にgit Bashでメアドとユーザー名を登録してgitそのものの初期設定は終了です。

gitとGithubの連携

最後にgitとGithubの連携を行っていきます。まだパソコンにインストールしたgitと、Githubのアカウントが繋がっていません。ですからこれらを繋げていきます。実は、この手順が意外とややこしくて面倒ですので頑張っていきましょう。

先ほどと同じくProgateのサイトを参照して「GithubにSSHの設定をする」の項目に従って設定してください。(SSHの意味は分からないままでOKですが、セキュリティ関連の言葉であるということだけ理解しておいてください。また、実は私はSSHの設定の代わりにhttpsでの通信を行うように設定しているのですが、将来Githubのアカウントを複数用いたいと思ったときにhttpsは不便すぎるらしいので、ここではSSHの方法を紹介しておきます。)

また、サイトを完成させるために必須な知識ではないので上書き線で消しておきますが、SSHの設定は、2度目以降少し注意が必要です。なぜなら、2度目以降にキー(=鍵)を作り直す理由はいくつかあると思いますが、「初回に作ったキーが分からなくなったり、初回にキーを作ったパソコンから買い替えた」などの場合は、古いキーをgithubに受け付けなくしてもらった方がセキュリティ上安全だからです。せっかくの機会なので、2度目のタイミングではsshとは

なお、SSH接続の場合、Githubに保存のMarkdownを保存する時に毎回Githubのパスワードを入力する必要があります。これを嫌う方は同じくProgateのサイトの「パスワードの確認を省略しよう」に従って設定してください。別に今すぐ設定しなくても、パスワード入力にイライラするようになったら設定するとかでいいとは思います。

[!NOTE] ここでもリンク先が消えたりする可能性を考慮して、一応GitとGithubの連携の流れと、パスワードの省略の流れを簡単に書いておきます。

まずはSSHで連携する流れから。

とりあえずSSH用のキーをパソコン上で発行する。Git Bash をパソコン上で開き、ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519_github_SiFaPrint -C “myNotePC2026”などと打ってキーを新規発行すれば発行完了です。ただし、-fの部分は単なる名づけなのでid_ed25519_github_SiFaPrintの部分は自分が分かる名前(※この名前は後から何回か使いますので1日だけでいいので覚えておいてください。)をつければよいが、githubであることとアカウント名が分かる方が望ましいと思うので、SiFaPrintの部分だけ書き換えればよいと思います。また-Cの後は単なるメモの書き置きの機能しかないので、後でGithubから見たときにどこから連携するためのものかを判断できるような名前であれば十分だろう。

パソコンにキーを作成できているかの確認作業として、Git Bashでls ~/.sshと打ってみましょう。パソコンから今作ったキーを消さない限り、id_ed25519_github_SiFaPrintなどというの(※で付けた名前)が表示されるはずです。表示されたら次のステップに行きましょう。

あとは今作った手持ちのキーをgithubに入力すれば連携が完了です。まずはGithubにログインして設定画面に移動すると、SSHを設定する項目がどこかにあります。そこで「new SSH key」に進みます。Tytleの項目にはなんでもいいですが、“MyNotePC2026”とか書いておけばいいと思います。このタイミングで一度GitBashを開き、clip < ~/.ssh/id_ed25519_github_SiFaPrint.pubなど(※の工程でつけた名前に従ってください。)を入力すると必要な情報がコピーされるので、またgithubに戻ってkeyの欄にペーストしてください。それで確定ボタンを押せばGitとGithubの連携は完了です。

これでGithubを使う準備は完了です。お疲れ様でした。

(3/5)Astroの準備

次はAstroの準備です。MarkdownからHTMLに変換するためのAstroは、実はCF Pages上でほぼ準備無しで動かすことができます。そのため、この時点でAstroの準備は必要ありません。やったー。準備が少なくて済むのは嬉しいね。

(4/5)Cloudflare Pagesの準備

それでは次にCloudflare Pages(CF Pages)の準備に入っていきます。これは会員登録をすればOKです。https://cloudflare.com にアクセスしたら、やはり先ほど作ったgmailアドレスを使って会員登録を済ませましょう。