【1から解説！】Shopify CLIとGitHubを連携し、shopifyテーマ開発の手順を解説
こんにちは。PeiWebです。
本日は、Shopifyのテーマ開発する際の基本的な流れを解説していきます。
テーマ開発方法
まず、テーマ開発の手順は以下の２通りあります。
1.Shopify CLIを使う方法
2.GitHubと連携して使う方法
準備するもの
テーマ開発には以下のものが必要となります。こちらの方法は準備編にて解説していきます。
「すでに、準備万端だぜ！」という方は、準備編をすっ飛ばしてください。
・Shopify CLIのインストール
・GitHubのアカウント
・Shopifyテーマフォルダ(ローカル環境)
【準備編】Shopify CLIのインストール
Shopify CLIをインストールするには、以下の2点が必要です。
1.Ruby2.7以上がインストールされていること
2.Homebrewがインストールされていること（Mac OSの場合)
まだの方は、下記のブログ等に記載されているので参考にインストールしてください。
準備が終わりましたら、以下のコマンドを入力してインストールしてください。
・gemでインストール(Windowsの場合)
gem install shopify-cli
・Homebrewでインストール（MacOSの場合）
brew tap shopify/shopify
brew install shopify-cli
【準備編】GitHubのアカウント
最初にGitHubに登録していきます。
下記のリンクからログイン画面を開きます。
GitHubのログイン画面
URLを開くと、上記のログイン画面が表示されます。赤枠の箇所からアカウントを生成してください。
下記の画面に遷移するかと思いますので、メールアドレス、パスワード、ユーザー名を入力して、Continueをクリックします。
アカウント登録画面
あとは、流れに沿って選択すれば登録できるかと思います。もしわからなければご連絡ください。
【準備編】Shopifyテーマフォルダ(ローカル環境)
ローカル環境にテーマを導入していきます。
以下のコマンドでテーマを導入でき、実行後テーマ名を入力します。
shopify theme init
> テーマ名を入力
以下のように作成されていたら成功です。
ここまで、準備できましたら、本題に移っていきます。
手順1.GitHubからリモートリポジトリを作成
1.1 リポジトリ生成画面の表示
下記の画面のように、赤枠の「new repository」を選択してください。
1.2 リポジトリの生成
下記の画面のように、リポジトリの名前、Private設定を行い、リポジトリを生成してください。
手順2.ローカルリポジトリとリモートリポジトリを連携
次に、自分のローカル上で管理しているShopifyファイルからローカルリポジトリを生成し、リモートリポジトリを紐づけ、リモートリポジトリに反映させます。
以下のコードをShopifyのテーマを管理しているディレクトリで順番に打ち込んでください。
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/GitHubのユーザー名/リポジトリの名前.git
git push -u origin main
何をしているのか詳しくみていきます。
git init
Shopifyテーマを管理しているディレクトリでローカルリポジトリを生成します。
git add . / git commit -m "first commit"
自分のパソコン上にあるShopifyテーマをローカルリポジトリに追加しております。
git remote add origin https://github.com/GitHubのユーザー名/リポジトリの名前.git
ローカルリポジトリとリモートリポジトリを紐付ける作業をしております。
git push -u origin main
リモートリポジトリに反映しております。
手順3.Shopifyの管理画面でGitHubを連携
次に、Shopifyの管理画面からGitHubを連携する作業を説明します。
下記の画像のように、管理画面から「オンラインストア」▶︎「テーマ」▶︎「テーマ追加」▶︎「GitHubから接続する」を選択してください。
「GitHubから接続する」をクリックすると下記の画像のような①の画面が表示されます。
「アカウントの追加」をクリックすると②の画面が表示され、「only select repository」 を選択、「select repository」 にて該当するリポジトリを選択してください。
その後、「SAVE」ボタンをクリックします。
最後に、リポジトリを押すと、連携したリポジトリを選択できるようになっています。
「main」ブランチと「接続」ボタンをおしましょう。
そうすると、GitHubからテーマディレクトリをインストールが始まります。
これで、GitHubとShopifyとの連携が完了です。
最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。
Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
Discussion