エンジニア微経験ながら、作成したポートフォリオを公開したい
そう思っている方に向けて、自分が試行錯誤しながら
Bitbucketを使ってソースコードや更新状況を公開できた方法をメモとして残します。
自分のPC上（ローカル環境）でHTMLやCSSを使ってWEBサイトを作ってはみたものの
これをどうやって公開したら良いのか・・
ドメイン取得したりサーバーを構築したりするまで費用はかけられない・・
そんな思いの中で、
Bitbucketで公開する方法がなかなかサイト上に出てなかったので一旦まとめました。
事前準備
・Bitbucket のアカウントは登録しておきましょう
・Git のインストールも済ませておきましょう
・ターミナル（MAC）を準備しておきましょう
さっそく始めよう
１）Gitがインストールされているか確認
ターミナルで以下を入力
git --version
インストールできていたら、上記画像のようにバージョンが表示されます。
表示がされない方は、公式サイトからインストールをしましょう
２）Git の設定
Gitがインストールされたら、以下のコマンドでユーザー情報を設定します。
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
※「Your Name」は、コミット時に表示される自分の名前を入れましょう。
※「your.email@example.com」は、ご自身のメールアドレスを入れましょう。
もし万が一登録内容を間違えた場合は、以下を実施ください。
ユーザー名の変更
1. グローバルなユーザー名を変更する
Gitの設定は、全リポジトリに対して一貫したユーザー名を使用するように設定できます。
これをグローバル設定と言います。
グローバル設定を変更するには、以下のコマンドを使用します
git config --global user.name "新しいユーザー名"
これで、すべてのリポジトリで新しいユーザー名が使われるようになります。
2. 特定のリポジトリでのみユーザー名を変更する
もし、特定のリポジトリだけでユーザー名を変更したい場合は、グローバル設定を変更せず、そのリポジトリ内だけで設定を変更できます。
リポジトリのディレクトリ内で以下のコマンドを実行します：
git config user.name "新しいユーザー名"
この設定はそのリポジトリにのみ適用され、他のリポジトリには影響しません。
メールアドレスを変更する場合
ユーザー名と一緒にメールアドレスも変更する場合は、以下のコマンドを使用します。
グローバル設定
git config --global user.email "new-email@example.com"
特定のリポジトリ設定
git config user.email "new-email@example.com"
変更を確認する
設定が反映されたか確認するには、以下のコマンドを使って設定を確認できます
git config --global --list # グローバル設定を確認
git config --list # 現在のリポジトリの設定を確認
３）Bitbucketリポジトリを作成
Bitbucketの公式サイトにログインします。
新しいリポジトリを作成します。
・リポジトリ名を設定（誰がみても何のリポジトリかわかる名前が良いでしょう）
・公開前提に作られる方は、アクセスレベルの非公開リポジトリのチェックは外しましょう
４）ローカルフォルダをGitリポジトリに変換
まずは、ローカルフォルダを、Gitリポジトリとして初期化します。
通常のフローであれば、ターミナルを開き、ローカルフォルダへ移動。
cd /path/to/your/folder
ただし、私の場合は、
MACの「書類」フォルダ内に「portfolio」のフォルダを作成していたため
ローカルフォルダへの移動パスは、次のようになります。
cd ~/Documents
cd portfolio
そして、Gitリポジトリを初期化します。
git init
その後、「２）Bitbucketリポジトリを作成」で
あなたが実際に作成した、Bitbucketリポジトリをリモートとして追加します。
git remote add origin https://あなたのユーザー名@bitbucket.org/あなたのユーザー名/〇〇.git
※対象のリポジトリ作成時に表示されたURLを使用
５）ファイルを追加してコミット
全ファイルをステージング
git add .
コミット作業
git commit -m "Initial commit"
※この「Initial commit」はコミット時の登録メモとなります。
そのため、「初回コミット」とか「〇〇の変更」など、その時のコミット内容に合わせて記述を変えたほうが
後からコミットの履歴を見返しやすいです。
６）ファイルをBitbucketにプッシュ
ローカルの変更をリモートリポジトリに送信する。
git push -u origin main
もしくは
git push -u origin master
※ main はデフォルトブランチ名となります。
そのため基本的には、mainの方で良いと思いますが、異なる場合は適切なブランチ名を指定してください。
※エラー１
error: remote origin already existsというエラーは、
既にリモートリポジトリ（origin）が設定されていることを意味します。
これを解決するためには、いくつかの方法があります。
方法1: 既存のリモートURLを確認し、変更する
現在のリモートリポジトリを確認するには、以下のコマンドを使います
git remote -v
これで、現在設定されているリモートリポジトリのURLが表示されます。
もし、originのURLが間違っていたり、変更したい場合は、リモートURLを変更できます。
git remote set-url origin https://あなたのユーザー名@bitbucket.org/あなたのユーザー名/〇〇.git
その後、再度プッシュを試みてください。
git push -u origin master
方法2: リモートを削除して再設定する
もし、originを完全に削除して再設定したい場合は、以下のコマンドでリモートリポジトリを削除できます：
git remote remove origin
その後、再度リモートリポジトリを追加します。
git remote add origin https://あなたのユーザー名@bitbucket.org/あなたのユーザー名/〇〇.git
再度プッシュを実行してみてください。
git push -u origin master
※エラー２
fatal: Authentication failed for'https://bitbucket.org/あなたのユーザー名/Portfolio.git/' という
エラーが表示される場合、Bitbucketへの認証が正しく行われていないことを意味します。
この問題を解決するため、以下の手順を試してください。
1. Appパスワードを確認
Bitbucketは通常のアカウントパスワードではなく、Appパスワードを必要とします。
Appパスワードをまだ作成していない場合は、以下の手順で作成してください。
1-1. Appパスワードの作成手順
Bitbucketにログインして、Appパスワード設定ページ を開きます。
「アプリ パスワードの作成」をクリック。
パスワードの名前（例: Git CLI）を入力。
以下の権限をチェックします：
Repository → Read、Write
(リポジトリ → 読み取り、書き込み)
「作成」をクリックしてAppパスワードを生成する。
また、生成されたAppパスワードをコピー（忘れずに保存！）する。
2. Appパスワードを使用して認証
パスワード入力時
プッシュ時にプロンプトが表示されたら、Appパスワードをパスワードとして入力してください。
Username for 'https://bitbucket.org': あなたのユーザ名が入ります
Password for 'https://あなたのユーザー名@bitbucket.org': 先ほどコピーしたAppパスワード
3. 認証情報を保存する
毎回パスワードを入力しないように、Gitに認証情報を保存します。
認証情報キャッシュの有効化
git config --global credential.helper cache
これで一定期間、認証情報がキャッシュされます。
認証情報を永続的に保存
以下を実行して、認証情報を永続的に保存します。
git config --global credential.helper store
※エラー３
なかなかプッシュができない場合は・・・
ローカルリポジトリとリモートリポジトリの main ブランチが異なっている場合は、git push が拒否されてしまいます。
エラーメッセージで、ローカルの main ブランチがリモートの main ブランチよりも遅れている（古い）ような場合は、以下の手順を試してください。
1. リモートの変更をローカルに取り込む
リモートとローカルの変更を統合するために、リモートの main ブランチをローカルに取り込む必要があります。以下のコマンドを使用して、リモートの変更を取り込みます。
git pull origin main --rebase
これにより、リモートの main ブランチの変更がローカルに適用されます。
もし --rebase オプションを使いたくない場合は、代わりに --no-rebase を使ってマージを選択することもできます。
git pull origin main --no-rebase
もしコンフリクト（衝突）が発生した場合、手動で解決し、変更をコミットしてください。
2. 変更をリモートにプッシュする
ローカルの変更がリモートにマージされたら、再度プッシュを試みます。
git push origin main
これで、ローカルの変更がリモートリポジトリにプッシュされるはずです。
もしこれでうまくいかない場合、
リモートリポジトリを強制的に上書きすることもできますが、注意が必要です。
強制プッシュを行うと、リモートリポジトリの履歴が上書きされるため、
他のコラボレーターの作業に影響を与える可能性があります。
強制プッシュは以下のコマンドで行えます。
git push origin main --force
この操作は慎重に行ってください。
７）その後の対応
今後もローカルで変更を加えた際は、以下の手順で再度Bitbucketに反映させることができます
１）ローカルでファイルを変更します。
２）以下の作業を実行
変更をGitでステージング
git add .
コミット
git commit -m "message"
変更をBitbucketにプッシュします。
git push
１）と ２） を繰り返しましょう。
※この「message」はコミット時の登録メモとなります。
そのため、「〇〇の変更」など、その時のコミット内容に合わせて記述を変えましょう。
ポートフォリを公開できたからと言って満足はせずに、今回作成したポートフォリオを常に更新しつつ、自己のレベルアップへ繋げていきましょう。
誰かの参考になれば嬉しいです。