Xサーバーで自作ファイルを公開する方法!HTMLのアップロードを開設

この記事からわかること

  • 完全自作サイトの作り方
  • Webサイトを作る手順
  • 自作HTMLファイルサーバーアップロードする方法

この記事を読んでほしい人

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

ProgateやドットインストールでのHTML/CSS学習を進めていくと作成したページを公開してみたくなりますよね。

でも実際にどうやって公開するのかとか何をしたら良いのかイメージしづらいと思います。

そこで今回は実際に私が作成したHTMLファイルを公開した方法を解説していきます。

公開までにやるべき4つのこと

まずは自作したHTMLファイルを公開するまでにやらなければいけないことを確認します。

やるべきこと

  1. Webページを作る(HTML/CSS)
  2. サーバーをレンタルする
  3. サーバーにファイルをアップロードする
  4. 公開完了(必要であれば公開設定)

手順はこの4ステップで完了です。では実際にどのようにやっていくのかを詳しく解説していきます。

Webページを表示している仕組み

Webページを表示している仕組みサムネイル

そもそもこのページのように公開されているサイトページ(HTMLファイル)はサーバーに格納されています。

サーバーとは誰でもアクセスすることのできるパソコンです。なので自分のパソコンと同じようにファイルで構成された階層構造になっています。階層構造とは「デスクトップの中の新規フォルダの中のsample.png」のように下に下に下がっていく構造のことです。

Webページを表示するためのURLはサーバーの中のファイルの格納アドレスを表していて、アドレスを指定することでそのファイルを呼び出し表示させているのです。

例えばこの記事だと URLの末尾部分「web-original-blog」がファイル名になります。拡張子(.htmlや.cssなど)はURLに表示しないように設定していますが実際のファイルはもちろん拡張子付きの「web-original-blog.html」になります。

つまりファイル名にしている部分こそがURLの一部になるということです。ちなみにURLの「https://tech.amefure.com/」の部分のうち「https:」はプロトコルと呼ばれるあらかじめ決められた通信規約「tech.amefure.com」がサーバーの住所を表すドメインと呼ばれる部分になります。

URLの構造、プロトコルとドメイン

もう少しURLについて詳しく知りたい方はこちらの記事をご覧ください。

Webページを表示している仕組み〜まとめ〜

Webサイトを実際に公開する方法

やるべきこと

  1. Webページを作る(HTML/CSS)
  2. サーバーをレンタルする
  3. サーバーにファイルをアップロードする
  4. 公開完了(必要であれば公開設定)

ではここからは実際に手を動かしながらやっていきます。まずは当たり前ですが公開するWebページ(HTMLファイル)を作成しましょう。

自作したHTMLファイル

フォルダ名は何でも良いので「domain(ドメイン)」としておきます。その中にHTMLファイルやimageフォルダなどページ表示に必要なデータを格納します。

HTMLファイルのファイル名は基本何でも良いですがトップページにしたいファイルにのみindex.htmlと名付けます。

ファイル名が「index」と名付けられたページに限り、「https://tech.amefure.com/index.html」と指定しなくても「https://tech.amefure.com/」だけでアクセスできるようになります。

URLにファイル名を省略したときはその配下に「index」と名のつくファイルがあれば自動でそのファイルが表示されるようになるのです。

CSSファイルはCSSフォルダにまとめても良いですしファイルをそのままindex.htmlと同じ階層に入れてもOKです。その際はHTMLファイルに記述しているCSSの読み込みパスに注意してください

サーバーの格納場所を準備する

次にファイルをアップロードするサーバーを(格納する場所を)準備します。サーバーならどこでも良いので自分の条件に合ったレンタルサーバーをお探しください。

ファイルの格納場所の準備方法は3つあります。下2つは既にレンタルサーバーを契約済みの場合のみ使える手段になります。未契約であればまずは独自ドメインの取得がおすすめです。

  1. 独自ドメインを取得(有料):サーバー未契約
  2. サブディレクトリを作成(無料):サーバー契約済
  3. サブドメインを作成(無料):サーバー契約済

それぞれで運用する場合のメリットデメリットはこちらの記事にまとめてありますのでご覧ください。

サブドメインを取得する

ここからは以下の条件のもと解説していきます。

読者の条件

今回は無料かつ別サイトとして認識されるサブドメインでの運用方法を解説します。

サブドメインを取得できる条件は独自ドメインを取得しているかどうかです。独自ドメインを取得していればサブドメインの取得/運用が可能になります。

サブドメインの詳細の取得方法は先ほどの記事の見出し6にあります。

おすすめ記事:サブドメインの取得方法

サブドメインとは別の住所を追加するようなものです。実はこのサイトもサブドメインで運営しています。

サブドメインはこのサイトでいう「tech」の部分になります。私が最初に取得したのは【独自ドメイン:amefure.com】です。その派生として【サブドメイン:tech.amefure.com】というURLを作成することでそこに新たな別住所(独自ドメインとは関係ない)を作ることができます。

サブドメインで別サイトを運営することで大元のサイトとは完全に別のサイトと認識されます。異なるカテゴリを展開しても問題なく、独自ドメインサイトのパワーや評価などの影響を受けなくなります。

サブドメインを取得する〜まとめ〜

サーバーにファイルをアップロードする

サブドメインを取得するとサーバーの中にサブドメインフォルダが作られます。そのサブドメインフォルダの中にHTMLファイルを格納することでアクセスが可能になります。

サーバーにファイルをアップロードするのはFTPソフト(ファイル送信用ソフト)を使います。

FTPソフトもいろいろな種類がありますが今回は「FileZilla(ファイルジラ)」というFTPソフトを使っていきます。使い方は簡単でFileZilla(ファイルジラ)をダウンロードして接続、送信するだけです。

FileZilla(ファイルジラ)公式サイト

ダウンロードができたらお使いのレンタルサーバーと接続させます。エックスサーバーのFTP接続方法はこちらにまとめてありますので参考にしてください。

XサーバーのFTP接続画面

FileZilla(ファイルジラ)で接続が完了すると左側に自分のPC内にあるファイル、右側にサーバー側に格納されているファイルが表示されます。

左側のファイルをダブルクリックもしくは右クリックしてアップロードを押すことでサーバーにファイルを格納することができます。

自分で作成したHTMLファイルたちを取得したサブドメインの名前のついたファイルに格納します。

写すのは「domainフォルダ」の中身のみです。domainフォルダは仮で作成しただけなので無視してOKです。

これで取得したサブドメインURLで自身の作成したファイルのアクセスすることができるはずです。

やってみると意外と簡単にアップロードできたと思います。サブドメインの中にいろいろなファイルをアップロードして楽しんでみてください!

公開設定をする

このままでは自身で作成したファイルはGoogleの検索には引っかかりません

検索に引っかかるようにする(インデックスさせる) にはサーチコンソールへの登録やサイトマップ送信などやることはたくさんです。

以下の記事にやり方を全てまとめていますのでご覧ください!

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index