未経験者でも１０分でMVPを立ち上げ駆け出しエンジニアとしてツイッターでドヤる方法

# TL;DR （長すぎて読めない人用）
Twitterで**駆け出しエンジニア**の方々に好評だったのでシェア。

> 効率的にプログラミング学習を進めるためには動くものを創るのが一番。
> まずは爆速完全無料で自分のウェブサイトを立ち上げそれを改善しながら上達していこう！
> ポートフォリオサイト究極の[MVP（Minimum Viable Product）](https://boxil.jp/mag/a3551/)を**１０分以内**に！

という主旨です。サイト立ち上げだけなら**１分**。Node.jsのインストールや独自ドメイン取得設定、ツイッターのカード設定に少し時間を（**９分？**）使う。

ちょっとずつ進捗を確認するため何度もウェブサイトをデプロイしているが、ステップを多少組み替えてデプロイを一度だけにすることも可能。が、仕組みやフローを理解するため`1=>2=>3=>4`と順に進めるのがお薦め。

**【ステップ１: 3分】** インストール[Node.js](https://nodejs.org/ja/)。一緒にインストールされる`NPM`が必要。

**【ステップ２: １分】** [Surge](https://surge.sh/)に静的ウェブサイトを設置。下のコマンドを必要箇所（`body`内とサブドメイン名`ocrybit`を任意に）だけ変更して実行（Linux/Mac）。Windowsは本文で別途解説。

```bash

npm i -g surge
mkdir myapp
cd myapp
echo '<html><body>世界二のプログラマー億ラビットくん</body></html>' > index.html
surge ./ ocrybit.surge.sh
```

**【ステップ３: ３分】** [Freenom](https://www.freenom.com/ja/index.html)で無料独自ドメイン（tk/ml/ga/cf/gp）取得 （例: ocrybit.tk）
※ 途中`use DNS`を選択し`A Records`の設定を`45.55.110.124`に。
※ 登録に住所等を聞かれるが適当でも問題ない。最低限名前・住所・Eメール・パスワードを入力すればOK。

新しいドメイン名で**Surge**にデプロイ。

```bash

surge ./ ocrybit.tk
```

**【ステップ４: ３分】** お好きなカバー用画像をプロジェクトディレクトリ内に保存し、任意のエディターでツイッターのカードを表示する最低限のHTMタグを`index.html`に設定。余計なものは一切入れないMVP。`charset`は`body`の文字化け防止で念のため。文字化けしたらエディターの文字コード設定が`utf-8`になってるか確認。

```html:index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="億ラビットくんのMVPL（Minimam Viable Programming Lessons）" />
    <meta property="twitter:image" content="http://ocrybit.tk/cover.png" />
    <meta property="twitter:description" content="世界二のプログラマー『億ラビットくん』が、ゼロからプログラミングを始めて最速でプロダクトを開発し世界で起業して勝負する方法を超適当に伝授します。" />
  </head>
  <body>
    世界二のプログラマー億ラビットくん
  </body>
</html>
```
`index.html`を上のコードを参考に書き換えて`surge`に再デプロイ。

```
surge ./ ocrybit.tk
```

結果
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">１０分以内に駆け出しエンジニアとしてツイッターでドヤるMVP<a href="https://t.co/TkLUsw7Ddo">https://t.co/TkLUsw7Ddo</a></p>&mdash; 億ラビットくん (Ocean Rabbit) (@ocrybit) <a href="https://twitter.com/ocrybit/status/1076202454931394560?ref_src=twsrc%5Etfw">2018年12月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


***

# 自己紹介 （ここから本文）

こんにちは。『[駆け出しハッカー部](https://discord.gg/epGPA58)』というコミュニティで活動しているベルリン在住のエンジニア『[億ラビットくん@ocrybit](https://twitter.com/ocrybit)』と言うものです。元々[ALIS](https://alismedia.jp/ja/)という日本初のICOに成功したブロックチェーンソーシャルプラットフォームで**『ALISハッカー部』**というその業界ではちょっとだけ名の知れた開発者グループを、よりグローバルで初学者にも優しい活動をするためにリブランディングしたのが『[駆け出しハッカー部](https://discord.gg/epGPA58)』です。プログラミング未経験者・初学者から自分でプロダクトを創って海外起業してしまうエンジニア・テック起業家まで様々な人が入り混じっているコミュニティです。

前置きはさておき、初学者に優しい『[駆け出しハッカー部](https://discord.gg/epGPA58)』という名前に恥じないような、駆け出し方を書きます。プログラミング未経験者でもこの記事に沿って進んでいくと約１０分で自分のポートフォリオウェブサイトを立ち上げて、無料でトップレベル独自ドメインも取得、ツイッターでカード画像付きで駆け出しエンジニアとしてドヤることができるでしょう。超簡単な4ステップです！

初学者がプログラミング上達させる一番の近道は実際に動くものを創ってみることだと思うので、まず自分のウェブサイトを立ち上げてから学習を始めるというのはかなり実用的な学習方法論だと思っています。これはプロダクションレベルのプロダクト立ち上げにも応用が効くウェブサイト設置方法です。

# 目次
> 1. **Node.jsをインストール**
> 2. **Surgeを使って一瞬でポートフォリオサイト（究極のMVP）を立ち上げる**
> 3. **無料のトップレベル独自ドメインを取得**
> 4. **ツイッターのカードを画像付きで綺麗に表示する最小限のHTMLタグを設定**

# 【ステップ１】 Node.jsをインストール
Node.jsのインストール方法はOS環境によって違うので他の記事へのリンクを貼るにとどめここでは省略します。Linux、Macであればコマンドラインで一瞬、WindowsであればNode.jsのサイトからインストーラーをダウンロードして実行するだけかと思います。Node.jsをインストールすると同時にnpmもインストールされるのでそれを使っていきます。

Windows
https://qiita.com/Masayuki-M/items/840a997a824e18f576d8

Mac / CentOS
https://qiita.com/jaxx2104/items/2277cec77850f2d83c7a

# 【ステップ2】 静的サイトの設置
1分以内に自分のウェブサイトを究極のMVPとして立ち上げる方法です。必要箇所だけ書き換えてコマンドを一行ずつ打ち込みましょう。

```bash

npm i -g surge
mkdir myapp
cd myapp
echo '<html><body>世界二のプログラマー億ラビットくん</body></html>' > index.html
surge ./ ocrybit.surge.sh
```
これで、https://ocrybit.surge.sh にウェブサイトが立ち上がりました。この時点でパブリックに公開され誰でもアクセス可能です。

変更が必要な箇所は、ウェブサイトの本文`body`内と一番下の行のサブドメイン名`ocrybit`の部分を自分のお好きなサブドメイン名に。例えば`myapp.surge.sh`。

既に他の人に使われているサブドメイン名はエラーになるので、その場合は違う文字列を試してみて下さい。

解説すると`npm`で`surge`をグローバル環境にインストールし`myapp`というディレクトリを作ってその中に移動、必要最小限のHTMLファイルを書いて[Surge.sh](https://surge.sh)という無料の静的サイトホスティングにウェブサイトを自動でアップロードしているだけです。最終行のサブドメイン名選びにひっかからなければ1分で終わるでしょう。
*※２分かかったというクレームが来たので念のためw。*

Node.jsのインストール方法によっては一行目に`sudo`を付ける必要があります。

```bash

sudo npm i -g surge
```


Windowsの場合は検索ボックスに```cmd.exe```と入力してコマンドプロンプトを立ち上げ、

```bash

npm i -g surge
mkdir myapp
cd myapp
echo|set /p="<html><body>世界二のプログラマー億ラビットくん</body></html>">index.html
surge ./ ocrybit.surge.sh 
```
と入力しましょう。echoの行がLinux/Macと異なります。

# 【ステップ3】 独自ドメインを取得・設定

surgeのサブドメインを使うのもよいのですが、駆け出しエンジニアとしてドヤりたいのであれば、独自ドメインを取得しておくのが望ましいです。独自ドメインの種類には様々なものがありますが、Freenomというサービスを使うとトップレベルドメイン（tk/ml/ga/cf/gp）が１２ヶ月まで無料で取得可能。サブドメインを無料で取得は多々ありますが、２文字の国別トップレベルドメインを無料取得できる方法は多分これしかないです。（*あったら教えて下さいw*）

ただし、無料で何度も使いまわしがされているドメイン名であること、一年後から維持費がかかってくることを考えると真剣に自分をブランディングしていきたい場合はカッコいいドメイン名をお金を出して購入することをお薦めします。とりあえずどやりたい初心者の方や手っ取り早く独自ドメインウェブサイトを立ち上げたい方にはお薦めの方法。独自ドメインの信用力はサブドメインより高く、いろいろなウェブサービスを使うことができます。

写真で優しく解説。

まず[Freenom](https://www.freenom.com/ja/index.html)にアクセスして任意のドメイン名を検索。サーチボックスに文字列を入力し`利用可能状況をチェックします`をクリック。
![freenom.png](https://qiita-image-store.s3.amazonaws.com/0/329474/daf36516-0f2b-5942-65ce-dc2003053330.png)

検索されたドメインからお好きなものを選んで`今すぐ入手`をクリックし、`チェックアウト`をクリック。
![freenom_2.png](https://qiita-image-store.s3.amazonaws.com/0/329474/1f583490-0b37-b59a-d82d-209eea196b95.png)


`period`を`12 Months @ FREE`に変更して、`Use DNS`をクリックし、`IP address`のボックスを両方共`45.55.110.124`に、`Continue`をクリック。ウェブサイトをホストしている`surge`に飛ばすDNS設定です。
![freenom_3.png](https://qiita-image-store.s3.amazonaws.com/0/329474/343cd062-26bd-7579-41f1-8e1954f1e9bd.png)

確認画面になるので自分のEメールアドレスを入力して`Verify My Email Address`をクリック。確認メールが送られてくるのでEメール中のリンクをクリックして戻ってきて下さい。
![freenom_5.png](https://qiita-image-store.s3.amazonaws.com/0/329474/16a86316-abdd-e20b-b045-5592e2efb434.png)

個人情報入力画面になりますが厳密なKYCではないので最低限以下の項目を入力すれば大丈夫です。`I have read and agree...`も忘れずにチェック。
![freenom_6.png](https://qiita-image-store.s3.amazonaws.com/0/329474/fff8f367-2cd7-cc9c-17da-74541a2c67ca.png)

`Complete Order`をクリックすればドメイン取得完了です！
![freenom_7.png](https://qiita-image-store.s3.amazonaws.com/0/329474/8c7624fb-ae47-542e-6430-0c5cc4d88af1.png)

`surge`で新しく取得したドメインにウェブサイトをデプロイしましょう。

```bash
surge ./ ocrybit.tk
```

[http://ocrybit.tk](http://ocrybit.tk)にサイトが立ち上がります。ひとつ注意点としてはsurgeの無料プランでカスタムドメインにデプロイするとSSL設定がされないので`https`のサイトがブラウザーに危険だと認識されることです。ひとまず`http`を使いましょう。

# 【ステップ4】 ツイッターのカードを設定
さてここまできたら、`#駆け出しエンジニア`として独自ドメインで自分のサイトを立ち上げたぞ！とどやりたいところです。しかし、このままではツイッターでリンクをシェアしたときに綺麗に表示されません。ツイッターに画像付きで綺麗にリンクを表示するにはHTMLに独自のタグを指定する必要があります。最低限必要なタグは以下の４つです。

> twitter:card
> twitter:title
> twitter:image
> twitter:description

ただし、この方法は`surge`だと、カスタムドメインを設定している場合でないと使えなく、理由はサブドメインにデプロイされたサイトは`robots.txt`というファイルで自動的にクローラーが弾かれる仕様になっているからです。サブドメインに自由にサイトを立ち上げ可能にして貸し出してクローラーに認識できるようにすると検索エンジン等に`surge.sh`のドメイン自体がスパム認定されたりブラックリストされたりする可能性があるので当然の仕様です。

まず、ツイッターのカードに表示したい画像を適当なファイル名（例: `cover.png`）でプロジェクトフォルダー内に保存しましょう。僕はこれにしました。
![cover.png](https://qiita-image-store.s3.amazonaws.com/0/329474/f7538d9e-97d8-94c9-ade2-e366f5b85ff5.png)

これをお好きなエディターを使って以下を参考に`index.html`の`head`内に書き込みましょう。その他のタグについては[こちら](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html)に説明があります。

```html:index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="億ラビットくんのMVPL（Minimam Viable Programming Lessons）" />
    <meta property="twitter:image" content="http://ocrybit.tk/cover.png" />
    <meta property="twitter:description" content="世界二のプログラマー『億ラビットくん』が、ゼロからプログラミングを始めて最速でプロダクトを開発し世界で起業して勝負する方法を超適当に伝授します。" />
  </head>
  <body>
    世界二のプログラマー億ラビットくん
  </body>
</html>
```
注意点としては、`twitter:image`の`content`に指定する画像アドレスは`http`から始まるURLにするということです。`相対パス`では認識されません。`ocrybit.tk`にサイトをデプロイするのでプロジェクトルートフォルダーに保存した`cover.png`のURLは`http://ocrybit.tk/cover.png`になります。また、上述したSSL設定の関係で`https`だとツイッターのクローラーが弾かれるので、ここでは`http`を使いましょう。

必要最低限のマークアップしか記述してませんが駆け出しプログラマー用の究極のMVPを目指しているのでこうなりました。`head`に`title`すら記述していません。`charset`は本文の文字化け防止ですが、ここの記述も省いて文字化けしたら[なぜ文字化けするのか](https://techacademy.jp/magazine/9929)を学ぶとよいかもしれません。基本的にエディターの文字コードと`charset`の文字コードを合わせる必要がありますが、HTML5のデフォルトが`utf-8`なのでエディターの設定を`utf-8`にしたいところです。

`index.html`を変更したら再び`surge`にデプロイ。先ほどと同じコマンドで上書きできます。

```bash
surge ./ ocrybit.tk
```

ツイッターでシェアするときは`http`のリンクをシェアしましょう。`https`だと上述したSSL設定の関係でクローラーが弾かれカードが表示されません。
`http://ocrybit.tk`をツイートに埋め込むとこのようになります。最近流行りの[#駆け出しエンジニアと繋がりたい](https://twitter.com/search?q=%23駆け出しエンジニアと繋がりたい)や[#駆け出しハッカー部](https://twitter.com/search?q=%23駆け出しハッカー部)のハッシュタグを付けて呟くと仲間が増えるかもしれません。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">１０分以内に駆け出しエンジニアとしてツイッターでドヤるMVP<a href="https://t.co/TkLUsw7Ddo">https://t.co/TkLUsw7Ddo</a></p>&mdash; 億ラビットくん (Ocean Rabbit) (@ocrybit) <a href="https://twitter.com/ocrybit/status/1076202454931394560?ref_src=twsrc%5Etfw">2018年12月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

カバー画像を変更したりそれをHTMLに指定し直した場合、[Twitter Card Validator](https://cards-dev.twitter.com/validator)にサイトのURLを入れて`Preview Card`をクリックすると、既にシェア済みのツイートも含め全てのリンクに反映されます。ここでも`surge`に無料で独自ドメインを設定した場合は`https`ではなく`http`から始まるURLを使いましょう。


***

# #駆け出しエンジニアと繋がりたい

今回は`surge`を使いましたが、`now`等を使うと同様のことが`SSL`の問題もクリアして無料で実行可能です。が、少し手数が増え、未経験者にはハードルが上がるので今回はこちらを紹介しました。

わからないことがあったら『[駆け出しハッカー部](https://discord.gg/epGPA58)』で聞いて下さい。手取り足取り腰取り教えてくれる優しいメンバーが揃っています。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">プログラミング初学者にアドバイス<br><br>わからないことを聞く勇気を持つこと✨<br><br>といっても世間は厳しくて聞く前にググってこいとかその質問既出だろとか色々と言われるわけですが、どんな質問にも手とり足取り腰トリ優しく答えてくれるのが『<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%83%8F%E3%83%83%E3%82%AB%E3%83%BC%E9%83%A8?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しハッカー部</a>』。<br><br>自分で調べる力は徐々に養えばOK</p>&mdash; 億ラビットくん (Ocean Rabbit) (@ocrybit) <a href="https://twitter.com/ocrybit/status/1075234349367341057?ref_src=twsrc%5Etfw">2018年12月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ALISハッカー部がよりグローバルで初学者にも優しい活動をするため<br>『駆け出しハッカー部』にリブランディング！<br>プログラミング学習してみたい方からプロダクトを作って海外起業したいなんて方までどなたでも！<br>面白いもの作りましょう！<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しプログラマーと繋がりたい</a><a href="https://t.co/sO2qNkKud9">https://t.co/sO2qNkKud9</a></p>&mdash; 億ラビットくん (Ocean Rabbit) (@ocrybit) <a href="https://twitter.com/ocrybit/status/1074543785512701952?ref_src=twsrc%5Etfw">2018年12月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>