【爆速ポートフォリオ作成】 STEP1 レンタルサーバの準備

Progateの勝手に深掘りシリーズなど、HTMLやCSSについての解説をこなっていますが、より実践的なシリーズとして爆速ポートフォリオ作成という企画を行なっていきます。

HTMLは書けるけど、ホームページの公開方法がわからないなどの悩みを持った方が多いことを知り、実際にあなたの手でゼロから公開するところまで徹底解説いたします。

さいん
さいん

わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。

たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。

こんな人に読んでほしい
  • プログラミングを勉強中だが実践的な内容が知りたい
  • HTMLを勉強しているがホームページの公開方法を知らない
  • ポートフォリオを作りたいが何をやっていいかわからない

という、プログラミングを始めたばかりでこれから何をやっていいかわからない、実践的な方法を知りたいという方にぴったりのシリーズとなっています。

全くプログラミングをやったことがなく、これからプログラミングの勉強を行うという方は

[card2 id=”208″]

[card2 id=”173″]

などで、これからプログラミングを始める方への解説も行なっていますので、チェックしてくださいね。

目次

爆速ポートフォリオ作成について

爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。

レンタルサーバの準備

今回の記事で解説する内容です。

レンタルサーバでホームページを公開する

ポートフォリオの前にサーバの設定とホームページを公開する手順を確認しましょう

STEP2 レンタルサーバでホームページを公開する

ポートフォリオの作成

HTML/CSS&Bootstrapでポートフォリオの作成方法を解説します。

STEP3 Bootstrapでポートフォリオの作成

独自ドメインを契約・設定する

今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。

STEP4 独自ドメインを契約・設定する

WordPressの作成

WordPressをインストール、初期設定をした後にテーマをカスタマイズして会社のコーポレートを作成します。

STEP 5-1 WordPressのインストール
STEP 5-2 WordPressの初期設定
STEP 5-3 WordPressで会社のページ作成

今回はSTEP1となるレンタルサーバの契約になります。

今後のSTEPを進めるために必要となる作業ですので、なぜレンタルサーバが必要なのかという理解と、実際にレンタルサーバを借りてみましょう。

もし、すでにレンタルサーバを契約済の方は契約中のレンタルサーバも使用可能です。

apacheやwordpressの簡単インストールに対応しているかの確認をしておきましょう。

今回の記事で紹介しているレンタルサーバはさくらのレンタルサーバです。

すでにある程度の知識がある方はサクッと済ませて次のステップへ進んでください。

[redshiny]さくらのレンタルサーバの登録はこちら
[/redshiny]

レンタルサーバーってなんで必要?

今プログラミング学習中の方はこれからプログラミングを勉強したいという方は、ホームページの作成をメインで学習すると思います。

しかし、実際にWeb制作の案件で副業を行い方や、Webエンジニアとして転職を目指している方はホームページの作成方法だけでなくホームページの公開方法も基本的なことは知っておく必要があります。

どうしてホームページが見れるのか?

どうしてホームページが見れるのか?

普段ホームページを見るときに特に意識することはないとは思います。

しかし、もしあなたがすでにHTMLなどの言語を勉強している場合は、気づいた方もいらっしゃるかもしれません。

どうやってホームページを公開するのか?

という点です。

学習サイトや書籍でHTMLを作成し、あなたのパソコン上や学習サイト上でホームページが作れるようになっても、それを他の人に見てもらうために公開する方法がわからないという方も多いともいます。

もしくは、Github pagesやHerokuなどを利用してホームページを公開する方法は知っているが、どうやって公開しているのか仕組みを知らないという方も多いと思います。

Webサーバについて

結論から言うと、サーバと呼ばれる外部からアクセスできるコンピュータ上にHTMLやWordPress、プログラムなどを配備することでホームページを公開できます。

Webサーバについて

よくセールの開始や、テレビなどで特集を受けた会社のホームページのサーバが落ちたと言う単語を聞いたことがあると思います。

これはまさに、ホームページを公開するためのサーバ自体やそのサーバの中で動いているWebサーバソフトウェアがエラーになってしまったことを指します。

このWebサーバソフトウェアはApache(アパッチ)やNginx(エンジンエックス)などが有名で、HTMLやWordpressなどのWebプログラムを外部に公開する際に必要ないろいろなことをやってくれるソフトウェアです。

今後アプリケーションサーバなどいろいろなソフトウェアが出てきますが、今の段階では

  • サーバが必要
  • サーバ内で動くソフトが必要
  • サーバ内にHTMLやWordpressを配備する

と覚えておきましょう

レンタルサーバとは

すでにお気づきの方が多いと思いますが、ホームページを公開するためにはサーバが必要となります。

あなたのパソコンもサーバにすることが可能ですが、外部にあなたのパソコンを公開してしまうのはセキュリティ的にもかなり危険なのでホームページを公開するためのサーバを借りるのが一般的です。

サーバの種類もたくさんあり

サーバの種類
  • レンタルサーバ ・・・ 最低限の機能で安価
  • VPS ・・・ 自由度がとても高いが、自分でセットアップが必要
  • クラウド ・・・ 複雑な構成も対応可能
  • SaaS ・・・ すぐに利用できるが、自由度が低い

といった様々な種類があります。

SaaSが少しわかりにくいですが、はてなブログのブログサービスなど、すぐに立ち上げができとても便利ですが、あくまで提供されるサービスを利用する程度でカスタマイズ性がとても低いです。

Web制作やWordPressの案件では安価で比較的カスタマイズも可能なレンタルサーバが導入としてはおすすめです。

今後Webサービスなどのガッツリプログラムで動くアプリを公開する場合はVPSやクラウドのサーバが必要になるケースが出てきますが、Web制作であればレンタルサーバで十分です。

レンタルサーバはWebサーバソフトウェアやWordPressの簡単インストール機能がついているものも多いので、初心者で安心してください。

ドメインについて

ドメインについて

この図で気づいた方も多いと思いますが、アクセスする際にIPアドレスと呼ばれる、数字でアクセスしています。

しかし、本来はhttps://google.comやこのブログではhttp://side-income.net/というように分かりやすいURL、アドレスでアクセスしますよね?

これをドメインとよび、この文字列を上記のようなIPアドレスへ自動的に変換してくれるサービスが存在します。

多くのレンタルサーバではレンタルサーバのものになりますが、このアドレスをレンタルサーバが提供してくれます。

もし、あなたが好きなドメインを設定したい場合は

独自ドメインの設定と呼ばれ、あなた自身でドメインを取得しレンタルサーバに適応することで、好きなドメインであなたのサーバへアクセスすることが可能となります。

レンタルサーバに登録しよう

さくらのレンタルサーバについて

レンタルサーバといってもいろいろな会社が提供しています。

今回は、エンジニアで学習用として契約している人も多いさくらのレンタルサーバの登録手順をご紹介します。

さくらのレンタルサーバ情報
  • スタンダードプラン
  • 月額524円
  • 年間一括 5,238円 と2ヶ月分お得に
  • 初期費用1,048円
  • お試し期間2週間
  • 容量100GB
  • 転送量80GB
  • WordPressクイックインストール
  • MySQLデータベース
  • 無料SSL
  • SSH
  • FTP
  • 独自ドメイン・マルチドメイン100個
  • Perl・Ruby・Python・PHP
    (RailsなどのWebアプリはオススメしません)

月額524円、年間契約にすると5,238円と2ヶ月分もお得になります。

初期費用が1,048円なので、1年間使用する場合の費用は6,286円になります。

お試しとして2週間無料なので、登録して問題があればお試し期間中に解約するようにしましょう。

Ruby on RailsなどWebアプリケーションを公開することが目的であれば、レンタルサーバではなく、さくらのVPSなどのVPSサービスを申し込むようにしましょう。

今回はあくまで、HTMLやCSS、jQueryを中心としたWebサイトやWordPressの爆速公開を目的としています。

[redshiny]さくらのレンタルサーバの登録はこちら
[/redshiny]

さくらのレンタルサーバ登録手順解説

さくらのレンタルサーバ登録手順解説

さくらのレンタルサーバへアクセスし、右上の申し込みボタンをクリック。

[redshiny]さくらのレンタルサーバの登録はこちら
[/redshiny]

さくらのレンタルサーバ申し込み

スタンダードプランを選択しましょう。

ライトでは様々な機能が使用できなくなってしまうので、スタンダードプランでの契約がオススメです。

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

あなたのページにアクセスするためのURLを決めることができます。

https://あなたの好きな英数字.sakura.ne.jp/

であなたのページにアクセスできるようになります。

今回のレンタルサーバはテストや勉強のためだと思うので、あなたが覚えやすいURLを登録しましょう。

また、作成したものを今後ポートフォリオとしてお客さんや転職先の採用担当に見てもらう前提の方は人に教える前提で名前をつけておきましょう。

もしくはSNSでアウトプットとしてサイトを公開する予定の人は本名を含むURLは避けるなど少し気を付けて設定しましょうね。

独自ドメインについて

レンタルサーバと同時に独自ドメインの契約もできてしまいますが、私は独自ドメイン単体での取得をオススメしています。

なぜなら、今後あなたがWeb制作の案件などを副業で行う場合、独自ドメインをお客さんが希望した場合、独自ドメインの取得方法を知っておく必要があるからです。

ここで、一緒に独自ドメインを取得するのではなく、ゼロから独自ドメインの取得および設定できるようにしましょう。

Web制作はできるけど独自ドメインの設定のことは全くわからないというフリーランスの方が意外と多いです。ここで案件を逃してしまうのはとてももったいないので、独自ドメインの対応ができるスキルを身につけましょう。

私のブログでも後日独自ドメインの取得と今回登録したさくらのレンタルサーバへの設定の方法も詳しく解説予定です。

さくらのレンタルサーバの会員登録

すでにさくらインターネットの会員登録をしたことがある方はログインを。

ほとんどの方は新規会員登録へ進むをクリックしてください。

さくらのレンタルサーバのメール登録

会員登録に使用するあなたのメールアドレスを入力。

このメールアドレスに登録に必要なメールが届くので、確実にメールを受信できるものを選んでください。

会員登録のご案内メールを送信をクリックすると、画面が切り替わります。

次のステップでメールの確認になりますが、ブラウザは閉じないようにしましょう。

さくらのレンタルサーバのメール認証

数分すると、先ほど登録したメールアドレスにさくらインターネットからメールが届きます。

メール内に記載されている

認証コードをコピー(もしくは暗記)してください。

もし、ブラウザを閉じてしまった方はメールに記載されているリンクをクリックしてください。

さくらのレンタルサーバの会員登録認証

ブラウザに戻ると、画面が切り替わっており、認証コード入力画面になっていると思います。

認証コードの入力欄に、メールに記載された認証コードを入力して、

次へ進むをクリックしてください。

さくらのレンタルサーバの会員情報入力

あなたの会員情報入力画面になります。

必要な情報を入力し終えたら、確認画面へ進むをクリックしてください。

さくらのレンタルサーバの会員情報登録

先ほど入力した会員情報の確認画面になります。

入力した情報に間違いがないことを確認し、会員登録するをクリックしてください。

さくらのレンタルサーバの支払い情報

続いて、支払い方法の入力画面になります。

支払いパターンを月払いか年間一括のどちらかを選択。

もし本格的にWeb制作やWebエンジニアへのキャリアを考えている方は2ヶ月分お得になる年間一括がオススメです。

支払い方法はクレジットカード、銀行振込、請求書払いから選んでください。

入力が完了したら申し込み内容の確認をクリックしてください。

さくらのレンタルサーバの申し込み確認画面

先ほど入力した支払いタイプと支払い方法の他に、申し込むプランと利用料金も記載されていますので間違いがないかの確認をしてください。

特にプランはスタンダードになっているかの確認と、請求金額が認識と合っているかの確認を必ず行ってください。

この内容で申し込むをクリックすると申し込み完了です

さくらのレンタルサーバの申し込み完了画面

お疲れ様でした!

これでさくらのレンタルサーバの申し込みが完了です。

あなたのホームページを公開するためのサーバが手に入りました。

数分で登録したメールアドレスに、様々な情報が記載されたメールが届くので確認しておいてください。

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

こちらの情報は今後のステップでも必要となる情報ですので、いつでも確認できるようにしておいてください。

今後のステップではHTMLの公開方法やWordPressの初期セットアップの流れもご紹介いたします。

全てレンタルサーバが最低限必要になりますので、申し込み完了メールが受信できているかは必ずチェックしてください。

[redshiny]さくらのレンタルサーバの登録はこちら
[/redshiny]

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる