アカウント作成のご案内

サイトをお客様ご自身のものとしてお持ちいただくため、 2つの無料アカウントを作成していただきます。どちらも費用はかかりません。

これから用意していただくもの

  1. お客様の GitHub サイトの文章と写真が入る場所です。 お引き渡し後に書き換えた内容も、ここに貯まります 手順1・3
  2. お客様の Cloudflare その中身をインターネットに出す場所です。 サイトのアドレスは、ここから配られます 手順2
当方に招待と鍵をお渡しいただく Cloudflare に当方を招待し、GitHub の鍵を1つ作ってお知らせいただきます。 これで当方が、上の2つに出入りできるようになります 手順4・5
このあと お客様の GitHub と Cloudflare で、当方がサイトを作ります お渡しいただいた鍵で、お客様の GitHub にサイトの中身を入れ、 お客様の Cloudflare から公開します。 公開の前に画面を画像でお送りしますので、ご確認ください。 お引き渡しでは、サイトのアドレスと管理画面をお渡しします

どちらも無料で、どちらもお客様の名義です。 できあがったサイトはこの中にあるので、当方との取引が終わっても、そのまま残ります。

この作業が終わるまで、サイトの制作に入れません。
アカウントはお客様の名義で作る必要があり、登録の確認メールは お客様のアドレスにしか届きません。 そのため、ここだけは当方では終えられません。 所要時間は15分ほどです。上から順にお進みください。 どうしても進まないときは、そこで止めてご連絡ください。

はじめる前に

どちらも海外のサービスで、画面は英語で表示されます。 GitHub は日本語表示に切り替えられます(画面右上のアイコン → Settings → Appearance → Language)。

先に GitHub から作ってください。順番が入れ替わっても進められますが、手順書はこの順で書いています。

このページは、メールでもお送りしています。 見当たらない場合は迷惑メールをご確認ください。 このページをブックマークしておいていただいても構いません。
スマートフォンだけで完結します。 ただし GitHub と Cloudflare は、もともとパソコン向けに作られた画面です。 文字が小さく、メニューが画面の外にはみ出していることがあります。 パソコンやタブレットをお持ちであれば、そちらのほうが楽です。
「Continue with …」のボタンは使わないでください

どちらのサービスも Google / Apple / GitHub のアカウントで 登録できてしまいますが、 その方法で作られると、こちらが代わりに操作することができなくなります。

メールアドレスで登録 お困りのとき、こちらが代わりに操作できます。 画面を一緒に見ながら、あるいはお預かりして進められます
Google・Apple・GitHub で登録 代行できません。 これらのパスワードは、ご本人以外が扱ってはいけないものです。 お預かりすることも、お聞きすることもできません

登録自体はできますが、詰まったときに、こちらが代わって操作できません。 「代わりにやってほしい」が使えなくなる、とお考えください。

登録画面では、これらが一番上に大きく出ます。押さないでください。

GitHub の登録画面。上に Continue with Google と Continue with Apple のボタンがあり、その下に Email、Password、Username の入力欄が並んでいる
赤い枠の中は使いません。その下の Email から順に入力してください。

手順1 GitHub のアカウントを作る

入力する欄は1画面に全部並んでいます。上から順に埋めてください。

  1. github.com/signup を開きます 開いた画面の一番上に Continue with Google / Continue with Apple が出ます。 これは押さないでください。その方法で登録されると、以後こちらが代わりに操作できなくなります
  2. Email にメールアドレスを入力します
  3. Password にパスワードを決めて入力します 15文字以上、または「8文字以上+数字+小文字」のどちらかが必要です
  4. Username を決めます 半角英数字とハイフン。他の方と重複しない名前にする必要があります(例:taro-yamada-mma)。 サイトのアドレスには出ませんので、覚えやすいもので構いません
  5. Your Country/Region は Japan のままで構いません 最初から入っています
  6. Email preferences のチェックは、入れても入れなくても構いません GitHub からのお知らせメールの要否です。最初は入っていません
  7. Create account を押します
  8. 画像認証やパズルが出た場合は、画面の指示にしたがって進めます 出ないこともあります
  9. 確認コードの入力画面が出た場合は、登録したメールアドレスに届いた 8桁の数字を入力します この画面が出ないこともあります。その場合は、 届いたメールの中のリンクを押してください

アンケートのような画面が出たら、すべて飛ばして構いません(Skip)。

メールアドレスの確認を、必ず済ませてください

ここを飛ばすと、手順5(鍵の発行)で Verify your email address と出て、 そこから一歩も進めなくなります。 しかも手順5まで気づけないため、戻ってやり直すことになります。

済んでいるかは、この画面で確認できます。

メールアドレスの確認状態を開く

GitHub の Emails 画面。メールアドレスの右に Primary と Verified のラベルが付いている
この Verified が出ていれば済んでいます

手順2 Cloudflare のアカウントを作る

すでに Cloudflare をお使いの場合も、このサイト専用に新しく作成することをおすすめします。 設定を共有する都合上、こちらがアカウント全体を見られる状態になるためです。 新しく作れば、そのアカウントにはこのサイトしか入りません。
  1. dash.cloudflare.com/sign-up を開きます 開いた画面の一番上に3つのボタン(Google / Apple / GitHub)が出ます。 どれも押さないでください。GitHub のボタンもあり、手順1で作った直後なので押したくなりますが、 これも代行できなくなる方法です
  2. Email と Password を入力して Sign up 手順1と同じメールアドレスで構いません
  3. 届いたメールの Verify email を押します
  4. 「What would you like to do first?」のような画面が出たら、飛ばして構いません
Cloudflare の登録画面。上に Continue with Google / Apple / GitHub の3つのボタンがあり、その下に Email と Password の欄、ロボット確認、Sign up ボタンが並んでいる
赤い枠の中は使いません。Email と Password から入力してください。
メールアドレスの確認を、必ず済ませてください

済んでいないと、手順4の招待で必ず失敗します。 しかも失敗するのは手順4まで進んだあとなので、そこまでの入力がやり直しになります。

確認状態を開く

登録した直後に、Cloudflare から確認のメールが届いています。 その中のボタンを押してください。

Cloudflare から届く確認メール。件名は Action required Verify your email address で、本文に Verify your email のボタンがある
差出人は Cloudflare、件名は [Action required] Verify your email address です

見当たらないときは、迷惑メールと、Gmail なら 「プロモーション」タブもご確認ください。

ここから先が、どうしても難しいと感じた場合は、こちらが代わって行うこともできます。

ただし、公開までが数日遅くなります。

進められそうであれば、このままお進みください。残り10分ほど、手順は3つです。

手順3 サイトの保管場所を作る(GitHub)

サイトの中身を入れる「置き場所」を作ります。 中身は空のままで構いません。こちらで入れていきます。

  1. GitHub にログインした状態で、画面右上の + → New repository
GitHub の画面右上のプラスを押して開いたメニュー。New repository が青い枠で示されている
スマートフォンでは、+ が画面の右上にあります
  1. Repository name に名前を入力 半角英数字とハイフン。例:official-site
  2. Choose visibility を Private に変えます
  3. 他の項目は触らず、一番下の Create repository
Private を選び忘れやすい箇所です

初期値が Public(誰でも見られる)になっています。 Private に変えてください。

リポジトリ作成画面。Choose visibility の Public を押すと Public と Private が出て、Private が青い枠で示されている
Public と書かれたところを押すと、この2つが出ます

作ったあとでも変更できます。不安な場合はそのままお知らせください。こちらで確認します。

手順4 Cloudflare にこちらを招待していただく

サイトを公開する設定のため、Cloudflare に招待をお願いします。

招待先のアドレス[email protected]
  1. メンバーの画面を開きます 押すだけで開きます。メニューを探す必要はありません
  2. 右上の青いボタン + Invite members
Cloudflare の Members 画面。右上に + Invite members のボタンがあり、青い枠で示されている
赤い欄は招待の入力欄ではありません(登録済みの人を探すための検索欄です)。
招待先を入れる欄は、青いボタンを押した次の画面に出ます。
  1. Add email addresses の欄に、上記の招待先アドレスを入力
  2. Add permission policies は、右側が Entire account のままで構いません
  3. Overall roles の一覧から Administrator を探し、 右端のスイッチをオンにします 上から3番目です。よく似た名前が並ぶので、 「Super Administrator」や「Administrator Read Only」ではなく Administrator を選んでください
Cloudflare の Invite members 画面。アドレスの入力欄と、Overall roles の Administrator が青い枠で示されている
名前のよく似たものが上下に並んでいます。 Super Administrator でも Administrator Read Only でもありません。
  1. 画面の一番下までスクロールし、青い Create policy を押します
  2. そのあと Invite members を押して完了です
Create policy を押さないと、次に進めません

スイッチをオンにしただけでは確定しません。 Create policy を押すまで、下の Invite members は 押せないまま(薄いまま)です。

画面の一番下。Create policy を先に押し、そのあと Invite members を押すよう青い枠で順番が示されている
順番があります。権限の一覧が長いため、 このボタンは画面のずっと下にあります
Members の一覧。招待したアドレスが Pending として追加されている
一覧に増えて Pending と出ていれば完了です。 こちらが承認するまでこの表示のままです
上のリンクで開かないとき(メニューからたどる)
  1. 画面の左上の ☰ を押してメニューを開きます
  2. 一番下までスクロールして Manage account
  3. 開いた項目から Members
Cloudflare のメニューを一番下までスクロールしたところ。Manage account が青い枠で示されている
メニューを一番下までスクロールしたところです
「Failed to invite … you must verify your email address」と出たとき

Cloudflare のメールアドレスの確認が済んでいません。 招待はそれが済むまで送れない決まりになっています。

Invite members を押したときに画面の右下に出るエラー。メールアドレスの確認が必要だと書かれている
エラーは画面の右下に出ます。しばらくすると消えます
  1. Cloudflare に登録したメールアドレスの受信箱を開きます
  2. 差出人 Cloudflare、件名 [Action required] Verify your email address のメールを探します 登録した直後に届いています。 迷惑メールと、Gmail なら「プロモーション」タブもご確認ください
  3. 本文の Verify your email を押します
  4. この手順4を、もう一度はじめからやり直します 入力した内容は残っていません。アドレスと Administrator を入れ直してください
「This link is no longer valid.」と出たとき
確認メールのリンクには期限があります。切れていても、 その画面から送り直せます。
This link is no longer valid. と表示された画面。Resend link が青い枠で示されている
Resend link を押すと、新しい確認メールが届きます
それでも進めない場合はご連絡ください。こちらで一緒に対処します。

手順5 サイト用の鍵を作る

お渡しするサイトには、管理画面が付いています。 そこから文章や写真をご自身で書き換えるために、この鍵が必要です。

はじめる前に:メールアドレスの確認は済んでいますか

済んでいないと、この手順の最後で Verify your email address と出て 発行できません。手順1の確認をお済ませください。

確認状態を開く

  1. 鍵を作る画面を開きます 開かない場合は github.com/settings/personal-access-tokens/new をアドレス欄に直接入力してください
  2. Token name に website と入力
  3. Expiration を No expiration(期限なし)に変えます 下の囲みをご覧ください
  4. Repository access で Only select repositories を選びます 初期値は Public repositories です。 「All repositories」は選ばないでください
  5. 出てきた Select repositories を押し、 手順3で作ったリポジトリにチェックを入れます
Expiration は「No expiration」を選んでください

初期値は「30 days」(30日)です。 期限を付けたままにすると、その日を過ぎたときに 管理画面から保存できなくなります。

期限が切れた場合は、この手順で鍵を作り直していただくことになります。 期限なしにしておけば、その必要がありません。

Expiration の選択肢。7 days から Custom までが赤で囲まれ、No expiration が青い枠で示されている
日数が書かれているものは、すべて選ばないでください。 一番下の No expiration です
Only select repositories を選ぶと出てくる一覧。リポジトリの行が青い枠で示されている
Only select repositories を選ぶと、この一覧が出ます
  1. Repositories タブの + Add permissions を押します
  2. 出てきた一覧から Contents を探して、チェックを入れます アルファベット順に並んでいます。 検索欄があれば Contents と入力してください。 この一覧に Read and write はありません。次で設定します
  3. 追加された Contents の行で、 Access を Read and write に変えます チェックを入れただけでは Read-only のままです。 それでは更新できません。他の項目は触らなくて構いません
権限の一覧で Contents にチェックを入れた状態と、追加された Contents の行の Access を変える場所が青い枠で示されている
チェックを入れると下に行が増えます。その行の Access を変えてください。
Metadata は自動で付きます。Read-only のままで構いません
  1. 一番下の Generate token を押します
  2. 確認の画面が出ます。3点を確かめて、もう一度 Generate token
  3. github_pat_ で始まる長い文字列が表示されます。 右端のアイコンでコピーして、こちらへお送りください
Generate token を押すと出る確認画面。期限なし、1つのリポジトリ、Contents が Read and write であることが書かれている
ここまでの設定が、この3行にまとまっています。
never expire / 1 repository / Contents が Read and write —— 違っていたら Cancel で戻ってください
鍵が表示されるのは、この一度だけです

画面を離れると二度と表示されません。 コピーし忘れた場合は、作り直していただくことになります (手順5をもう一度)。

鍵が表示された画面。右端のコピーのアイコンが青い枠で示されている
先にコピーしてから、この画面を閉じてください
この鍵でできること・できないこと
できること手順3で作ったリポジトリの中身を読み書きすることだけ
できないこと他のリポジトリを見ること、アカウントの設定を変えること、パスワードを知ること

お渡しいただいた鍵は、お客様のサイトの設定にのみ使用します。 いつでも取り消していただけます(同じ画面の Revoke)。 取り消すとサイトの更新が止まりますので、その際はご連絡ください。

ご連絡いただきたいこと

お疲れさまでした。最後に、次の3つをお知らせください。

1 GitHub のユーザー名
2 リポジトリ名
3 サイト用の鍵 (github_pat_ で始まる文字列。手順5でコピーしたもの)

1と2の調べかた

お客様のリポジトリ一覧を開く と、手順3で作ったものが出ます。

GitHub のリポジトリ一覧。ユーザー名/リポジトリ名 の形で並んでいる箇所が青い枠で示されている
青い枠の中を、そのままお知らせください

github.com/ユーザー名/リポジトリ名

リポジトリを開いたときのアドレス欄も同じ形です。どちらで確認しても構いません。

宛先は [email protected] です。 ご相談の控えメールに返信していただいても届きます。

これで、お客様の作業は終わりです
Cloudflare の招待(手順4)は、こちらで承認いたします。 ご連絡をいただいたあと、サイトの制作に入ります。

よくあるご質問

途中で分からなくなりました

そこで止めてご連絡ください。続きを一緒に進めます。 手順3から先は、こちらが代わって行うこともできます。

ただし、Google・Apple のボタンで登録された場合は代行できません。 それらのパスワードはご本人以外が扱ってはいけないもので、お預かりできないためです。

本当に無料ですか

はい。どちらも無料の範囲でお使いいただけます。 通常のご利用で料金が発生することはありません。 万一、閲覧数が大きく増えて上限に近づいた場合は、事前にご相談いたします。

パスワードを忘れそうです

2つとも、あとから必要になることがあります。 メモに残すか、スマートフォンのパスワード保存機能をお使いください。 ご自身で進められる場合、こちらからパスワードをお尋ねすることはありません。

こちらはどこまで見られますか

GitHub はこのサイトのデータのみです。 Cloudflare は仕組み上、アカウント全体を見られる状態になります。 そのため、このサイト専用のアカウントを新しく作成いただくようお願いしています。 作業が終わったあと、権限を外すこともできます。

あとで自分ひとりで管理したくなったら

いつでも、こちらを外していただけます。 Cloudflare の Manage Account → Members で、 当方のアドレスの右端にある「…」から Remove member です。

サイトはそのまま動き続け、管理画面からの更新も続けられます。 外した状態で実際に動くことを確かめてあります。

ただし、こちらからの設定変更やサポートはできなくなります。

管理画面のパスワードを変えたい

ご連絡ください。こちらで変更します。 仕組み上、変更を反映させる作業がこちらに必要なためです。