ブログサイトを作って公開するまでの流れ

2026.08.03 IT

このサイト（Uブログ）を作ったときの流れを、一つの例として紹介します。ブログサイトを作ろうと思って公開するまでに、実際にどんな作業があったかの記録です。

やり方は他にもたくさんあります。「こういう順番で進めた人がいるんだな」くらいの気持ちで読んでいただければ幸いです。

サイトの構成を決めた

最初にやったのは、どんなサイトにするか決めることです。

カテゴリをいくつ作るか、各カテゴリのページをどのように並べるか、プロジェクトのフォルダ（ファイルの置き場所）の構成をどうするか。これを設計書として文章に書き出しました。

具体的には、以下を決めました。

構成が決まったら、最初にトップページのHTMLファイルとCSSファイルを作りました。

HTMLはページの内容（見出し、文章、リンクなど）を書くファイルです。CSSはデザイン（色、文字サイズ、余白など）を指定するファイルです。この2つのファイルでWebページの見た目が決まります。

AIを使ってHTMLとCSSのコードを生成し、ブラウザで開いて見た目を確認しました。

トップページができたら、次はカテゴリごとの一覧ページを作りました。「IT」「生活」「その他」の3ページです。

トップページと共通のヘッダー（画面上部のメニュー）やフッター（画面下部）を持たせて、サイト全体の統一感を保つようにしました。

個別記事のページには共通の構造があります。タイトル、日付、本文、一覧へ戻るリンク。この構造をテンプレート（ひな型）として1つ作りました。

新しい記事を書くときは、このテンプレートをコピーして、タイトルと本文を書き換えるだけです。毎回ゼロからページを作らなくてもいいようにするためです。

テンプレートができたら、実際に記念するべき1つ目の記事を書きました。テンプレートのファイルをコピーして、タイトルと本文を入れ替えて、カテゴリ一覧ページにリンクを追加する。これで記事が完成です。

ここまでの作業は、すべて自分のパソコンの中だけで行っています。ブラウザで確認できるのも自分だけです。

他の人にも見てもらうには、作ったファイルをインターネット上のサーバーに置く必要があります。

このサイトでは、AWSというサービスの中にある「S3」というファイル置き場にHTMLファイルをアップロードし、「CloudFront」という仕組みを通じて世界中からアクセスできるようにしました。

公開するまでにやったことは以下の通りです。

設定が一度終われば、自身のパソコンで作成した記事をS3に転送すれば、インターネットへ公開できるようになります。

公開してから、スマートフォンで確認するとメニューのボタンが押しにくいことに気づきました。タップできる範囲が小さかったためです。CSSを修正してボタンの領域を広げました。

記事の文章も、読み返してみるとわかりにくい部分があったので書き直しました。

公開したらそれで終わりではなく、実際に使ってみて気づいた問題を直していく作業が続きます。

サイトの仕組みが整ったあとは、記事を追加していく作業になります。

テンプレートをコピーして本文を書き、一覧ページにリンクを追加して、S3（AWSで利用できるファイルストレージ）にアップロードする。この繰り返しです。サイトの構造を触る必要はもうありません。

整理すると、やったことは以下の順番です。