前回に引き続き、HTMLは書けるけど、ホームページの公開方法がわからないなどの悩みを持った方が多いことを知り、実際にあなたの手でゼロから公開するところまで徹底解説いたします。
実践的なシリーズとして爆速ポートフォリオ作成という企画を行っていますが、今回は前回準備したレンタルサーバを使って、あなただけのホームページを公開してみるステップになります。
まだSTEP2ですが、もうホームページを公開できちゃいますよ！ワクワクしますね！
わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。
たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。
- プログラミングを勉強中だが実践的な内容が知りたい
- HTMLを勉強しているがホームページの公開方法を知らない
- ポートフォリオを作りたいが何をやっていいかわからない
- レンタルサーバを契約してみたけど、何をしたらいいかわからない
という、HTMLを勉強中の方はもちろん、前回HTMLをまだ勉強していないけどレンタルサーバを契約しちゃったというやる気マックスな方もこのシリーズを読んでいけばポートフォリオやブログを作れるようになっています。
全くプログラミングをやったことがなく、これからプログラミングの勉強を行うという方は
[card2 id=”208″]
[card2 id=”173″]
などの記事も併せてチェックしてくださいね。
プログラミングの始め方や、多くの方が一番初めに勉強をするHTMLを少し深掘りした解説も行っています。
爆速ポートフォリオ作成について
爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。
前回解説した内容です。まだSTEP1を実施していない方は、STEP1の内容を事前にチェックしてくださいね
ポートフォリオの前にサーバの設定とホームページを公開する手順を確認しましょう
HTML/CSS＆Bootstrapでポートフォリオの作成方法を解説します。
今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。
WordPressをインストール、初期設定をした後にテーマをカスタマイズして会社のコーポレートを作成します。
STEP 5-1 WordPressのインストール
STEP 5-2 WordPressの初期設定
STEP 5-3 WordPressで会社のページ作成
今回はSTEP1で契約したレンタルサーバの簡単な説明と、実際にホームページを作成し、公開する手順をご紹介します。
STEP1でレンタルサーバの準備をしています。もしレンタルサーバをまだ契約されていない方はレンタルサーバの準備をしてくださいね。
[card2 id=”365″]
前回契約したレンタルサーバはさくらのレンタルサーバですが、別のサーバでもホームページの公開は可能です。
必要に応じて接続先やコントロールパネルなどはご自身のレンタルサーバの情報へ置き換えて読んでください。
レンタルサーバのコントロールパネルを確認
前回のSTEPでさくらのレンタルサーバのスタンダードプランを契約しましたが、まずはこのレンタルサーバについて解説します。
前回契約後に届いたメールを改めて確認しましょう。
サーバコントロールパネルログイン情報に記載されているURLをクリックし、ログイン画面を表示しましょう。
ログインページが表示されたら、メールに記載されたドメイン名とサーバパスワードを入力し、コントロールパネルにログインしましょう。
このような画面が表示されればログイン成功です！
サーバ情報の確認
申し込みの際に設定したドメインを確認してみましょう。
メニューからドメイン/SSLにマウスを乗せると、右にメニューが出てくるので
ドメイン/SSLをクリックしてください。
こちらの画面で
- あなたのホームページのURL
- ホームページとして公開されるフォルダ
の確認ができます。
また、独自ドメインの設定もこの画面からおこないますので、少し覚えておいてください。
STEP1で使用した図を、今回のサーバの構成に当てはめてみると、このような図になります。
- ユーザがあなたのホームページのURLにアクセスする
- アクセスがさくらのレンタルサーバに届く
- Webサーバソフトウェアがアクセスを受け取り
- ~/www/のフォルダに配備されたHTMLやCSSをユーザに返す
- ユーザのパソコンにホームページが表示される
という流れになります。
ホームページを公開する = 指定したフォルダにHTMLファイルを配備する
ということになります。
どこのフォルダを公開するかの設定はWebサーバソフトウェアが管理しており、レンタルサーバでは変更できないこともまれにあります。
今回は標準の設定である~/www/にHTMLを置いてホームページを公開してみましょう。
HTMLを作成する
では、実際に公開するためのホームページを作成します。
本格的に作成するのは次のSTEPで解説するので、今回はエンジニアのお決まりのHello Worldを表示してみます。
HTMLについては
[card2 id=”84″]
[card2 id=”173″]
でも解説していますので、ぜひみてくださいね。
今回使用するHTMLのコードをいきなりですがどかーんと紹介します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>ProgateなどですでにHTMLを学習した事がある方はとても簡単に見えると思いますし、まだこれから学習する人はなんじゃこれは！と感じた方もいらっしゃるかもしれません。
とりあえずこれがHTMLと呼ばれる言語で書かれたホームページを作成するためのものと覚えておいてください。
では実際にファイルを作成しましょう。
すでにVS Codeなどのエディタを使用している人は、エディタを使用してください。
なんのこっちゃという方は
メモ帳やテキストエディタを起動してください。
無事メモ帳やテキストエディタを起動できたら
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>こちらを全てコピーして貼り付けてください。
その後、そのファイルを
index.html
という名前でわかりやすい場所に保存してください。（例：デスクトップなど）
サイトのコードをコピーしてテキストエディタに貼り付けた際に、フォントの設定が出てしまっている場合は、そのまま保存するとうまく表示ができません。
その場合はメニューからフォーマットをクリックし、標準テキストにするをクリックしてください。
デスクトップを表示すると、先ほど作成したindex.htmlというファイルが作成されているはずです。
index.htmlファイルをダブルクリックしてブラウザで開いてみましょう。
ブラウザにHello world!と表示されればHTMLの作成は成功です！
しかし、このホームページはあなたのパソコンの中にあるため、他のユーザはみる事ができません。
そこでさくらのレンタルサーバの~/www/に配備する必要があるのです。
ホームページを配備する
では、いよいよ先ほど作成したindex.htmlをサーバに配備し、公開しましょう。
公開するとあなたの友達やネット上の人、世界中の人があなたのホームページにアクセスできるようになります。
そのため、個人情報や公開したくない情報をあやまって公開しないように注意しましょう。
サーバにHTMLを配備する方法は様々な方法がありますが主要な配備方法は大きく2つあります。
- FTPによる配備
- SSH(SCP)による配備
FTPで解説されている事が圧倒的に多いですが、Webエンジニアとして慣れてくるとscpコマンドの方が使う機会が多くなるので覚えておくと便利です。
FTPはアプリを使いながら配備ができるため、初心者にオススメです。
Windowsの方であればFFFTP – さくらの解説ページ
Macの方であればFileZilla – さくらの解説ページ
がアプリとしては有名ですが、さくらのレンタルサーバのコントロールパネルでもFTPと同様にファイルの配備が可能です。
ちなみにファイルをサーバに配備することをアップロードとも言います。
サーバにターミナルからログインをして作業をすることをSSHで接続するなどといいます。
ハッカーなどが黒い画面に文字がバーっと流れている画面で作業をしているイメージがある人も多いかもしれませんが、あのような画面で作業を行います。
sshが接続可能なサーバはFTPではなく、scpというコマンドでファイルやフォルダのやり取りが可能です。
こちらに関してはサーバの操作やコマンドの解説も含め、爆速ポートフォリオ作成の番外編として記事にしようと思ってますので、楽しみにしておいてください。
SSH、SCPの知識はWebエンジニアになる方には必須のスキルとなりますので、興味がある方はぜひ調べてみてください。
今回は使用するソフトの違いなどから、うまくいかないユーザが出てくる可能性があるため、今回はさくらインターネットのコントロールパネルからファイルをアップロードしてみましょう。
先ほどコントロールパネルへログインした時と同様にログインしましょう
ログインが完了したら、
メニューのWebサイト/データにマウスを乗せ、出てきたメニューからファイルマネージャをクリックしてください。
ファイルマネージャが別のウィンドウで起動します。
wwwというフォルダが開かれ、右の画面には何もないことを確認してください。
この状態で一度あなたのホームページへアクセスしてみましょう。
私のアドレスはhttp://sideincome.sakura.ne.jpですが、みなさんはご自身のアドレスにアクセスしてみてください。
http://あなたの決めたドメイン.sakura.ne.jp/をブラウザで開く。
すると、まだ何も配備されていないため、
このようなエラー画面が表示されれば問題なくアクセスできています。
ではいよいよファイルを配備(アップロード)してみましょう。
ファイルマネージャの表示アドレスへの操作からアップロードをクリックします。
ファイルをアップロードするためのウィンドウが開きますので、ファイルの追加をクリック。
アップロードするファイルを選ぶ画面が出ますので、index.htmlを選びましょう。
選ぶと、ファイル一覧にindex.htmlが表示されますので、一覧に表示されたことを確認してアップロード開始をクリックしましょう。
上書きの注意のダイアログが表示されます。はいをクリックしてアップロードしましょう。もしすでに一度ファイルをアップされた事がある場合は、上書きされてしまいますのでご注意ください。
アップロードが完了すると、ファイルマネージャの右側にindex.htmlのファイルが表示されます。右側の画面に表示されているファイルが実際にサーバにアップロードされたファイルとなります。
index.htmlがアップロードされた事が確認できたら、実際にホームページにアクセスして確認してみましょう。
先ほどはエラーが表示された、
http://あなたの決めたドメイン.sakura.ne.jp/をブラウザで開いてみてください。
いかがでしょうか？Hello World!が表示されれば大成功となります。
先ほどのURLを友人に共有すれば、もちろん友人からもHello World!と書かれたホームページをみる事ができます。
ぜひ、初めてホームページを公開された方はTwitterなどで成果を報告してみてくださいね。
コメント