学生の頃、就活用に作成したポートフォリオサイトがあります。
久しぶりに見返してみると……
ダッサッッッ！！！！
人の価値観は変化し続けるものですね。
それだけ私の目も肥えたというわけです。
ブログ用に事前に借りているサーバに、個人で製作したWebページを公開する方法をご紹介します。
だいたいの流れとしては、たったの2ステップ！
- サイトの基礎となるHTMLを構築
- サーバにアップロードする
初級者向け書籍に乗ってそうな内容ですね。
書いている当の本人も初学者なので、お手柔らかにどうぞ。
前提・環境
私個人のメモ程度に記載しておきます。
前提
- 初歩的なコマンドでターミナル操作できること。
- サーバを保持（契約）していること。（仮想環境でも可）
- サーバにSSH接続できること。
- 基本的なHTMLタグの記述ができること。
仮想環境で構築してみたい方は、こちらを参照ください！
環境
- OS: MacOS Mojave 10.14.6
- IDE: Visual Studio Code
- サーバ: ConoHa VPS(KUSANAGIでブログ構築済み状態)
サイトの基礎となるHTMLを構築しよう！
…と思ったのですが、私は下記のような状況でした。
- Webデザインの学習をするのも億劫
- そもそもタグを１つ１つベタ打ちしていくの億劫
- どっかにテンプレート無いかな〜（堕落）
そんなわけで見つけたのが、HTML5UPというサービス。
こちらを使いました。
私は今回 “Dimension” というテーマを使用しました。
使い方というか、ダウンロードするだけです。うん。
そして自分の書きたいように修正する！
※HTMLのタグの書き方などが分からないと、苦戦するかもしれません。
私がどんな修正を加えたか気になる方は、リポジトリをご覧ください。
サーバにアップロードする
内容を修正することが出来たら、サーバにアップロードします。
サーバにアップロードし、公開することによって、世界中の人たちに自分のサイトが見てもらえる状態になります。
以下の順番に進めていきます。
- SCPコマンドの確認
- ディレクトリパスの確認
SCPコマンドの確認
SCPコマンドとは、SSHを使ってサーバにファイル転送することができるコマンドです。
SSHを使った転送ということは、通信を暗号化できるためファイルを安全に送信することができます。
コマンドは下記のような形式です。
|
1 |
scp [オプション] 送信元 受信先 |
今回やりたいことを、上記の形式に則って書き換えると…
|
1 |
scp [オプション] 自分のPCにあるファイル サーバに置きたい場所 |
ディレクトリパスの確認
転送するために使うコマンドが分かったところで、転送元と転送先を確認します。
送るファイル（転送元）の確認
ローカル上にて、転送するファイルを確認します。
ファイルパスをちゃんと確認しておきましょう。
（例：/Users/yutori/Desktop/portfolio.zip ）
ファイルが配置されている場所を表す文字列のこと。
左から順に階層化されて表現される。
送り先（転送先）の確認
サーバにアクセスして、ファイルを置きたい場所を確認します。
Webページは、Webサーバが管理しているドキュメントルートという場所に配置しなければなりません。
Webサーバが外部に公開するファイルとして管理しているディレクトリのこと。
ここに配置すれば、他人がアクセスした時にWebページを表示できる。
そのドキュメントルートが「ファイルを置きたい場所」となります。
先ほどと同じく、パスを確認しましょう。
私はVPSですでにブログを構築しているので下記のパスになりました。
|
1 |
/home/kusanagi/WordPress/DocumentRoot |
SCPコマンドで転送する！
転送元と転送先がわかったところで、実際に転送しましょう！
|
1 |
scp -r /Desktop/portfolio.zip root@192.168.100.1:/home/kusanagi/WordPress/DocumentRoot |
注意点
- 今回送信する際、ZIP圧縮しました。
- ユーザ名(rootの部分)、IPアドレスは一例として記載しています。
- 必ずローカルからSCPコマンドを実行しましょう。
おわりに
ここまでうまく出来ましたでしょうか？
自分のサイト持ってるって、結構かっこいいですよね。
周りの人に自慢できるサイトを簡単に作っちゃいましょう！
次は、AWSを使ってやってみたいですね。
参考サイト
