jamstack cms

ジャムスタック

これは、JAMstack サイトを構築しようとする実験です。

クライアント側の JavaScript、再利用可能な API、事前構築されたマークアップに基づく最新の Web 開発アーキテクチャ。

成分は次のとおりです。

• JavaScript: jQuery を使用したクライアント側ロジック
• API: Azure でホストされる Azure Functions Core Tools を使用したサーバー側ロジック
• マークアップ: Hugo で生成された静的 HTML
• コンテンツ: Netlify CMS を使用した Git ベースのヘッドレス CMS

Hugo サイトのソース コード:

• /src/サイト

Azure Functions のソース コード:

• /src/api

サイトは Netlify によってホストされています。

• http://jamstack-cms.netlify.com

走る

サイトをローカルで実行するには、/src/site/data/api.toml を編集します。

[ recipe ]
get_ingredients = " http://localhost:7071/api/Ingredients/ "

[ submit ]
post_recipe = " http://localhost:7071/api/Recipe "

Hugo サイトを実行します。

cd src/site

hugo server

Azure 関数を実行します。

cd src/api

func host start --cors http://localhost:1313

ブラウズ：

http://localhost:1313

帰属

ジャムのレシピはスウェーデンのサイト Tasteline.com から引用しました。

• アップルジャム: http://www.tasteline.com/recept/appelmos-grundrecept/
• リンゴンベリージャム: http://www.tasteline.com/recept/lingonsylt/
• ストロベリージャム：http://www.tasteline.com/recept/jordgubbssylt/

スウェーデン語から英語への翻訳は、Google Translate を使用して行われました。

画像は Flickr から取得したものです。

• リンゴ: https://www.flickr.com/photos/1sock/7910673688/ by 1sock
• リンゴンベリー: https://www.flickr.com/photos/kymis/2875484409/ by Jyrki Kymäläinen
• イチゴ: https://www.flickr.com/photos/42787780@N04/6984507532/ by Fried Dough