Progateの勝手に深掘りシリーズなど、HTMLやCSSについての解説をこなっていますが、より実践的なシリーズとして爆速ポートフォリオ作成という企画を行なっていきます。
HTMLは書けるけど、ホームページの公開方法がわからないなどの悩みを持った方が多いことを知り、実際にあなたの手でゼロから公開するところまで徹底解説いたします。

わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。
たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。
- プログラミングを勉強中だが実践的な内容が知りたい
- HTMLを勉強しているがホームページの公開方法を知らない
- ポートフォリオを作りたいが何をやっていいかわからない
という、プログラミングを始めたばかりでこれから何をやっていいかわからない、実践的な方法を知りたいという方にぴったりのシリーズとなっています。
全くプログラミングをやったことがなく、これからプログラミングの勉強を行うという方は
[card2 id=”208″]
[card2 id=”173″]
などで、これからプログラミングを始める方への解説も行なっていますので、チェックしてくださいね。
爆速ポートフォリオ作成について
爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。
今回の記事で解説する内容です。
ポートフォリオの前にサーバの設定とホームページを公開する手順を確認しましょう
HTML/CSS&Bootstrapでポートフォリオの作成方法を解説します。
今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。
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などを利用してホームページを公開する方法は知っているが、どうやって公開しているのか仕組みを知らないという方も多いと思います。
結論から言うと、サーバと呼ばれる外部からアクセスできるコンピュータ上にHTMLやWordPress、プログラムなどを配備することでホームページを公開できます。

よくセールの開始や、テレビなどで特集を受けた会社のホームページのサーバが落ちたと言う単語を聞いたことがあると思います。
これはまさに、ホームページを公開するためのサーバ自体やそのサーバの中で動いている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]
コメント