第２回構築した個人ブログを公開しよう.pdf

スライド内のVercel紹介動画はこちらからご覧いただけます
https://www.youtube.com/watch?v=3m1FcGW6V4g

Transcript

1. 第２回構築した個人ブログを公開しよう
2. 00　 私について • 木戸亮輔 • 所属 ◦ 福岡デザイン &テクノロジー専門学校 B2 ◦ StepByCode 技術メンター ◦ Tech.C Venture 代表 ◦ 学生団体STECH 運営 ◦ 一般社団法人 TSUNAGU TechLinkLab 開発責任者 • 趣味 ◦ 開発 • 特技 ◦ 開発
3. 00　 私について 最近嬉しかったこと
4. 00　 私について
5. 01　 本日のアジェンダ • そもそもgitってなんでしょう？ ◦ 分散型管理システムについて知ろう ◦ Githubを使ってみよう • 自分のHPを公開してみよう ◦ ホスティングサービスとは ◦ 世の中のサイトが公開されている仕組みについて知ろう ◦ 色んなホスティングサービスがあるんですよ ◦ Vercelを使ってみよう • まとめ
6. 02　 そもそもgitってなんでしょう？ 振り返りも兼ねて
7. 02　 そもそもgitってなんでしょう？ • 過去の状態に戻せる • 「いつ・誰が・何を」変えたか分かる • 同時並行で作業ができる • チーム開発の衝突を防ぐ • オフラインでも作業可能
8. 03　 分散型管理システムについて知ろう 「自分専用の『履歴付きコピー』を全員が持てる仕組み」
9. 03　 分散型管理システムについて知ろう 特徴 説明 完全なコピー 各開発者がリポジトリの全履歴を持つ オフライン作業 ネットワーク不要でコミット・ブランチ操作が可能 高速操作 ほとんどの操作がローカルで完結 耐障害性 サーバーが落ちても各自のコピーから復旧可能
10. 03　 分散型管理システムについて知ろう
11. 03　 分散型管理システムについて知ろう
12. 03　 分散型管理システムについて知ろう
13. 03　 分散型管理システムについて知ろう
14. 04　 Githubを使ってみよう そもそもGithubってなんですか？
15. 04　 Githubを使ってみよう 各自の状態に応じて操作が変わるので 確認しながら作業しましょう！
16. 04　 Githubを使ってみよう
17. 04　 Githubを使ってみよう コマンド 説明 git init 新規リポジトリを作成 git clone <URL> リモートリポジトリをコピー git remote add origin <URL> リモートリポジトリを紐付け
18. 04　 Githubを使ってみよう コマンド 説明 git status 変更状態を確認 git add <ファイル> ステージングに追加 git add . 全変更をステージング git commit -m " メッセージ" 変更を記録 git push origin < ブランチ> リモートに反映 git pull origin < ブランチ> リモートの変更を取得・統合 基本操作（日常的に使うコマンド）
19. 04　 Githubを使ってみよう コマンド 説明 git branch ブランチ一覧を表示 git branch <名前> 新しいブランチを作成 git checkout < ブランチ> ブランチを切り替え git checkout -b < 名前> 作成と切り替えを同時に git merge <ブランチ> 現在のブランチに統合 git branch -d < 名前> ブランチを削除 ブランチ操作
20. 04　 Githubを使ってみよう コマンド 説明 git log コミット履歴を表示 git log --oneline 1行で簡潔に表示 git diff 変更差分を表示 git diff --staged ステージ済みの差分を表示 コマンド 説明 git restore <ファイル> 作業ディレクトリの変更を取り消し git restore --staged < ファイル> ステージングを取り消し git commit --amend 直前のコミットを修正 git reset --soft HEAD~1 直前のコミットを取消（変更は残る） 履歴・差分の確認 取り消し・修正
21. ☕
22. 05　 自分のHPを公開してみよう おかえりなさい
24. 06　 ホスティングサービスとは Webホスティングサービス Webアプリやサイトをインターネットに公開（デプロイ）するためのサービス。 GitHubリポジトリと連携して、pushするだけで自動的にデプロイできる。
25. 06　 ホスティングサービスとは Vercelのデプロイフロー例
26. 07　 世の中のサイトが公開されている仕組みについて知ろう 世の中のサイトが公開されている仕組み ブラウザに URL を入力してからページが表示されるまで、裏側では何が起きているのか？
27. 07　 世の中のサイトが公開されている仕組みについて知ろう 登場人物を理解する
28. 07　 世の中のサイトが公開されている仕組みについて知ろう
29. 08　 色んなホスティングサービスがあるんですよ
30. 09　 Vercelを使ってみよう https://vercel.com/ 画面を見ながらハンズオン
31. 10　 まとめ • gitとgithub,gitlabなどgitについて理解が深まった • Webサイトがどのようにして公開されているか理解できた • githubと連携して Vercelへのデプロイを成功させることができた • 自分で応用して HPやWebアプリなどを作成して公開できそう
32. 11　 contribute 本スライドは Claude Codeと共同で作成しました 🤝
33. おしまい