🐱

GistのGitレポジトリにソースコードをプッシュする方法

2022/04/20に公開

この記事について

この記事では GitHub Gist のGitレポジトリに既存のソースコードをプッシュする方法を紹介します。

Zennで技術ブログを書くためにGitHub Gistを使いはじめたのですが、GitHubのように空のレポジトリを作成してソースコードをプッシュする方法がわかリませんでした。試行錯誤の結果、同様のことを実現する方法を見つけたので同じことで困っている方の参考になれば幸いです。

おおまかな手順

おおまかな手順を下記に示します。

  1. コーディング
  2. Gistの作成
  3. Gitの設定
  4. ソースコードのプッシュ

コーディング

ターミナルで下記のコマンドを実行してコーディングの準備をします。

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 Gistのトップページです。Gist descriptionやfilename including extensionの入力部に加え、Add fileボタンやCreate secret gistボタンを備えています。

GitHubとは異なり、GitHub Gistでは空のレポジトリを作成することができない様子なのでとりあえず.gitignoreの内容をコピー&ペーストしてGistを作成します。この際、Gist descriptionにコメント(例:Gist Push Example)を入力しておくと後から探すときに便利です。

Gistを作成する直前の様子です。Gist descriptionに「Git Push Example」と入力し、filename including extensionsに「.gitignore」と入力し、ファイルの内容を入力するテキストエリアに「/node_modules/」と入力しています。

ページ右下のCreate secret gistボタンの隣にある「▼」ボタンをクリックして表示されるドロップダウンメニューから「Create public gist」を選んでクリックするとCreate secret gistボタンがCreate public gistボタンに変化します。

Create public gistを選んでいる様子です。ドロップダウンメニューにはCreate secret gistとCreate public gistの2つが含まれています。

「Create public gist」ボタンをクリックするとGistが作成され、Gistのページが表示されます。

Gistのページです。EditボタンやDeleteボタンを備えています。

EditボタンやDeleteボタンの下あたりにある「Embed ▼」ボタンをクリックして表示されるドロップダウンメニューの中から「Clone via SSH」を選んでクリックします。

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 log の出力にHEAD -> mainが含まれています。

ソースコードのプッシュ

ターミナルで下記のコマンドを実行します。

git add .
git commit -m "Actual initial commit"
git push gist main

ターミナルのスクリーンショットです。git push gist mainを実行するとmain -> mainなどプッシュされていることを伝えるメッセージが表示されています。

おわりに

プログラミングに関する技術ブログを書く上で外部からソースコードを読み込む機能はほぼ必須と考えており、GitHub Gistの他にもCodePenやJSFiddleからソースコードを読み込む機能を備えているZennは素晴らしいサービスだと思います。

理想を言えばGitHubのGitレポジトリからソースコードを読み込めれば嬉しいのですが、Zennではできないみたいなので仕方ありません...

ZennのMarkdown記法一覧のページです。「2022/04〜より、GitHub上のソースコードファイルを埋め込めるようになりました。」との記載があります。

いや、できるのかよ普通に(笑)
やるじゃん catnose さん!行の指定までできるとか神!
そうなるとGistを使うことは当分無さそうなのでこの記事の存在意義が危ぶまれますが、この記事を書いたことでZennの新機能に気付けて良かったです。

ちなみに別の記事で GitHubのGitレポジトリにソースコードをプッシュする方法 について紹介しているので興味がありましたらご覧いただければ幸いです。
最後まで読んでいただきありがとうございました!

追記

Node.jsで非同期処理を扱う6通りの方法 の記事を書くときに早速GitHubのソースコード埋め込み機能を使ってみましたが、スクロールしないとソースコード全体を見ることができない感じだったので、今後はGistとGitHubをケースバイケースで併用しようと思いました。

GitHubで編集を提案

Discussion