---
# System prepended metadata

title: M1 Mac 電腦 - 前端開發配置
tags: [工作]

---

M1 Mac 電腦 - 前端開發配置
===
###### tags: `工作`

## 安裝項目
- [x] homebrew
- [x] git
    - [x] 設置 GitHub SSH key
- [x] iterm2
- [x] oh-my-zsh
- [x] VSCode 帳號同步
    - [x] VSCode terminal 快捷鍵建立
- [x] Node 安裝
- [x] Chrome md 網址擴充安裝
    - [x] 使用快捷鍵使用複製網址功能

## Homebrew
> 了解 Homebrew，見：[Introduction to Homebrew: the painless way to install anything on a Mac | Opensource.com](https://opensource.com/article/20/6/homebrew-mac)、[使用 Homebrew 管理 Mac 套件 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10231649)

安裝 Homebrew，其為 Mac 的套件管理，使用 Homebrew 能夠快速的安裝、管理、刪除 Mac 套件。

安裝
```shell=
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

由於是 M1 晶片，需要額外附上以下指令，原因及解法見：[Using Homebrew on M1 Mac - Earthly Blog](https://earthly.dev/blog/homebrew-on-m1/)、[M1芯片Mac上Homebrew安装教程 - 知乎](https://zhuanlan.zhihu.com/p/341831809)
```shell=
 (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/ruru/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
```

## git

```shell=
brew install git
```

### 設置 GitHub SSH Key
> 設置流程文件見：[Generating a new SSH key and adding it to the ssh-agent - GitHub Docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)、[Adding a new SSH key to your GitHub account - GitHub Docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)


下載後若是需要 git clone、push 到 GitHub，在此我們使用 SSH 的方式與 GitHub 通信，為了讓 GitHub 知道這個 clone、pull 的電腦用戶身份，我們需要設置 SSH key。

> SSH - Secure Shell Protocol [Secure Shell - 維基百科，自由的百科全書](https://zh.wikipedia.org/zh-tw/Secure_Shell) 是一種加密的網路傳輸協定，加密的方法為 *非對稱加密*。身份驗證有許多途徑，其中一種是使用人工生成的公私鑰進行認證，這樣就可以在不輸入密碼的情況下登入。公鑰用來加密，私鑰用來解密。
> ![](https://i.imgur.com/HW0MUyA.png)

:::danger
目前 GitHub 的 HTTPS 帳密登入已在 2021 年截止。目前需使用 SSH 的方式與 GitHub 交互。
:::

使用 SSH 與 GitHub 通信，主要需要幾件事：
1. 自行生成 SSH 公私鑰
2. 將 SSH key 私鑰設置到 ssh-agent 中管理
3. 將 SSH 公鑰給予 GitHub
4. 設置完成後即可使用使用 Git 透過 SSH 與 GitHub 通信

---

#### 1. 自行生成 SSH 公私鑰
在 terminal 輸入以下指令
```bash=
ssh-keygen -t ed25519 -C "[我的信箱]"
```

這將依 `[我的信箱]` 作為標籤，創建一個新的 SSH 密鑰（公私鑰）。接著系統將詢問以下三個問題，若是沒有額外需要，皆按下 `Enter` 使用預設值即可。

```bash=
# 輸入一個保存密鑰的文件（/Users/YOU/.ssh/id_ALGORITHM: [Press enter]
 Enter a file in which to save the key (/Users/YOU/.ssh/id_ALGORITHM: [Press enter]
# 輸入密碼，若無則空
Enter passphrase (empty for no passphrase): [Type a passphrase]
# （再次）輸入密碼，若無則空
Enter same passphrase again: [Type passphrase again]
```

#### 2. 將 SSH Key 設置到 ssh-agent 中管理
> ssh-agent 介紹見：[SSH 免除重複輸入金鑰密碼教學：SSH Agent 與 Forwarding - G. T. Wang](https://blog.gtwang.org/linux/using-ssh-agent-forwarding-to-avoid-being-asked-passphrase/)

生成的 SSH Key（按照上述輸入密碼後），每次使用 SSH Key 時皆需要輸入密碼，這時候若是不想要每次都還要多一個輸入密碼的步驟，可以使用 ssh-agent 這個工具來幫忙，ssh-agent 可以讓我們輸入一次密碼後就持續使用 SSH Key。

```bash=
# 啟動 ssh-agent
eval $(ssh-agent)
# （選）如果是 Mac macOS Sierra 10.12.2 以上的用戶，需要先添加 ~/.ssh/config 文件，並且在文件中新增設置
echo "Host github.com
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519" > ~/.ssh/config
# 將金鑰加入 ssh-agent 中
ssh-add --apple-use-keychain ~/.ssh/id_ed25519
```

#### 3. 將 SSH 公鑰給予 GitHub
接著將剛剛生成金鑰中的公鑰給到 GitHub 中

查看剛剛生成的公鑰
```bash=
cat ~/.ssh/id_ed25519.pub
```

接著複製貼上到下列即可
![](https://i.imgur.com/Qt6gCg7.png)

#### 4. 設置完成後即可使用使用 Git 透過 SSH 與 GitHub 通信
接著便可以使用 SSH 與 GitHub 通信

![](https://i.imgur.com/vlGkj2X.png)

另，最後你可能會在 git clone 時遇到以下警告，確認其來源為 GitHub 後點擊 yes 即可，參考資料見：[Error "The authenticity of host 'github.com' can't be established. RSA key fingerprint " - Stack Overflow](https://stackoverflow.com/questions/47707922/error-the-authenticity-of-host-github-com-cant-be-established-rsa-key-finge)。

```sh=
The authenticity of host 'github.com (20.27.177.113)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
```

## iterm2
> cask 幫忙安裝與 GUI 相關的軟體，這裡用來安裝 Iterm2，指令有更改 [iterm2 — Homebrew Formulae](https://formulae.brew.sh/cask/iterm2)

```shell=
brew install --cask iterm2
```

## oh-my-zsh
> 官網 [Oh My Zsh - a delightful & open source framework for Zsh](https://ohmyz.sh/)
> 安裝相關文件 [Apple M1 安裝 Homebrew & zsh 設定 · InstaCoding](https://pqteru.github.io/posts/2021-02-18-macos-m1-terminal/#oh-my-zsh)

安裝後可以更強大的使用 zsh，Mac M1 預設為 zsh。

安裝
```shell=
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

### 設置主題及文字
> 安裝可參考 [如何讓 Terminal 看起來好用又好看｜iTerms 2 + Oh-my-zsh 全攻略 | by 學．誌｜Chris Kang | 不止數據｜Not Only Data | Medium](https://medium.com/%E6%95%B8%E6%93%9A%E4%B8%8D%E6%AD%A2-not-only-data/macos-%E7%9A%84-terminal-%E5%A4%A7%E6%94%B9%E9%80%A0-iterms-oh-my-zsh-%E5%85%A8%E6%94%BB%E7%95%A5-77d5aae87b10)

```shell=
brew tap homebrew/cask-fonts         # 第一次安裝文字時需要執行
brew install font-meslo-for-powerline --cask # 安裝文字
```

## VSCode

去這裡安裝 `https://code.visualstudio.com/`，下載後 sync VSCode 帳戶

若是要在 terminal 中開啟 VSCode，請在 VSCode 中選擇以下功能，他將會在 $path 中安裝 code，接著便可以在 terminal 使用 code 開啟 VSCode。詳細資料見：[How to Open Visual Studio Code From Your Terminal](https://www.freecodecamp.org/news/how-to-open-visual-studio-code-from-your-terminal/)

## Node 

先安裝 nvm
```shell=
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
```

確認 nvm 已安裝
```shell=
nvm -v
```

接著使用 nvm 安裝 Node 最新版本
```shell=
nvm install node
```

設置額外的默認版本，見：[iterm - iterm2 default window size - Stack Overflow](https://stackoverflow.com/questions/10556492/iterm2-default-window-size)
```shell=
nvm alias default [新的默認版本]
```

## Chrome md 網址擴充安裝
安裝以下插件 [Copy Title and Url as Markdown Style - Chrome 線上應用程式商店](https://chrome.google.com/webstore/detail/copy-title-and-url-as-mar/fpmbiocnfbjpajgeaicmnjnnokmkehil)

### 使用快捷鍵使用複製網址功能

見 [[ Google Chrome ]如何使用快速鍵啟用已安裝的擴充功能？](https://key.chtouch.com/cv.aspx?p=3504)