プロジェクトを作成する

SpearlyCMSで作成したコンテンツを、WEBサイトに埋め込んでいきましょう。

SpearlyCMSは作成したコンテンツを配信する方法として、「タグ埋め込み」と「API呼び出し」の二つの方法を提供しております。

今回は非プログラマでも扱いやすい「タグ埋め込み」を用いて、作成したコンテンツをチュートリアル用のWEBサイトで配信していきましょう。
(API呼び出しについてはこちらで説明しております。)

完成例
https://small-butterfly-5963.spearly.app/

完成イメージ

プロジェクトを用意する。

今回はあらかじめチュートリアル用のサイトのデータを用意しておきました。
下記のリンクからzipファイルをダウンロードしていただき、zipファイルを解凍したあとデスクトップなど好きな場所に配置してください。

SpearlyTutorial .zip

サンプルサイトをローカルで確認する準備をする。

今回作成するプロジェクトを、ブラウザで確認する準備をします。

「Chromeなどブラウザを用いる方法」と、「Node.jsのフレームワークであるExpressを用いる方法」の二つの方法を紹介します。

Chromeなどブラウザを用いる方法

ダウンロードしたzipファイルを解凍し、デスクトップなどに配置します。
SpearlyTutorialフォルダを開き、index.htmlをブラウザへドラッグ&ドロップします。
このようなページが開ければ成功です

サンプルの写真が表示されていますので、今回は写真やそのタイトルを先ほどSpearlyCMSで作成したコンテンツに置き換えていきたいと思います。

次のページ「作成したコンテンツを埋め込みタグで表示する」へ

Node.jsのフレームワークであるExpressを用いる方法

ファイルを配置したディレクトリで以下の準備をします。
```
cd SpearlTutorial
npm install
node index.js
```
「the server has started。port:3000」と表示され、サーバーが立ち上がります。
ブラウザで「http://localhost:3000」にアクセスすることで作成したWEBページを確認できます。

サンプルの写真が表示されていますので、今回は写真やそのタイトルを先ほどSpearlyCMSで作成したコンテンツに置き換えていきたいと思います。

次のページ「作成したコンテンツを埋め込みタグで表示する」へ

最終更新日: 2022.02.28