iT邦幫忙

2022 iThome 鐵人賽

DAY 16
1
Modern Web

前端蛇行撞牆記系列 第 16

Day16 前端蛇行撞牆記 - 替github, gitlab設定不同SSH key

  • 分享至 

  • xImage
  •  

前言

這陣子在做JS30,做完作品就很想推網頁上去github,於是就拿了一開始創建的SSH key拿去新增,沒想到github說已經在使用不給我新增!
原先的在之前就新增給gitlab使用了,原來不能共用啊,原來我可以新增好幾個SSH key!
在看了很多大大的文章之後,決定自己寫一個筆記來記錄實際去解決的過程,如果以後又忘記可以再看一下XD

第一次SSH創建

在預設 .ssh 資料夾路徑裡面輸入命令

% ssh-keygen

接著會問這些問題,可以直接按兩個enter

Generating public/private rsa key pair.

Enter file in which to save the key (/Users/chenziyu/.ssh/id_rsa): //這裡可以改名字
Enter passphrase (empty for no passphrase): //(enter)
Enter same passphrase again: //(enter)

Your identification has been saved in /Users/chenziyu/.ssh/id_rsa
Your public key has been saved in /Users/chenziyu/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:3Om1nobFhZyM4RJkSK3wYVmY792TdF+55dbuxpGNWys 
The key's randomart image is:
+---[RSA 3072]----+
|     ..O+        |
|    . B.o .      |
|     + + o = o  .|
|      o.o.o.* o.o|
|       .Soo+.+ +B|
|        ....*..+B|
|          .o.. *o|
|          ...E..+|
|           .o .o.|
+----[SHA256]-----+   

然後就創建完成了。是不是很簡單?!
但其實我覺得難的地方是不知道要去哪裡找他

SSH key在哪?

預設都是存在自己的資料夾裡面的 .ssh 裡面,不知道自己資料夾是哪一個的打開terminal然後打下 ls 就知道了

/Users/你自己的主要資料夾/.ssh

打開之後裡面會有兩個檔案,一個是公鑰、一個是私鑰,網站新增的都是給公鑰。
在.ssh 裡面可以看到 id_rsa、id_rsa.pub就是剛剛新增的SSH

% cd .ssh
% ls
% id_rsa id_rsa.pub	known_hosts	 known_hosts.old

.ssh 資料夾裡面使用指令:

% cat id_rsa.pub

SSH key就會出現在你們terminal上了,要從 ssh-rsa 直接複製到最後面喔。

如果還是不會...
建議用直接open 打開 .ssh,然後圖形化介面右鍵用文字編輯打開 id_rsa.pub( 這句是寫給我自己看的,每次都打不開


創建給github的SSH key

輸入的方式有點不一樣,後面輸入自己的e-mail

% ssh-keygen -t rsa -C "your@gmail.com"

-t:指定金鑰的加密演算法,預設使用 SSH2d 的 rsa。
-C:提供一個新標籤。

到這步的時候輸入新自訂的名稱(很重要),
不然會覆蓋掉原本的id_rsa

Enter file in which to save the key (/Users/chenziyu/.ssh/id_rsa): id_rsa_github //建議的名稱  

再來enter一次之後就會完成

Enter passphrase (empty for no passphrase):  //enter
Enter same passphrase again: 
Your identification has been saved in id_rsa_github
Your public key has been saved in id_rsa_github.pub
The key fingerprint is:
SHA256:43K1jWPQ3r+2n0yLTDXscG0pFLy07pnh7iAcPNQ02Q0 y3m45566@gmail.com
The key's randomart image is:
+---[RSA 3072]----+
|           o+Eo  |
|          o..+.. |
|         . ...o  |
|        o.  .o. o|
|        S+o .o *o|
|       ..=o= o*..|
|      . oo*.=.+o |
|       o ...+*= o|
|            o*+B.|
+----[SHA256]-----+

回去看一下自己的 .ssh 資料夾會看到新建立的SSH key: id_rsa_github , id_rsa_github.pub

現在擁有兩個SSH key了,接下來我們要來管控這兩個key各別要連接的位置。

建立 SSH config 檔

一樣在 .SSH 路徑輸入以下:

% vi config

接下來會進去令人聞風喪膽的 vi 介面,不過不要怕我會帶著你們走完。

一進去會是完全空白的地方,按下i 進入instert模式
把以下內容貼進去,要記得修改!

% vi config

Host gitlab.com // 要輸入連結的網站(重要!)
        HostName gitlab.com // 要輸入連結的網站(重要!)
        User XXX(my name)
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/id_rsa //SSH key的位置

Host github.com// 要輸入連結的網站(重要!)
        HostName github.com // 要輸入連結的網站(重要!)
        User XXX(my name)
        PreferredAuthentications publickey
        IdentityFile ~/.ssh/id_rsa_github //SSH key的位置

結束之後按 esc:wq (存檔)就可以離開了。

現在SSH config檔已經設置完成。

把SSH key 加入控管

一樣在 .ssh 資料夾裡面輸入指令

% ssh-add id_rsa_github 

會出現加入的訊息

Identity added: id_rsa_github (y3m45566@gmail.com)

將SSH key連線

輸入指令

% ssh -T git@github.com

接下來會確認你是否要連線這個遠端,就打下yes

如果回傳以下訊息表示你成功了

Hi Jadddxx! You've successfully authenticated, but GitHub does not provide shell access.

回到github

最後我們來試試看 clone 新的repo下來到新的資料夾使用。

clone 要選擇使用 SSH

在要放置的資料夾先初始化git:

% git init

再輸入這段指令:

% git clone git@github.com:Jadddxx/clock.git

順利clone空的資料夾下來了,之後就要在這個資料夾新增檔案才能連結github。

然後再add, commit, push,回去看github就可以看到目前的資料順利被推上去了喔!

自己遇到的問題

回到github之後,明明才設定好,可是我的commiter居然是電腦本地端設定的名字

是一個超詭異的情形,下面Jadddxx才是我帳號的名字啊,怎麼突然多個分身

但我照著上面的提示,重新修改名稱跟mail

% git config --global user.name "Your Name"
% git config --global user.email you@example.com

再提交

% git commit --amend --reset-author

再commit, push 上去之後就正常了~

總結

要多多管理自己的SSH,像我上次用SSH已經是三個月前的事情啊,
但我相信再三個月後應該還是又會忘記 哈哈哈哈
所以寫起來就不用自己再查詢了!

如果還是覺得看不太懂,可以看參考資料的大大們的文章,都寫得非常之好!

有問題留言跟我說!

明天見嚕~


參考資料:[Git] 多個SSH Key與帳號的設定(Mac)
使用 SSH 金鑰與 GitHub 連線
Managing SSH keys for Github and Gitlab
在gitlab或github下使用同一個主機多個帳號用不同ssh key
ssh 指令整理


上一篇
Day15 前端蛇行撞牆記 - class v.s constructor
下一篇
Day17 前端蛇行撞牆記 - 在github上架設個人網站
系列文
前端蛇行撞牆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Vic
iT邦新手 3 級 ‧ 2022-10-01 17:22:55

久了真的會忘/images/emoticon/emoticon06.gif

0
Rex
iT邦新手 3 級 ‧ 2022-11-02 15:58:57

有用有推

我要留言

立即登入留言