【初心者向け】 1日でサーバにポートフォリオサイトを公開してみた。

PCを抱える男性 IT関連

学生の頃、就活用に作成したポートフォリオサイトがあります。

これを見返すと本当に

僕

だっっっっっっさ!!!

ということで、新しく作り直しました!

ブログ用に事前に借りているサーバに、
個人で製作したWebページを公開する方法を記します。

今回の流れは以下の通りです。
たったの2ステップ!

  • サイトの基礎となるHTMLを構築
  • サーバにアップロードする

初級者向け書籍に乗ってそうな内容ですね。

書いている当の本人も初学者なので、お手柔らかにどうぞ。

前提・環境

文章を書く女性

私個人のメモ程度に記載しておきます。

前提

  • 初歩的なコマンドでターミナル操作できること。
  • サーバを保持(契約)していること。(仮想環境でも可)
  • サーバにSSH接続できること。
  • 基本的なHTMLタグの記述ができること。

仮想環境で構築してみたい方は、こちらを参照ください!

【イラストで分かる】VagrantとVirtualBoxを使って、仮想環境を構築してみよう!
VagrantとVirtualBoxを使って、簡単に仮想環境の構築をしてみましょう! インストールに時間がかかりますが、簡単です!

環境

  • OS: MacOS Mojave 10.14.6
  • IDE: Visual Studio Code
  • サーバ: ConoHa VPS(KUSANAGIでブログ構築済み状態)

サイトの基礎となるHTMLを構築しよう!

…と思ったのですが、私は下記のような状況でした。

  • Webデザインの学習をするのも億劫
  • そもそもタグを1つ1つベタ打ちしていくの億劫
  • どっかにテンプレート無いかな〜(堕落)

そんなわけで見つけたのが、HTML5UPというサービス。
こちらを使いました。

私は今回 “Dimension” というテーマを使用しました。

使い方というか、ダウンロードするだけです。うん。

僕

そして自分の書きたいように修正する!

※HTMLのタグの書き方などが分からないと、苦戦するかもしれません。

私がどんな修正を加えたか気になる方は、リポジトリをご覧ください。

yuutarou22/portfolioSite
経歴などをまとめたポートフォリオサイトです。MySiteリポジトリで管理していたものを改変致しました。 - yuutarou22/portfolioSite

サーバにアップロードする

3画面ディスプレイ

内容を修正することが出来たら、サーバにアップロードします。

サーバにアップロードし、公開することによって、
世界中の人たちに自分のサイトが見てもらえる状態になります。

以下の順番に進めていきます。

  • SCPコマンドの確認
  • ディレクトリパスの確認

SCPコマンドの確認

SCPコマンドとは、SSHを使ってサーバにファイル転送することができるコマンドです。

SSHを使った転送ということは、通信を暗号化できるためファイルを安全に送信することができます。

コマンドは下記のような形式です。

今回やりたいことを、上記の形式に則って書き換えると…

単純に「このファイルをここに転送したいです」っていう意味で書けばOKです。

ディレクトリパスの確認

見つめる男性

転送するために使うコマンドが分かったところで、転送元と転送先を確認します。

送るファイル(転送元)の確認

ローカル上にて、転送するファイルを確認します。

ファイルパスをちゃんと確認しておきましょう。
(例:/Users/yutori/Desktop/portfolio.zip )

ファイルパスとは
ファイルが配置されている場所を表す文字列のこと。
左から順に階層化されて表現される。

送り先(転送先)の確認

サーバにアクセスして、ファイルを置きたい場所を確認します。

Webページは、Webサーバが管理しているドキュメントルートという場所に配置しなければなりません。

ドキュメントルートとは
Webサーバが外部に公開するファイルとして管理しているディレクトリのこと。
ここに配置すれば、他人がアクセスした時にWebページを表示できる。

そのドキュメントルートが「ファイルを置きたい場所」となります。

先ほどと同じく、パスを確認しましょう。

私はVPSですでにブログを構築しているので下記のパスになりました。

SCPコマンドで転送する!

転送元と転送先がわかったところで、実際に転送しましょう!

注意点

  • 今回送信する際、ZIP圧縮しました。
  • ユーザ名(rootの部分)、IPアドレスは一例として記載しています。
  • 必ずローカルからSCPコマンドを実行しましょう。

おわりに

ここまでうまく出来ましたでしょうか?

自分のサイト持ってるって、結構かっこいいですよね。

周りの人に自慢できるサイトを簡単に作っちゃいましょう!

参考サイト

sshでファイル転送の手順 - Qiita
はじめに サーバー環境によっては、セキュリティー上FTPソフトでのファイル転送ができないことがあります。 その際、ターミナルなどのCLIを使ってのファイルの転送をするのですが、デザイナーの方などの普段あまりコマンドライン上での作...
scp でローカルからリモートにファイルをコピーしたい|teratail
scp コマンドでローカルからリモートにファイルをコピーしたいscp コマンドでローカルにあるファイルをリモートのディレクトリ内にコピーしたいのですが、ローカルにファイルはあるのに No such file or directoryが返される 試したことssh で接
タイトルとURLをコピーしました