はじめに

こんにちは、今村と申します。私はエンジニアとしての勉強をしながらSpearlyの魅力を伝えるべくSpearlyチームのライターとして活動しています。
この記事はエンジニアとして初心者の私が、Spearly CLOUDのチュートリアルを進めていく際につまづいたところを解決していく過程をまとめた記事です。
エンジニアとしてまだ初心者の方や、Spearlyに興味を持ったけど使い方などで詰まってしまった方などに向けて、エンジニア初心者の目線で役に立つ記事を書いていければと思います！ この記事が自分と同じようにつまづいている方の助けになれば幸いです。

Spearly CLOUDとは？

Spearly CLOUDは作成したWEBサイトやコンテンツを高速で安定して配信することができるCLOUDサービスです。
WEBサーバーの構築や面倒なアップデートから解放されて、クリエイティブに専念することができます。
たったの３ステップでコンテンツを配信できます。
Spearly公式サイトより引用:

この記事の前提

• デプロイしたいサイトとして公開したい静的なサイトのコードがある

• Git、GitHubについての知識はない

どこでつまづいたか

• GitHubでのリポジトリの作り方がわからない

• GitHubのアカウントは作れたが、そもそもGitの使い方がわからない

• ローカルリポジトリの変更をリモートリポジトリに反映する方法

参考記事URL

• GitHub使い方

• VScodeとGitHubの使い方

• ターミナルを用いてGitを操作する

上記の記事を参考にして、実際に自分のサイトをGitHub上にコミットしてみました。

サイトを公開するまでの過程

Spearly CLOUDとGitHubの関係性

今回の記事で紹介しているSpearly CLOUDとGitHubの関係性は上の図の
ようになっています。その中でも今回はGitHubにコードをプッシュする
部分を重点的に解説していきたいと思います。

記事を読む以前の状況

1. サイトをエディターを使って開く

以下の画像のように作成したサイトをエディターを用いて開きます。

2. GitHub上のリポジトリにコミットできない

1 で開いたエディターを用いてGitHubに自分のサイトの置き場を作ろうと思います。
そこでエディターでターミナルを開き、Spearly CMSに記載されているコマンドを入力してみました。すると以下の画像のようになりました。

cd ${作成したチュートリアル用プロジェクトのディレクトリ}
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/${お使いのアカウント}/${任意のリポジトリ名}.git
git push -u origin main
zsh: bud substitution
// gitがわからず、何も考えずチュートリアルのコマンドを真似したため、当たり前だがうまくいかなかった。

今思うと何をしていたのでしょうか…
ここで自分のGitHubを見て確かめて見ましょう。ファイルがどこにも見当たらない…

とりあえずCLOUDを開いてできるか試してみよう

3. Spearly CLOUDで公開しようとしても公開することができない

チュートリアル通りにデブロイの手順を踏んで、デブロイを開始…

お、デブロイがはじまった

と思ったら、やっぱり公開できずエラーが起きてしまった

エラーが発生した原因

Gitへの理解がなく、紹介されているコードをそのままコピペしていて実行されていませんでした。
詳細は
・リモートリポジトリにファイルをプッシュできていなかった
・ファイルをプッシュできていないため、Spearly CLOUDで表示するファイ ルが存在しないというエラーが発生した

記事を読んでから再度挑戦

それでは気を取り直して、サイトを公開するためにネット上での記事などを参考にしながらもう一度チャレンジしていきたいと思います。

1. GitHubについて大まかな理解をする

まずGitHubについての理解が曖昧だったため、以下の記事を読んでGitHubとはどういうものなのかの大まかな理解を行います。GitHubに関して不安なところがある方やアカウントをまだ持っていないという方は、一度下記の参考記事を読んでから再びこの記事を読んでいただくとより理解がしやすいかと思います。

参考にした記事

2. ターミナルなどのCLIを用いたGit・GitHub使用方法

1.ローカルリポジトリ作成 

まずはローカルリポジトリを作成します。そのために既に作成してあるファイルに移動するために下記のコードを入力します。

cd {ファイル名}

これにより、入力したファイルに対して操作を行う準備が整いました。

さて、ここでローカルリポジトリを作成するためにターミナルに以下のコードを入力してみてください。

git init

入力できたら次のように入力して.gitと書かれたファイルが存在していることを確かめてください。

ls {ファイル名}

確認できたら大丈夫です。

2.ローカルリポジトリにコミットする 

ここからはファイルの編集履歴を残していきます。

手順としては、変更されたファイルをステージする→ステージされたファイルをコミットするという手順になります。

1.変更したファイルをステージする

git add {ファイル名}

2.ステージされた内容を確認する

git status -s

3.ステージした内容をコミットする

git commit -m "コミット時のコメント"

4.コミットの履歴を確認する

git log --oneline

5.コミット忘れがないか確認する

git status -s

以上でローカルリポジトリに変更内容をコミットするところまでが完了しました。

3.ローカルリポジトリとリモートリポジトリを連携させる 

ここでは作成したローカルリポジトリとGitHub上のリモートリポジトリとを連携させていきます。

1.対応するリモートリポジトリとローカルリポジトリを連携させる

git remote add origin {リモートリポジトリのURL}

2.連携できているか確認する

git remote -v

以上でローカルリポジトリとリモートリポジトリの連携が完了しました。

4.コミットのリモートリポジトリへの反映と同期 

ここからは1で行ったローカルリポジトリへのコミットをリモートリポジトリに反映する、ローカルリポジトリとリモートリポジトリの同期を行う方法を紹介します。前者はローカルリポジトリで変更があった際に、後者はリモートリポジトリで変更があった際に主に用います。このやり方を習得することで、複数人で作業を行うことができるようになります。

・コミットのリモートリポジトリへの反映

git push origin master

・リモートリポジトリとローカルリポジトリの同期

git pull origin master

5.まとめ 

以上がターミナルを用いたGit、GitHubの使用方法となります。

GitはSpearly CLOUDだけではなく、コード管理のさまざまな場面で使用できるため是非理解して活用していきましょう。

3. VScodeでのローカルリポジトリ作成からリモートリポジトリへのプッシュまで

1.ローカルリポジトリ作成 
大まかな理解ができたら次は以下の記事を参考に実際にGitHubとの連携を行っていきたいと思います。

まずは既に作成してあるサイトのファイルをVScodeで開きます。
上部のターミナルから新しいターミナルを開くをクリックしターミナル画面を開きます。そしてそこに以下のコードを入力します。

git init

入力して下記のようなコードが生成されたら完成です。

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint:   git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint:   git branch -m <name>
Initialized empty Git repository in {フォルダーの場所/.git}

そして実際に作成されているか確認します。作成したサイトがあるファイル内に.gitと書かれたファイルが表示されていたら成功です。

そして今後このファイルに変更があった際に行う手順を紹介します。
まず、上から３つ目のアイコンをクリックして画像のように変更を行ったファイルを表示させます。

次にファイルの横に出てくる＋マークをクリックして変更をステージします。
最後にコミットを行います。
以下の画像のようにMessageのところにコメント書き込み、✔️を押すとコミットが行えます。

2.リモートリポジトリを作成する 

まずGitHubにリモートリポジトリを作成するところから初めていきます。
緑の部分をクリックして新しいリポジトリを作成します。

そして画像の矢印で指し示している項目を入力して、Create repositoryをクリックすると作成されます。

3.リモートリポジトリとローカルリポジトリを紐づける 

今回はリポジトリを作成した際に得られる以下のようなコードを用います。

git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
git branch -M main
git push -u origin main

次に２で作成したローカルリポジトリと今回作成したギットハブのリモートリポジトリを紐づけていきます。先ほどの画面で出てきたコマンドを実行していきます。

git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git

そして実行できているか以下のコードを実行して確かめます。

git remote -v

以下のような結果が表示されていたら正常に実行できています。

origin  https://github.com/{ユーザー名}/{リポジトリ名}.git (fetch)
origin  https://github.com/{ユーザー名}/{リポジトリ名}.git (push)

続けて２行目と３行目のコードを実行します。

4.リモートリポジトリに変更をpushする 

1でコミットした内容を先程追加したリモートリポジトリにpushする

git branch -M main
git push -u origin main

画像のようになっていたら正常に実行されています。

5.GitHub上でリポジトリが作成されているか確認する 

画像のようにGitHub上でファイルが正常にコミットされているか確認します。

6.Spearly CLOUDを用いて公開する 

GitHubで公開できたら以下のチュートリアルの手順に沿って公開していきます。

[Spearly CLOUDのリポジトリ選択]

[デプロイ設定の詳細画面]

このように公開することができました。

どのようになったか

今回いろいろと試行錯誤してみましたが、以下のステップに沿って一つ一つ操作を行うことで無事にサイトを公開することができました。

• GitHub側の操作

  1. リモートリポジトリの作成

  2. ローカルリポジトリへのコミット

  3. ローカルリポジトリとリモートリポジトリの連携

  4. 2で行ったコミットをリモートリポジトリに反映させる

• Spearly CLOUD側の操作

  1. 公開するサイトのリポジトリーをGitHub内から選択

  2. デプロイ設定画面の操作

  3. デプロイを開始する

今回の内容はSpearly CLOUDに限らず、エンジニアを目指して学習する際には誰もが通る部分だと思います。そのため、内容をしっかりと理解して少しづつステップアップしていきましょう。
そして、Spearly CLOUDをガンガン使い倒していってもらえると嬉しいです！

Spearly CLOUDを用いたサイト作成に関してはこちら