ウェブサイト制作 01¶
目標¶
- Git,Github,VSCodeを使って開発できるようになる
- HTML,CSS,(余裕があればJavaScript)を書けるようになる
資料の読み方¶
基本的には
こちらのウェブサイト
にすべての資料を保存しています。適宜参照してください。
また各資料の中には
このような表示になっている部分があります。
この表示の部分は発展的な内容で勉強会ではあまり触れませんが、興味があれば私に聞くか自分で試してみるなどしてみてください。
今日の内容¶
- 用語の説明
- VSCode,Git,Githubの導入と設定
用語の説明¶
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
- バージョン管理
- Git
- Github
- リポジトリ
- VSCode (Visual Studio Code)
- フロントエンド
- バックエンド
- データベース
- PHP
- TS (TypeScript)
- Gitlab
- Visual Studio
Githubアカウントの作成¶
- リンク1のページの右上にあるSign upを押す
- 画面に従ってメールアドレス、パスワード、ユーザーネーム等の入力をし、Create accountを押す
- 入力したメールアドレスにメールが届くのでVerify email addressボタンをクリックし、認証する
Gitのインストール¶
- リンク2に行き、Standalone Installerの64-bit Git for Windows Setupをクリック
- 全てNextを押してインストールする
- インストール完了後、Windowsキーを押し、Git bashを起動して 名前と
git config --global user.name "名前を入力"
リンク3のページのPrimary email addressの下の文章内にある
数字＋ユーザーネーム@users.noreply.github.comのメールアドレスを登録する
この2つの情報は外部にも公開されるので取り扱いには注意しましょう
git config --global user.email "[email protected]"
VSCodeのインストール¶
- リンク4のWindowsをクリックしてダウンロード
- デフォルトの設定のままインストール
- 再起動
Githubのssh設定¶
PowerShellを起動し、
cd ~
でホームディレクトリに移動
mkdir .ssh
でディレクトリを作成する
cd ./ssh
で .ssh ディレクトリに移動する
ssh-keygen -t rsa
と打った後にEnterを3回押す
すると鍵が生成される
ls
でid_rsaとid_rsa.pubの2つのファイルが作成されたことを確認する
cat id_rsa.pub
でファイルの中身を表示し、コピーする
リンク5
のNew SSH Keyを押し、Titleには好きな名前、Keyに先程コピーしたものを貼り付け、Add SSH Keyを押す
PowerShellで
ssh -T [email protected]
と打ち、メッセージの中にsuccessfullyの表示があったら接続に成功。やったね！
Githubにアップロード¶
エクスプローラーで適当なフォルダを作成後、VSCodeで開きます。
VSCodeでCtrl + @を押すとターミナル(PowerShell)が起動するのでそれを使います。
リンク6
を開くとリポジトリの作成画面になります。
ここで
Repository nameに適当な名前を
PublicかPrivateでリポジトリの公開状態を選択し
緑色のCreate repositoryを押すとリポジトリが作成されます。
作成後の画面に表示されている
…or create a new repository on the command line
echo "# test" >> README.md
から順番にPowerShellに打ち込んでいくとGithubにアップロードされます。
次回の予定¶
- HTML,CSSの入門
- CSSフレームワークの紹介