HTML/CSSで自己紹介ページや練習サイトを作ったら、次はWeb上に公開してみるのがおすすめです。
自分のパソコンの中だけで表示できる状態でも学習にはなりますが、公開するとスマホや別のパソコンからも確認できるようになります。
この記事では、HTML/CSSで作ったサイトを公開する方法を、初心者向けにまとめます。
※この記事には広告・アフィリエイトリンクを含みます。
HTML/CSSで作ったサイトは公開できる
HTML/CSSで作ったサイトは、ファイルをサーバーに置くことでWeb上に公開できます。
たとえば、自己紹介ページやポートフォリオサイト、架空のカフェサイトなども公開できます。
最初は難しく感じるかもしれませんが、基本は「作ったファイルをインターネット上に置く」という考え方です。
公開に必要なもの
HTML/CSSで作ったサイトを公開するには、主に次のものが必要です。
- HTMLファイル
- CSSファイル
- 画像ファイル
- サーバー
- 必要に応じて独自ドメイン
HTMLファイルやCSSファイルは、自分で作ったサイトの中身です。
サーバーは、そのファイルを置く場所です。
独自ドメインは、サイトの住所のようなものです。
サーバーとは
サーバーとは、Webサイトのデータを置く場所です。
自分のパソコンの中にあるHTMLファイルは、自分のパソコンでは表示できます。
しかし、他の人に見てもらうには、インターネット上からアクセスできる場所にファイルを置く必要があります。
その置き場所として使うのがサーバーです。
ドメインとは
ドメインとは、Webサイトの住所のようなものです。
たとえば、このブログなら、URLの中にあるドメインがサイトの住所になります。
独自ドメインを使うと、自分専用のURLでサイトを公開できます。
ただし、HTML/CSSの練習サイトを公開するだけなら、最初から必ず独自ドメインを取らなくても大丈夫です。
公開方法は主に3つある
HTML/CSSで作ったサイトを公開する方法はいくつかあります。
初心者が使いやすい方法としては、主に次の3つです。
- GitHub Pagesで公開する
- レンタルサーバーで公開する
- WordPress内でページを作って公開する
それぞれ特徴があるので、目的に合わせて選ぶと分かりやすいです。
方法1：GitHub Pagesで公開する
GitHub Pagesは、GitHubに置いたHTML/CSSファイルをWebページとして公開できる機能です。
HTML/CSSの練習サイトや簡単なポートフォリオを公開するなら、GitHub Pagesは使いやすい方法です。
特に、GitHubの練習も兼ねたい人に向いています。
GitHub Pagesのメリット
- 無料で使える
- HTML/CSSの練習サイトを公開しやすい
- GitHubの練習にもなる
- ポートフォリオの公開にも使える
GitHub Pagesの注意点
- GitHubの使い方を少し覚える必要がある
- WordPressサイトの公開には向かない
- サーバー側の機能を使うサイトには向かない
HTML/CSSと少しのJavaScriptで作った静的サイトなら、GitHub Pagesで十分な場合が多いです。
方法2：レンタルサーバーで公開する
レンタルサーバーを使うと、HTML/CSSで作ったサイトを自分のサーバー上に公開できます。
WordPressブログを運営したい場合や、独自ドメインでサイトを育てたい場合は、レンタルサーバーが向いています。
このブログも、レンタルサーバーとWordPressを使って運営しています。
レンタルサーバーのメリット
- 独自ドメインで運営しやすい
- WordPressを使える
- ブログやポートフォリオをまとめて管理しやすい
- 将来的にアフィリエイトにも使いやすい
レンタルサーバーの注意点
- 月額費用がかかる
- サーバーの管理画面に慣れる必要がある
- ドメインやSSLなどの設定が必要になることがある
学習だけなら無料の方法でも始められますが、ブログやポートフォリオを長く運営するなら、レンタルサーバーを使う方法もあります。
安くWordPressを試したい場合
レンタルサーバーにはいろいろな種類があります。
とにかく安くWordPressを試したい場合は、低価格のレンタルサーバーも選択肢になります。
たとえば、リトルサーバーのように、低価格でWordPressや無料SSLに対応しているレンタルサーバーもあります。
ただし、サーバーを選ぶときは料金だけでなく、表示速度、サポート、バックアップ、管理画面の使いやすさも見て選ぶのがおすすめです。
最初から本格的にブログを運営する場合は、ロリポップやエックスサーバー、ConoHa WINGなども比較対象になります。
方法3：WordPress内でページを作って公開する
すでにWordPressブログを持っている場合は、WordPress内で固定ページや投稿を作って公開する方法もあります。
HTML/CSSの練習サイトそのものをアップロードする方法とは少し違いますが、学習内容を記事として公開するには使いやすいです。
たとえば、作った自己紹介ページのコードや画像を記事に載せて、学習記録としてまとめることができます。
WordPressで公開するメリット
- 記事として学習記録を残せる
- あとから修正しやすい
- ブログ全体のコンテンツとして増やせる
- アフィリエイトやSEOにもつなげやすい
プログラミング学習ブログを運営するなら、作ったものを記事にまとめるだけでも十分なコンテンツになります。
初心者におすすめの公開方法
初心者が最初に試すなら、目的によって選ぶのがおすすめです。
| 目的 | おすすめの方法 |
|---|---|
| HTML/CSSの練習サイトを公開したい | GitHub Pages |
| ブログやポートフォリオを長く運営したい | レンタルサーバー |
| 学習記録を記事にしたい | WordPress |
まずは無料で試したいならGitHub Pagesが使いやすいです。
ブログや独自ドメインで育てたいなら、レンタルサーバーを使う方法が合っています。
公開前に確認すること
サイトを公開する前に、次の点を確認しておくと安心です。
- index.htmlがあるか
- CSSが正しく読み込まれているか
- 画像のパスが間違っていないか
- スマホでも大きく崩れていないか
- リンクが正しく動くか
- 個人情報を載せすぎていないか
特に画像のパスやファイル名は、公開後に表示されない原因になりやすいです。
ファイル名は、半角英数字で分かりやすく付けると管理しやすくなります。
公開したらGitHubにも残しておく
サイトを公開したら、作ったファイルをGitHubにも残しておくと便利です。
GitHubに置いておくと、あとからコードを見返したり、ポートフォリオで紹介したりできます。
作品として見せる場合は、README.mdに次の内容を書いておくと分かりやすいです。
- 作品名
- 作った目的
- 使用した技術
- 工夫した点
- 公開URL
作品を作って終わりにせず、説明できる形にしておくことも大事です。
最初は小さく公開する
最初から完璧なサイトを公開しようとしなくて大丈夫です。
まずは自己紹介ページや1ページの練習サイトを公開して、Web上で表示されるところまで確認しましょう。
公開してみると、ローカルでは気づかなかった表示崩れやリンク切れに気づくこともあります。
小さく作って公開し、あとから直す流れでも問題ありません。
まとめ
HTML/CSSで作ったサイトは、GitHub Pagesやレンタルサーバーを使って公開できます。
練習サイトを無料で公開したいなら、GitHub Pagesが使いやすいです。
WordPressブログや独自ドメインで長く運営したいなら、レンタルサーバーを使う方法があります。
最初から難しい設定をすべて覚える必要はありません。
まずは小さなHTML/CSSサイトを1つ公開して、Web上で見られる状態にしてみましょう。
