Help us understand the problem. What is going on with this article?

ポートフォリオを作り始めて無料で公開する(まずは形だけ)

More than 1 year has passed since last update.

フリーランスで働くならポートフォリオは必須ですよね。
私はこれまで無くてもどうにかなっていたのですが、やっぱりこれからは必要だなって肌で感じてます。

無料でポートフォリオを作れるWebサービスもたくさんあると思いますが、
私は載せられる制作実績があまり無いので、ポートフォリオ自体を制作実績の一部にしてしまいたく、
あえて自作を選びました。

ただし、時間も予算もほぼ無いので、無料でサクッとまずは公開したく、
元々アカウントを持っていたfirebaseにポートフォリオ用のプロジェクトを追加して公開しました。

firebaseにプロジェクト追加

スクリーンショット 2018-02-27 22.40.09.png

ポートフォリオ用のプロジェクト構成を作成

mkdir portfolio

firebase設定ファイルを用意

portfolio/firebase.json
{
  "hosting": {
    "public": "public"
  }
}

未インストールならfirebaseツールをグローバルインストール

npm install -g firebase-tools

firebaseにログインし、プロジェクト初期設定を行う

cd portfolio
firebase login

firebase init 

#firebase管理コンソールで追加したプロジェクトへホスティングするように選択
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
◯ Hosting: Configure and deploy Firebase Hosting sites

? Select a default Firebase project for this directory: (Use arrow keys)
portfolio

#これが出たら初期設定完了
✔  Firebase initialization complete!
Project creation is only available from the Firebase Console

アップするHTMLファイルを準備

mkdir public
touch index.html

index.htmlの中身を記述(まずは形だけ適当に。。。)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Masaaki Uegaki</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="msapplication-starturl" content="/">
</head>
<body>
  Hello Portfolio!
</body>
</html>

出来上がったプロジェクト構成
スクリーンショット 2018-02-27 23.43.22.png

firebaseにデプロイ

firebase deploy
✔ Deploy complete!

これで公開完了です。
https://portfolio-893ef.firebaseapp.com/

では、肝心のポートフォリオの中身をこれから作ります。。。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away