💻

MacでZennを始めるまでにやったこと大体まとめ

2023/01/02に公開

Zenn

tech

はじめに

これが初記事となります。既に半分忘れかけていますが、ZennとかGithubの環境を整える方法や途中で思ったことなどを練習がてら備忘録として残しておきたいと思います。おおまかな流れはこちらの記事を参考にさせていただきました。

1. Zennへ登録する

まず以下のリンクからZennへ登録します。
https://zenn.dev/

ここでやること

Googleアカウントの登録
Zennへの登録

ブログとか人生で初めてで変なメール来るんかなとかアカウント乗っ取られたらどうしようとか色々心配になって師に教えを乞うたところ新しくZennへ登録するためのGoogleアカウントを作成することを勧められたので自分はそうすることにしました。

表示名は後で変更可能ですが、ユーザー名（プロフィールなどのURLに表示される名前）は後から変更不可能みたいだったのでよく考えてから登録した方が良いと思われます。

2. GitHubにSSH接続できるようにする

ローカルからGitHubにSSH接続できるように設定します。自分は既に接続できるようにしていたにも関わらず何故か2個目を作ってしまっており、動きを見る限り最初に登録した方で接続されているみたいなので本当にこの手順で完了するのかという証明はされていないのですが、おおまかな手順は大体合っているはずなので参考程度にはなるかとは思います。違っていたらごめんなさい。

あと自分自身まだ GitHubのことをよく理解しきれておらず、用語とかも大体の理解で進めているのでプロの方から見たらこの用語はそういう表現の仕方はしないとかしっくりこないことも多いかとは存じますが、発見したら多めに見るか優しく指摘してください。

環境

MacBook Pro
macOS Ventura バージョン13.1
チップ Apple M1 Pro
メモリ 16GB

私はMacでやりましたが、大まかな手順はWindowsでも同じだと思われます。

手順1. GitHubで新たにリポジトリを作成しZennと連携する

詳しくは前述したこちらの記事を参考にしていただきたいですが、おおまかには

GitHubに登録していない場合は登録を行う
GitHubで新しくリポジトリを作成する
Zennの「GitHubからのデプロイ」から設定を行う

という手順になります。自分はGitHubのリポジトリの設定は今のところPrivateにしています。

手順2. 既にSSH接続の設定をしていないか確認する

折角接続しているのに同じPCでまた接続したら二度手間ですし、ややこしくなってしまうのでまずご自分が既にGitHubで使いたいPCとのSSH接続の設定をしていないか確認しましょう。新しいパソコンにしたとかいう場合に新しく設定します。

手順3. gitコマンドを使えるようにする

まずターミナルを開きます。
はじめはgitコマンドが全く使えず、gitコマンドを使おうとすると、

$ xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

というようなエラーが出て全く使えなかったので、それを解決するためにxcodeをインストールしました。おそらく、

$ xcode-select --install

でインストールできるはずです。最初インストールには何時間かかるなどと書かれていたのですが、最終的には5分前後で終了しました。これでgitコマンドが使えるようになったはずですので、試しに

$ git --version

でバージョンを確認してみてください。ちなみに自分は、

$ git version 2.37.1 (Apple Git-137.1)

でした。

手順4. GitHubにSSH接続できるようにする

自分はやっとこれでgit cloneができるようになったのかと思ったのですが、ここでgit cloneしようとするとまずパスワードを求められ、パスワードを入力したと思ったらパスワードでの確認は廃止されたので無理ですみたいなエラーが出てしまったため、SSHで接続できるようにします。

MacでSSH接続を行うにあたって、以下の記事を参考にしました。

まず、以下のコマンドで鍵を生成します。

$ ssh-keygen -t ed25519 -N "" -f ~/.ssh/github -C [GitHubに登録した自分のメールアドレス]

ssh-keygen：鍵を生成するコマンドです
-tオプション：作成する鍵の暗号化形式を指定することができます
-Nオプション：パスフレーズを設定します。""とするとパスフレーズは無しになります
-fオプション：鍵を生成するファイルを作成することができます
-Cオプション：コメントを指定します

オプションの説明はこちらの記事を参考にしました。

色々表示されて鍵が生成され終わったら、

$ pbcopy < ~/.ssh/github.pub

で公開鍵をコピーします。（Windowsの場合はpbcopyの代わりにclipコマンドを使用します。）コピーしたらGitHubのSettingsページの左サイドにあるAccess欄の上から5番目にあるSSH and GPG keysをクリックし、New SSH keyからタイトルと先ほどコピーした公開鍵を登録します。

余談

ちなみに、ちょっとめんどくさいですがコマンドを使わずに普通にファイルを見に行ってコピーすることもできます。

$ cd ~/.ssh

で.sshフォルダに移動します。その後、

$ vi [公開鍵の名前.pub]

でテキストが見れるのでこれでコピーできるはずです。戻りたい場合は、:qで戻ることができます。

ちなみに隠しフォルダを表示したい場合は

$ ls -a

で通常のフォルダに加えて隠しフォルダも表示することができます。

さらに、

$ vi ~/.ssh/config

でconfigファイルを編集します。vimの画面に移動したら、aやiを押すことで編集モードになります。configファイルには、

Host github
    Hostname github.com
    IdentityFile ~/.ssh/github/
    User git

と追記します。その後escキーを押し、:wqと入力することで保存して終了することができます。ちなみに、

:w：保存のみ
:q：終了
:q!：強制終了
:wq：保存して終了

となります。その後、

$ ssh -T git@github.com

と入力して

Hi [GitHubユーザー名]! You've successfully authenticated, but GitHub does not provide shell access.

と表示されればSSH接続の設定は完了となります。ちなみに、

ssh -T github.com

ではエラーが出てしまいましたので、どういうわけなのかはよくわからないのですがgit@github.comとしないといけないみたいです。

ちょっと脱線

Finderで .ssh を表示させる方法

また、Finderからでも.sshフォルダを表示させることができます。WindowsならわかりやすくCドライブ直下かユーザーのディレクトリなどまでエクスプローラの左サイドのバーから普通にたどり着けるのですが、Macの場合どうやってFinderからホームディレクトリまでいくのか結構ややこしかったのでついでにまとめておきます。

まず適当なフォルダに行く
次にそこでoptionボタンを少し長押しする
Finderの下にパスが表示される
ユーザーフォルダの下にある自分用のフォルダをクリックする
command + shift + . で隠しフォルダを表示する
.sshフォルダをクリックする

以上の手順でFinderから.sshフォルダに移動することができます。ここまできたら普通にここからメモ帳的なエディタで公開鍵や秘密鍵、configファイルなどを開くことができます。

手順5. やっとgit cloneする

これでやっとgit cloneができるようになったはずですのでやっていきます。まず、ローカルでリポジトリを置いておきたいフォルダまでcdコマンドで移動します。

この際、それ用の新しいフォルダなどは作らなくて良いです。git cloneする際にフォルダは自動的に作成されるため、新しく作ったフォルダの中でgit cloneしてしまうとフォルダinフォルダになってしまって非常に煩わしいです。

また、私はリポジトリと同じ名前で事前にフォルダを作ってしまったため今自分がどの階層にいるのか分からず、ローカルリポジトリの方にいると勘違いして実は一つ浅い階層にいて『なんでgit pullやgit remoteができないんだ...』と非常に無駄な時間を過ごしていました。この際に出ていたエラー文は以下の通りです。

fatal: not a git repository (or any of the parent directories): .git

リポジトリのある階層のフォルダにいないんだからそりゃないわってなりました。

続いて、ローカルリポジトリを置きたい階層まで来たら、git cloneで持ってきます。git cloneの後のパスは、自身のGitHubのリポジトリページにある緑色のCodeボタンを押すと出てくるウィンドウのSSHタブに切り替え、そこに表示されているものをコピーして貼り付けると良いです。結果的に以下のように入力することになると思います。

git clone git@github.com:[ユーザー名]/[リポジトリ名].git

私的 git clone 小話

この時の自分はまだgit cloneのことがなんなのか全くわかっていなかったのですが、試しにもう一回git cloneしてみたところできないとエラーに言われたので、あぁこれって一回しか出来ないんだなっていうことを理解しました。git pullとかgit pushとか色々聞いたことがありましたが、一度だけgit cloneしてローカルに持ってきたらそのあとはpullだのpushだのmergeだのをやることで編集していくのかとちょっぴり点と点が線で繋がった気分でした。

無事にgit clone出来たら、Node.jsをインストールします。バージョンが2つ表示されていたのですが、多くの人におすすめだと書いてあったので自分は18.12.1 LTSと書いてある方をインストールしました。

あとは特に困ったことは起きずにスムーズにいけたはずなので、前述のこちらの記事の「Zenn CLIをインストールする」以降を参考にしてください。

強いていうなら先ほど紹介した記事でも言及されていますが、.mdファイルの文字数が12文字以上でないといけなくて、以下のエラーが出たことです。記事のタイトルをつける場合に参考にしてください。

$ error: slugの値（zenn1）が不正です。小文字の半角英数字（a-z0-9）、ハイフン（-）、アンダースコア（_）の12〜50字の組み合わせにしてください

おわりに

やりながら書いたのではなく記憶を辿りながら書いたのであんまり自信はないのですが、大体はこんな感じなはずです。私のつまづいたところなどが少しでも参考になれば幸いです。

人生初ブログの感想

今回人生で初めてブログを書きましたが、Zennだけなのか分からないですが変更が保存するだけですぐ反映されるのがめちゃくちゃ面白かったです。あと、書いているうちにあれもこれもと書きたいことが増えて脱線していくので一本書ききるのにめちゃくちゃエネルギーを消費しました。この記事も普通に（Zennの登録からですが）5時間ぐらいかかりました。

しかし、自分のやった手順を振り返りながらアウトプットすることで記憶にもよく残ったような気がしますし、大体備忘録として記事が残るのでめちゃくちゃいいなと思いました。また、うろ覚えの箇所とかが結構あったので、これほんとに世に出して良い情報なのかなと考えたり調べたりしながら書くことでうろ覚えの状態より正確な情報を再度インプットできました。インプットした知識を理解を深めながら定着させるには記事を書いたらいいという先生の教えは本当だったんだなとちょっと実感しました。

また、Zennはマークダウン形式で書くとのことですが、マークダウンのお勉強にもなって良かったですし、簡単に見出しとか箇条書きとかが作れてめっちゃ楽しかったです。元々Zenn自体は友人に勧めてもらっていたのですが、おすすめされる理由が少しわかった気がします。楽しかったので友人には感謝しています。

記事一本あたりのエネルギーの消費量が多いのと自分自身飽き性なので続けられるのかはわかりませんが、また今度2本目も書けたらいいなと思っています。

ここまで読んでくださり、ありがとうございました。