Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Netlifyで、ポートフォリオをつくってみた

 Netlifyで、ポートフォリオをつくってみた

Netlifyの紹介をします。便利なので、みんなも使ってね

Endo_Hizumi

March 27, 2019
Tweet

More Decks by Endo_Hizumi

Other Decks in Technology

Transcript

  1. Netlifyで、ポートフォリオをつ
    くってみた
    2019

    3

    27


    136

    PHP
    勉強会@東京
    遠藤ヒズミ

    View full-size slide

  2. Netlifyって、知ってます?

    View full-size slide

  3. Netlifyは、
    静的コンテンツの
    ホスティングサービスです。

    View full-size slide

  4. 便利だから、みんなも使おう!

    View full-size slide

  5. GitHubレポジトリと連携すると
    Pushするだけでコンテンツを更新
    してくれます。

    View full-size slide

  6. 他にも、Formの送信先に指定できたり、
    ReactやVueをビルドしてデプロイなど
    サーバーレスに運用ができます

    View full-size slide

  7. サクッとホームページを作るのに
    最適なので、ポートフォリオ作ってみまし
    た!

    View full-size slide

  8. http://hizumi.dev

    View full-size slide

  9. 独自ドメインの設定とDNSのホスティングもしてくれます
    (なので、話題の.devドメインを取りましたw)

    View full-size slide

  10. Add or Register domainから、追加ができます。

    View full-size slide

  11. やり方はとても簡単!

    View full-size slide

  12. デプロイまでの4ステップ!
    1. New Site from Git
    をクリック
    2.
    サービスを選択(
    GitHub / GitLab / Bitbucket

    3.
    リポジトリ選択
    4. PublishDirectory
    に、
    `index.html`
    のディレクトリを
    指定して
    Deploy site

    View full-size slide

  13. デプロイまでの4ステップ!
    1. New Site from Git
    をクリック
    2.
    サービスを選択(
    GitHub / GitLab / Bitbucket

    3.
    リポジトリ選択
    4. PublishDirectory
    に、
    `index.html`
    のディレクトリを
    指定して
    Deploy site

    View full-size slide

  14. デプロイまでの4ステップ!
    1. New Site from Git
    をクリック
    2.
    サービスを選択(
    GitHub / GitLab / Bitbucket

    3.
    リポジトリ選択
    4. PublishDirectory
    に、
    `index.html`
    のディレクトリを
    指定して
    Deploy site

    View full-size slide

  15. デプロイまでの4ステップ!
    1. New Site from Git
    をクリック
    2.
    サービスを選択(
    GitHub / GitLab / Bitbucket

    3.
    リポジトリ選択
    4. PublishDirectory
    に、
    `index.html`
    のディレクトリを
    指定して
    Deploy site

    View full-size slide

  16. デプロイまでの4ステップ!
    1. New Site from Git
    をクリック
    2.
    サービスを選択(
    GitHub / GitLab / Bitbucket

    3.
    リポジトリ選択
    4. PublishDirectory
    に、
    `index.html`
    のディレクトリを
    指定して
    Deploy site

    View full-size slide

  17. New site from Gitをクリック

    View full-size slide

  18. レポジトリのあるサービスを選択する(僕はGitHub)

    View full-size slide

  19. 公開したいレポジトリを選ぶ。

    View full-size slide

  20. Publish Directoryにindex.htmlがあるディレクトリを指定して、Deploy siteをクリッ
    ク!

    View full-size slide

  21. これで、完了!
    デプロイ完了まで少し時間かかるからゆっくり待ってね!

    View full-size slide

  22. 更新は、レポジトリをPushするだけ!
    $ git push origin master (カチャカチャターン!!

    View full-size slide

  23. 手軽に使えて便利だから
    みんなもNetlifyを使おうぜ!

    View full-size slide