小学生でもわかる AI図鑑
速報
  1. ホーム
  2. 小学生でもわかるShowly
  3. 第5話

Showly 第5話

【小学生でもわかる】HTML・テンプレート・GitHub、Showlyのサイトの作り方3つと、止まったときの直し方

AIにページを作らせて人に見せたいのに、手もとにあるのが HTML のファイルなのか、何も無いのか、GitHub のコードなのかで、どこから始めればよいか迷っている人へ。AIが「できました」と言ったのに、開くとページが出ない、という場面もあります。

  • テンプレートと GitHub の道は Free で最後まで通せる(説明書)。制作ではテンプレートの作成・失敗・作り直しのあとも残り270のまま。GitHub の自動デプロイは Pro 以上
Xで記事を読む シェア
作り方の3つのカバー

どんな話?

作り方は手もとにあるもので選ぶ回。HTML があれば HTML から、何も無ければテンプレートから、GitHub にコードがあれば GitHub から。テンプレートは5つで、足りない項目は1つずつ名指しで止まり、エージェントが値を自分で足します。「できた」の返事のあと住所は404で、状態を聞くと Showly 側の失敗(sandbox_launch_failed)。中身は変えずに作り直し、3分ほどで準備完了になりました。

この記事でわかること

  • 作り方は3つ。HTML のファイルがあるなら HTML から、何も無いならテンプレートから、GitHub にコードがあるなら GitHub から
  • テンプレートは5つ(Next.js が3つ、Astro と Vite + React が1つずつ)。中身を見た Portfolio は英語のひな形だった
  • 足りない項目は1つずつ名指しで止まる。制作では owner_name・tagline・contact_email の3回止まり、4回目でできた
  • 「できた」の返事のあとも住所は 404。状態を聞くと sandbox_launch_failed。中身は変えずに作り直し、3分ほどで準備完了
  • テンプレートの作成・失敗・作り直しのあとも、残りクレジットは270のまま。GitHub の自動デプロイは Pro 以上
  • GitHub の許可では「All repositories」が最初から選ばれていた。「Only select repositories」に切りかえる。制作ではつながらなかった

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

  • 手もとに HTML・何も無い・GitHub のどれがあるかで、どこから始めればよいか迷っている人
  • AIが「できました」と言ったのに、開くとページが出なかった人
  • Showly に GitHub をつなぐ前に、許可の画面と片づけ方を知っておきたい人

この話のTIPS

  • コツShowly 側の失敗(sandbox_ で始まるものや upload_failed)は、中身を直しても直らないので、そのまま作り直す。続くときは、返事に出る参照番号をサポートに伝える。
  • 注意API の鍵やトークンのような秘密(環境変数)は、showly.json にもリポジトリにも置きません。説明書は「Showly はリポジトリから秘密を読まない」と書き、サイトの画面の「環境」のパネルで、下書きと本番で別々に入れる形を案内しています。
すべてのTIPS