2020-09-24
プログラミングプログラミング

作成したウェブサイトを全世界に公開する方法 〜HTMLファイルを公開〜

作成したウェブサイトを全世界に公開する方法 〜HTMLファイルを公開〜

23歳でブログをはじめました。高卒→社会人→セブ島留学→スタバ→プログラミングという経歴で、過去の自分が知りたかった情報などを発信し、たくさんの人の役に立てるサイトを目指しています。web制作、お仕事依頼はコメント欄、又はtwitter DMからお願いします。

プログラミングの勉強で、まず最初にHTML/CSSを学んでwebサイトを作ると思います。
作ったあと、それをどうやって全世界に公開するのか疑問に思ったことはありませんか?

今回は作成したwebサイトを、HTML/CSS,JavaScriptのファイルをサーバーに置いて
全世界に公開する方法をご紹介します。
実際に僕がHTML/CSS,JavaScriptで友人のウェブサイトを作成して、公開した手順になります。わからないことがあればコメント、twitterDMからご質問お待ちしてます。

準備するもの

webサイトの作成は完了していると思います。
それでは、ご自身で作成したウェブサイトを公開するために必要になるものを紹介します。

・FTPソフト
・レンタルサーバー
・独自ドメイン(必要であれば)

FTPソフトとは

file zilla

FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのことです。

簡単にいうと、作ったフォルダをサーバーに置くためのツールです。
FTPソフトにはいくつか種類がありますが、今回は有名はFTPソフトであるFile Zillaを利用していきます。
File Zillaはwindowa,mac両方に対応しており、とても簡単に使うことができます。

レンタルサーバーを準備する

さくらのレンタルサーバー

さくらのレンタルサーバー、エックスサーバー など、いくつかレンタルサーバーを提供しているサービスはありますが
今回はさくらのレンタルサーバーを利用していきます。

自分で作ったHTML/CSS,JavaScriptのファイルをサーバーに置くだけですので、一番安いプランである
ライトプランを利用します。
料金は年額1,571円と格安になっています。※月額払いでの契約はできません。
初期費用1048円かかるので、最初の1年にかかる費用2,619円で、それ以降は1571円で利用ができます。

ちなみに、ライトプランのサービスは
・年間一括 1,571円/年
・初期費用 1,048円
・ディスク容量 10GB
・マルチドメイン、SSH接続可能

独自ドメインを準備する

独自ドメインの取得は任意になります。
なくてもしっかりと動作することはできますが、自分でオリジナルの名前をつけたい際に利用します。

独自ドメインとは

独自ドメインとは、世界に1つしかないオリジナルのドメインのことです。 法人・個人に関わらず、自分で好きな文字列を指定して取得することができます。 一度取得したら更新し続ける限り、自分専用のドメインとして会社のホームページやメールアドレス、個人のブログサイトなどに利用することができます。

簡単にいうと、好きな名前でWebサイトのURLを作成できるということです。

サーバーを契約した、さくらのレンタルサーバーでも独自ドメインを取得することができます。

料金プランは

さくらのレンタルサーバー ドメイン

特にこだわりがなければ、料金も一番安い.comのドメインを取得しましょう。

ちなみに、さくらのレンタルサーバーを利用すると初期状態では
https:// xxxxxxx.sakura.ne.jp/
という形になります。
これをxxxxxx.comにするために独自ドメインを取得します。
別に必要ないよってかたはスルーして大丈夫です。

まとめ

以上の準備ができれば、作成したウェブサイトを全世界に公開することができます。
次回の記事で、さくらのレンタルサーバーを契約する手順をご紹介しますので、是非ご覧ください。

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

お問い合わせありがとうございます。
お返事にお時間をいただく場合がございます。
エラーが発生しました。もう一度やり直してください。
目次