GitとGitHubでHTMLファイルを管理する

GitとGitHubでHTMLファイルを管理する

ウェブサイト製作の勉強で作成したHTMLファイルやCSSファイル、画像などのフォルダがローカルに溜まってきたのでGitHubで管理することにしました。

コマンドでローカルのファイルをGitHubにアップする手順を覚えておきたくて書いた初歩的な記事にはなりますが、誰かの参考になることがあればと思います。

 

GitとGitHubの準備

 

準備としてGitのインストールとGitHubアカウント登録を行います。

 

Macの場合はインストール不要で初期設定だけします。

 

https://prog-8.com/docs/git-env

 

上記URLのページを参考にGitの初期設定のユーザー名とメールアドレスを設定するの部分までを完了させておきます。

 

Windowsの場合は以下URLからgitfor windowsをインストール

 

https://gitforwindows.org/

 

そして以下のURLのページを参考にユーザー名とメールアドレスを設定するの内容までを終わらせておきます。

 

https://prog-8.com/docs/git-env-win

 

次にGitHubのアカウント登録をします。

 

 

https://github.co.jp/

上記URLからGitHubのトップページを開き「GitHubに登録する」のボタンでアカウント作成ページに進みます。

 

 

ユーザー名、メールアドレス、パスワードを決めてアカウント作成が終わると、登録したメールアドレスに認証コードが届くので、そのコードを入力します。

コード入力後はページが自動で切り替わりプラン選択になるのでFreeプランを選択。

するとGitHubのダッシュボードが表示するのでリモートリポジトリを作成します。

 

GitHubでリモートリポジトリを作成

 

GitHubのダッシュボードに「Create repository」というボタンがあります。

 

 

Create repositoryをクリックしてGitHubでリモートリポジトリを作成します。

 

 

Ownerの部分はGitHubのアカウントを登録したときのユーザー名になっているかと思います。

 

リポジトリ名
Owner右横のスラッシュに続くRepository nameにリポジトリ名を入力です。画像ではtestrepositoryと入力しています。

 

説明文
Descriptionは、作成するリポジトリの説明を入力です。「テストリポジトリを作成しました」の部分ですね。

 

公開/非公開
PublicとPrivateでは、これから作成するリモートリポジトリを公開か非公開どちらかを選択します。

誰でも見られるようにする場合は「Public」にチェックです。

非公開にする場合は「Private」にチェックします。

 

「Create repository」をクリックするとGitHubでリモートリポジトリを作成するのが完了です。

ここで作成したGitHubのリモートリポジトリに、ローカルで管理しているHTMLファイルを移動して管理することになります。

 

Advertisement

 

ローカルフォルダの作成・移動

 

ここからは、ほぼコマンド操作になっていきます。

Git Hubに作成したリモートリポジトリにローカル側のHTMLファイルなどを保管できるようにするためにフォルダを作成して、そのフォルダに移動します。

Macならターミナル、WindowsならGit bashを起動します。vscodeを使用しているならvscodeを起動させてターミナルを使用しても作業が進められます。

Macのターミナルを使用した場合を例にします。以下のコマンドを順番にターミナルに入力していきます。

 

$ cd desktop

cd でデスクトップに移動しています。Windowsの場合はDeskTopで入力しないとダメかもしれません。

 

$ mkdir testrepository

移動したデスクトップにmkdirでtestrepositoryというフォルダを作成しています。

 

$ cd testrepository

cdでtestrepositoryに移動しています。

 

$ touch index-test.html

touchでtestrepository内にindex-test.htmlというファイルを作成しています。

 

デスクトップにtestrepositoryフォルダが作成されていて、testrepository内にindex-test.htmlファイルが格納されていたらローカルフォルダの作成・移動ができていることになりますし、HTMLファイルの作成も成功しています。

既に編集しているHTMLファイルを入れているフォルダがある場合は、ターミナルを起動してcdを入力、半角スペースを空けてから、フォルダをターミナルにドラック アンド ドロップで放り投げてEnterを叩けば移動できます。

vscodeを使用しているなら、ドラック アンド ドロップでフォルダごとVScodeアイコンに放り投げてエディタが起動したら新規ターミナルを起動すれば、フォルダに移動できています。

 

git initでローカルリポジトリ作成

 

次にgit initでローカルリポジトリを作成します。

 

$ git init

git initコマンドは「新規のリポジトリを作成」するときに使用するコマンドです。

 

 

ターミナルでもGit bashでもvscodeのターミナルでも、git initを実行するとcdで移動しておいたフォルダに「.git」という隠しフォルダが作成されます。

 

Macで隠しフォルダの確認方法

command+Shift+.

 

Windowsで隠しフォルダの確認方法

エクスプローラーの「表示」で「隠しファイル」にチェック

 

小難しい説明は抜きにして、この.git隠しフォルダが確認できればgit initでローカルリポジトリ作成は成功しています。

 

HTMLファイルの編集作業

 

Git Hubで管理するhtmlファイルは作成しただけで何も書いていないので、エディタで簡単な文章でも書いて編集した感じにしておきます。

HTMLファイルの編集ができたら編集内容を保存。

 

Advertisement

 

git addでインデックス登録

 

HTMLファイルの編集後はターミナルでgit addコマンドを入力してインデックスに登録します。githubに編集内容を送信する前の仮アップのようなことをしていると私は考えるようにしています。

 

$ git add .

コマンドはgit add .と入力した場合はフォルダ内にあるファイルをまとめて指定できます。

 

HTMLファイルなどを個別にインデックスするときはgit addのあとに半角スペースを空けてからファイル名を指定します。

$ git add index-test.html

 

そして変更内容がインデックスされたかgit statusで確認します。

$ git status

 

git statusの結果は次のように表示されます。

Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: index-test.html

 

 

new fileの行が緑色で表示されるかと思います。

 

 

記録された内容は、vscodeになりますがサイドバーの丸3つが線でつながってるアイコンをクリックして編集したファイル名をクリックすると編集前と編集後の差分が確認できます。

 

 

これでgit addでインデックスへの登録は完了です。

 

ローカルリポジトリにコミット

 

git addでインデックスに編集内容を追加した後は「git commit」でローカルリポジトリにコミットします。

 

$ git commit -m "headとbodyをマークアップ"

gitコマンドはgit commit -mと入力して-mのあとに半角スペースを空けてからダブルクオーテーション内にファイルの編集内容についてのメモを入力します。

このとき入力した文章は、今回編集した内容に対しての説明文としてgithubで表示されることになります。

 

git remote add origin

 

commitのあとはgit remote add originコマンドでリモートリポジトリに追加します。

はじめに作成しておいたGit Hubでのリモートリポジトリのページを開いて画面右のほうにある「Code」をクリックすることでリモートリポジトリのURLを取得できます。

 

 

URLをコピーしてターミナルでgit remote add originのあとに半角スペースを空けてコピーしたURLをペーストします。

$ git remote add origin https://github.com/ユーザー名/testrepository.git

 

そしたらEnterします。

 

git push origin

 

最後にリモートリポジトリにgit pushコマンドでプッシュです。

ローカルで編集したHTMLファイルをGitHubにアップする作業のようなイメージです。

 

$ git push origin master

git push origin masterを入力してEnterを叩けばファイルが送信されて、コピペで指定したGitHubのリモートリポジトリに保管できます。

GitHubにアカウント登録して初めてのpushのときに、GitHubのユーザ名とパスワードを求められるかもしれません。

このときGitHubアカウント登録時に設定したユーザー名とパスワードを入力するようなのですが、私はパスワードだとエラーになりました。

そんなときにはアクセストークンを発行してパスワードの代わりに入力します。

GitHubのアクセストークンの発行については以下のページを参考にさせていただきました。

 

GitHub|アクセストークンの取得方法

 

シンプルな説明なので分かりやすいです。

git push origin後にGit Hubで Repositories を開いて、今回作成したHTMLファイルがアップされていれば成功です。

 

 

HTMLファイルを「Git」と「GitHub」で管理するための基本として、ローカルリポジトリからリモートリポジトリにファイルをアップするところまでを書いてみました。

説明しきれていないgit cloneとかpullとかブランチなどもあるのですが「少し操作慣れしてきたぜ!」ってあたりで脳内情報を追加していっても良いかもしれません。

HTMLカテゴリの最新記事