Categories
Blog

Shifter Static で作るお手軽カフェサイト


この記事は Shifter Advent Calendar 2020 の12月6日の投稿です。今回は、小規模店舗運営者でも始められる Shifter Static を利用した「お手軽サイトの始め方」をご紹介します。

この記事は Shifter Advent Calendar 2020 の12月6日の投稿です。

2020年は事業者にとってはとても厳しい1年となりましたね。飲食店はテイクアウトを始めたり、ホテルを始めとする観光業界はGo To キャンペーンがスタートするまでは苦戦していたと思います。

その中で小規模店舗を運営されていた方々はどうしたら良いか悩みながら日々を過ごしていたかもしれません。限られたリソース、店を開けるか閉めるか、新しくネットショップを始めるか などなど悩んでいた方も多いのでは。

今回は、小規模店舗運営者でも始められる Shifter Static を利用した「お手軽サイトの始め方」をご紹介します。

利用するのは WordPress と Shifter Static

WordPress とは?

まずは今回利用するツールのひとつである WordPress のおさらいです。

WordPress とは

WordPress (ワードプレス) は、ブログから高機能なサイトまで作ることができるオープンソースのソフトウェアです。

世界中で使われる最高の信頼

Web 上の39%のサイトが WordPress を使っています。個人ブログから大規模なニュースサイトまで用途はさまざまです。

from ja.wordpress.org

簡単に言うとコンテンツマネジメントシステム、これから作るサイトの「データ」を編集し管理する場所(システム)です。

作成したサイトのデータ、例えば営業時間やメニューなどを更新したり、ブログを更新するときはこの WordPress を触ります。

Shifter Static とは?

Shifter Static は、DigitalCube Co. Ltd. が提供するサーバーレスホスティングソリューションと、WordPress用の静的サイトジェネレーターです。

詳しくは:https://www.getshifter.io/ja/

今回はレンタルサーバー等ではなく、Shifter Static を利用します。

その理由は、

  • サイトを静的化する
  • 高速配信を実現する
  • セキュアな環境にする
  • サーバーや WordPress をメンテナンスフリーにする

小規模店舗を運営している方は一人で回しているケースが多いと思います。

そうすると仕入れ、仕込み、接客、会計、、、、、とやることはいっぱい!そこにサイトを頻繁に更新したりメンテナンスする時間をとるなんて難しい。

サイトを作ろう

Shifter Static はまず Tier1 から

Shifter Static はサイトの規模に合わせてプランを変更できますが、まずはスタート時はTier 1からスタートしてOKです。

Shifter Static はフリープランも準備されているので、まずはどういう操作をすればいいのかなどを確認することもオススメします。

Shifter Static を利用する際には、先程述べたように「セキュアな環境にする」ため、WordPress に直接ログインするのではなく、Shifter のダッシュボードへログインしてから WordPress を起動し、ログインする形となります。

詳しくはドキュメントも用意されています。

WordPress で利用したテーマは「Lightning」

今回利用するテーマは無料で使えるテーマの中でも人気のある Lightning にしました。

無料なので追加コストはなし!そして国産テーマなのでドキュメントも豊富で、安心して利用することができます。

利用したプラグインは以下の通り。

  • VK All in One Expansion Unit
  • VK Blocks

どちらも今回利用したテーマと同じ会社である株式会社ベクトルが開発しているので安心して利用することができます。そしてなにより機能が豊富!

ブロックエディターを使いこなそう

WordPress は Ver.5.0 から標準のエディターが「ブロックエディター」となりました。このブロックエディターを利用することによって、より直感的に操作することが可能になりました。

これまでは希望の形にするためには少々コードを書かなければ行けなかったり、追加でプラグインを入れる必要がありましたが、その必要はなし。

(※もしかしたら特殊効果などをコードを書かずして実現したい場合は引き続きプラグインの追加が必要かもしれません)

今回はトップページのみを作成します。

もしご自身のサイトで販売もしたい場合は、Shifter Advent Calendar 2020 の4日目の記事「Jamstack ガールが始める さくっとEコマース」を合わせてご参照ください!

作成したページはこちら!

ページが完成したら次は公開作業です。

今回作成したサイトはこちら:https://xenodochial-engelbart5237.on.getshifter.io/

Shifter Static で静的化しよう

今回は Shifter Static を利用しているので、静的化する必要があります。

※静的ページと動的ページの違いについてはこちら:https://www.itra.co.jp/webmedia/static-dynamic-difference.html

静的化するのは何も怖くない。Shifter のダッシュボードへいき、「Generate」ボタンを押してください。このボタンをクリックすることにより裏側で処理が走ります。

Generate が完了すると Artifact が作成されます。作成されたら完了です。

ドメインについて

今回の記事では言及しませんでしたが、オリジナルのドメインでサイトを公開したい場合は Generate する前にドメインに関する設定をいくつかする必要があります。

※ドメインの設定はフリープランではできません。Tier 1以上の契約が必要となります。

こちらもドキュメントが用意されているのでぜひ御覧ください。また、別途ブログを書いてくださっている方もいるので合わせて確認してみてください。

※オリジナルのドメインで運用しなくても良いよ〜って方は Shifter のほうで割り当てられる URL で運用することももちろん可能です。

まとめ

以上でお手軽サイトが公開できました!

全然お手軽じゃないじゃん!と思った方もいるかもしれません。が、実は今回の手法は「ロングラン/中長期」で見たときにお手軽なのです。

言及したように Shifter Static を利用することによって

  • サイトを静的化する
  • 高速配信を実現する
  • セキュアな環境にする
  • サーバーや WordPress をメンテナンスフリーにする

の4点を実現させます。3番目と最後は中長期的に見てとても大事なポイントとなります。

今回は WordPress と Shifter Static で作るお手軽カフェサイトのご紹介でしたー。

Leave a Reply

Your email address will not be published. Required fields are marked *