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

スポンサーリンク
PCを抱える男性 IT関連
この記事は約4分で読めます。

学生の頃、就活用に作成したポートフォリオサイトがあります。
これが、めちゃんこダサい。

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

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

今回の流れは以下の通りです。

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

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

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

スポンサーリンク

前提・環境

文章を書く女性

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

前提

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

環境

  • 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を使った転送ということは、通信を暗号化できるためファイルを安全に送信することができます。

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

scp [オプション] 送信元 受信先

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

scp [オプション] 自分のPCにあるファイル サーバに置きたい場所

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

ディレクトリパスの確認

見つめる男性

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

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

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

私は、デスクトップ直下に置きました。

パスをちゃんと確認しておきましょう。

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

送り先(転送先)の確認

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

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

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

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

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

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

/home/kusanagi/WordPress/DocumentRoot

SCPコマンドで転送する!

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

scp -r /Desktop/portfolio.zip root@192.168.100.1:/home/kusanagi/WordPress/DocumentRoot

注意点

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

おわりに

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

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

…かっこいいよね?

参考サイト

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