ホームページ作成体験会

Transcript

1. HP作成体験会
 主催 : KCS 着いた方は各自進めてもらって構いません スライドへのリンクはLINEのオープンチャットとdiscordの全体告知に送信 しましたので、PCで開いてください LINEもdiscordもPCに入っていない方は同じところに送信したpdfを見て PCでスライドを開いてください
2. 持ち物 : PC お願い : 進みが早い人は近くの人を手伝ってください 注: 本スライドではMacでの操作も考慮しましたが、スライド作成者がWindows ユーザーのため説明が足りない部分があるかもしれません
3. 行う手順 1日目(ホームページをアレンジする) 1. Node.jsのインストール 2. VSCodeのインストール 3. Next.jsのテンプレート作成してもらう(PCに) 4. ホームページの作成（今日のメイン） 2日目(実際に皆が見れるように公開する) 5. (持ってない人はGoogleアカウントの作成) 6. Gitのインストール 7. GitHubのアカウント作成 8. GitHubでリポジトリを作成し、GitとGitHubを連携する 9. vercelにサインアップする 10. 完成させる(皆が見れるようにする)
4. 1. Node.jsのインストール Node.jsダウンロードページ 自分のOSに合わせて、推奨版のInstallerというものをクリック (MacBookの人はmacOS Installer, それ以外の人はWindows Installerをクリック) これをダウンロードすると、PCでJavaScriptというプログラミング言語が使える ようになる
7. デフォルトでOK
8. このようなものはacceptしましょう
9. 以降もNextを押してください
10. 最後はFinishを押してください
11. このような画面が出たら、「アクセスを許可する」をクリック
12. 2. VSCodeのインストール VSCodeのダウンロードページ 自分のOSに合わせて、推奨版のInstallerというものをクリック (MacBookの人はMac, それ以外の人はWindows) これはプログラムを書きやすくしてくれるアプリ 以降、https://youtu.be/auGKppIIV4Y　から拝借した画像を使用
19. 3. Next.jsのテンプレートを作成してもらう(PCに) 1. (開いていない人は)画面左下の「検索」の欄からVSCodeを開く 2. VSCodeを日本語表示にして、VSCodeを再起動する 3. 左上のターミナルをクリックして、新しくターミナルを開くをクリック 4. npx create-next-app mysite というコマンドを実行 5. オプション問われるので、最初の質問にNoを選択して、他はデフォルトのま まで答えていく 6. 質問が終わるとPCがひな形を作成するので、少し待つ 7. successfully　のような文字が出てきたら, 新しくVSCodeで開く 8. 新しい画面が出るので、青いボタンを押す
21. 2 言語を日本語にする
22. 2 言語を日本語にする
25. こういうのが出たら、yを押してEnter
26. 5,6
28. Windowsの方 7
29. Macの方 7
30. Macの方 画面上部にこのような領域が出てくるので、 shell commandと入力して検索 その後、VSCodeを閉じて、再度VSCodeを開き、ターミナルを開きましょう 7
31. 7 Macの方
33. 4-1. ホームページを作成してみる(テンプレのコピペ) 1. コードの自動保存を設定する 2. コピーするコードが書いてあるページ　にアクセス 3. VSCodeにて、ターミナルを開いて npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 　　　 というのをページからコピーして新しい方のページターミナルにコピペする 4. pagesの中にある_app.jsをクリックして、ページからコピペする 5. stylesの中にあるglobal.cssをクリックして、ページからコピペする 6. pagesの中にあるindex.jsをクリックして、ページからコピペする 7. ターミナルを開いて、npm run devと打ってEnter 8. ブラウザでlocalhost:3000を開く
36. 1. コピーするコードが書いてあるページ　をクリック 2
49. 8 テンプレが表示された
50. 4-2 ホームページを作成する(今日のメイン) 主にindex.jsというファイルを変更します。 1. テキストを変更してみよう 2. 画像を変更してみよう 3. アイコンを変更してみよう 4. 背景色を変更してみよう 5. 自由にいろいろやってみよう こういう風にしたいというのがあれば、手伝える範囲で手伝います
51. 変更したのに反映されないとき 1. 保存されてない　→　Ctrl＋ｓを押すか、autoSaveをオンにする 2. npm run devで起動したものが停止している　 →　ターミナルからnpm run devをやり直す 3. 必要なものを消去してエラーが出ている　 →　), }を消してしまったり、 ””をつけ忘れているなど こういうのを追加したい、変更したい、というのがあれば、相談してもらうか、 googleで調べるなどしてみて ください 文字を追加する方法、 <Text>追加する文字</Text>, <h2>追加する見出し</h2>
55. 1 ↓ の③に対応してます
56. 1 ③の変更は後ほど
57. 1 ③の変更は後ほど
58. 1 ④の変更は後ほど
60. ④の変更は後ほど
62. 2 置き換える画像は、このサイト からとってくることがおすすめ unsplashというサイト
63. 2 画像アドレスをコピーをクリック
66. 3 アイコンの変更
67. 3 アイコンの模様は、pat1, pat2,pat3, pat4を用意してます
70. 4 背景色は、blue,orange,green, redblue, gold, silver, bronzeを用意してます。 カスタマイズ可能です。 global.cssで定義してます
72. 4 色のカスタマイズ global.cssファイルで変更可能
73. HP作成体験会2日目
 主催 : KCS
74. 5. (持っていない人は)Googleアカウントの作成 大学のアカウントではないことをお勧めする グーグルアカウントの作成方法
75. 6-1 Gitのインストール (Macの人はデフォルトでGitが入っているかも) Windowsの人 Gitのダウンロードページ　にてDownloadボタンをクリック
80. 6-2 Gitのセットアップ ダウンロードが終わったら、左下の検索欄から「Git Bash」と検索して開く そこで以下の文字を打つ git config --global user.name “あなたのユーザーネーム” でEnter git config --global user.email “あなたのメールアドレス”　でEnter あなたの◦◦のところには、自分のユーザーネーム おすすめはGmailのメールアドレス git config user.name　でEnter git config user.email　でEnter それぞれEnterを押したら、設定したユーザーネームとメールアドレスが出てきたらOK！ 間違えたら、もう一度やり直せばOK
81. GitBashを開く
83. 7 GitHubのアカウント作成 GitHubのホームページ このページに行き、アカウントを作成する アカウント作成方法が説明されているページ
84. 8-1. リポジトリを作成して、GitとGitHubを連携する 1. アカウントの作成が終わったらGitHubにアクセス 2. 右上の＋ボタンを押して、New reposioryをクリック 3. Repository nameをmysiteに 4. 下にスクロールして、Create repositoryをクリック 5. ページが移り変わるので、そこに書いてある 　　git remote add origin https://… の行をコピーする
88. 8-2 リポジトリを作成して、GitとGitHubを連携する 1. ターミナルを開く 2. ターミナルでmysiteディレクトリでgit initと打ってEnter 3. さっきコピーした　git remote add origin https://… を貼り付けてEnter 4. git add . を打ってEnter　最後のはドットドット 5. git commit -m “初めてのコミット”　を打ってEnter 6. git push origin master を打ってEnter 7. ポップアップといって小さな画面が出てくるので、ブラウザでsign inを押す 8. 色々あって、もう一度git push origin main　を打ってEnter 9. リポジトリのページに移動して、色々変更されているか確認する ここが意味わからないかもしれませんが、おまじないと思って受け入れましょう
94. 9. vercelにサインアップする vercelのサインアップページ Hobby → 好きなニックネーム　→　Continue with GitHub の順に選択してアカウントを作成する
95. 10. 完成(実際に皆が見れるようにする) 1. 右上の Add New ボタンを押して、projectをクリック 2. 下の方に書いてある、Adjust GitHub App Permissionをクリック 3. 自分のアカウントを選択, 4. 少し下の方にスクロールし,Only select repositoriesを選択 5. Select repositoriesをクリックして,mysiteをクリック 6. saveをクリック 7. 画面が戻るのでimportをクリック 8. 画面が変わるので、そのまま下の方にあるDeployボタンをクリック 9. 約1分ほど待つ 10. デプロイが完了するので、右上のgo to dashboardボタンをクリック 11. 画面が変わるので、右上のVisitボタンをクリック 12. 見れるはず！！完成です！！
96. こういうのが出たらinstall
97. すみません、このあたり順番がぐちゃぐちゃかもしれないです