GistのGitレポジトリにソースコードをプッシュする方法
この記事について
この記事では GitHub Gist のGitレポジトリに既存のソースコードをプッシュする方法を紹介します。
Zennで技術ブログを書くためにGitHub Gistを使いはじめたのですが、GitHubのように空のレポジトリを作成してソースコードをプッシュする方法がわかリませんでした。試行錯誤の結果、同様のことを実現する方法を見つけたので同じことで困っている方の参考になれば幸いです。
おおまかな手順
おおまかな手順を下記に示します。
- コーディング
- Gistの作成
- Gitの設定
- ソースコードのプッシュ
コーディング
ターミナルで下記のコマンドを実行してコーディングの準備をします。
mkdir column-github-gist-push
cd column-github-gist-push
npm init -y
npm install --save dotenv
touch .gitignore
touch .env
touch main.js
エディタで.envを開いて下記の内容を入力します。
エディタで.gitignoreを開いて下記の内容を入力します。
エディタでmain.jsを開いて下記の内容を入力します。
コードを実行するには下記のコマンドを実行します。
（この記事ではソースコードをプッシュすることが目的なのでコードの実行は任意です）
node -r dotenv/config main.js
Gistの作成
Gist（GitHub Gistのレポジトリ）を作成するにはWebブラウザで GitHub Gist のページへアクセスします。ログインしていない場合はページ右上に「Sign in」リンクが表示されるのでクリックしてログインします。
GitHubとは異なり、GitHub Gistでは空のレポジトリを作成することができない様子なのでとりあえず.gitignoreの内容をコピー＆ペーストしてGistを作成します。この際、Gist descriptionにコメント（例：Gist Push Example）を入力しておくと後から探すときに便利です。
ページ右下のCreate secret gistボタンの隣にある「▼」ボタンをクリックして表示されるドロップダウンメニューから「Create public gist」を選んでクリックするとCreate secret gistボタンがCreate public gistボタンに変化します。
「Create public gist」ボタンをクリックするとGistが作成され、Gistのページが表示されます。
EditボタンやDeleteボタンの下あたりにある「Embed ▼」ボタンをクリックして表示されるドロップダウンメニューの中から「Clone via SSH」を選んでクリックします。
Clone via SSH ▼ボタンの隣に「git@」から始まるGistへアクセスするための情報が表示されるので隣にあるコピーボタンを利用するなどしてコピーします。
Gitの設定
ターミナルへ戻り、下記のコマンドを実行します。「git@gist.github.com:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.git」の部分は先ほどコピーしたものに置き換えます。
git init
git remote add gist git@gist.github.com:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.git
git fetch gist
git branch main gist/main
git log
git log の実行結果に「HEAD -> main」が含まれていることを確認します。
ソースコードのプッシュ
ターミナルで下記のコマンドを実行します。
git add .
git commit -m "Actual initial commit"
git push gist main
おわりに
プログラミングに関する技術ブログを書く上で外部からソースコードを読み込む機能はほぼ必須と考えており、GitHub Gistの他にもCodePenやJSFiddleからソースコードを読み込む機能を備えているZennは素晴らしいサービスだと思います。
理想を言えばGitHubのGitレポジトリからソースコードを読み込めれば嬉しいのですが、Zennではできないみたいなので仕方ありません...
いや、できるのかよ普通に(笑)
やるじゃん catnose さん！行の指定までできるとか神！
そうなるとGistを使うことは当分無さそうなのでこの記事の存在意義が危ぶまれますが、この記事を書いたことでZennの新機能に気付けて良かったです。
ちなみに別の記事で GitHubのGitレポジトリにソースコードをプッシュする方法 について紹介しているので興味がありましたらご覧いただければ幸いです。
最後まで読んでいただきありがとうございました！
追記
Node.jsで非同期処理を扱う6通りの方法 の記事を書くときに早速GitHubのソースコード埋め込み機能を使ってみましたが、スクロールしないとソースコード全体を見ることができない感じだったので、今後はGistとGitHubをケースバイケースで併用しようと思いました。
Discussion