Hero Image
JAMstackのデモアプリ

1.ヘッドレスCMS Strapi-v4 サーバー：render.com ContentType:Product ContentType:Category DB:SQLite 2.フロントアプリ フレームワーク：Sveltekit API:plugin "axios": "^0.27.2", "qs": "^6.11.0", API:画面 <script> import { onMount } from 'svelte'; import axios from 'axios'; import * as qs from 'qs'; import { env } from '../vars/env.js'; //import '../vars/app.css'; let stateLoading = true; let stateProducts = null; let stateMeta = null; let stateCurrentPageNumber = 1; let stateCurrentPageSize = 5; let cardCount = 0; async function getProducts(pageNumber, pageSize) { const query = qs.

August 2, 2022
Hero Image
JamStackサイト制作手順

1.各種登録 カスタムドメイン登録サイト：例）Google Domain ソース管理サイト：例）Github,Gitlab アプリのビルド＆デプロイ：例）Netlify ヘッドレスCMS：例）microCMS、Strapi（自分でクラウドに構築） 2.画面設計と文章・画像の準備 メインアイコン、faviconの作成 アイキャッチ画像の準備（wepb、svg、jpegなど） 顧客の準備できる画像の加工 基本的な顧客情報、商品などの説明 3.Hugoのテーマの選択 Hugoのテーマは、200以上あります。 当社では、「Hugo Serif」を採択しています。 4.HugoのインストールとGitHubへpush ローカルPCへHugoのテーマをインストールします。 当社では、WSLのUbuntu22.04となります。 GitHubへソースをpushします。 5.Hugoの各種設定と配置 基本的な設定をします 画像、文章を配置します。 6.ヘッドレスCMS ヘッドレスCMSは、お客様が必要な場合に準備します。 当社のサイトは、ローカルPCで編集したものをGitHubへpushしています。 ヘッドレスCMSのAPI連携を構築します。 小さな個人・法人サイトでは、microCMSは、無料で使えるの便利です。 Strapiは、ある程度のスペックが必要ですので注意が必要です。 弊社のサンプルアプリは、Strapiを使っています。 7.Netlifyへ連携 Netlifyは、Github,GitLabと簡単に連携できます。 カスタムドメインとSSLの設定をします。 「Google DomainのDNS」で事前にNetlifyのIPを設定しておきます。 8. デモアプリ Strapiを使ったサンプルアプリ（SQLite） Sveltekit×Render.com(Strapi)×Github×Netlify 以上

July 10, 2022
Hero Image
Hugo環境構築

1. Go言語のインストール(Ubuntu 22.04) 1-1. Apt command $ sudo apt update -y $ sudo apt install golang-go 確認 $ go version (out) go version go1.18.1 linux/amd64 $ which go (out) /usr/bin/go 2. hugoのインストール(apt) Hugoドキュメント 参考URL 2-1. インストール ~$ sudo apt update ~$ sudo apt -y install hugo ~$ hugo version hugo v0.92.2 (削除) sudo apt-get remove --auto-remove hugo 2-2. 確認 $ hugo version (out) hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1 $ which hugo (out) /usr/bin/hugo 3.

February 10, 2022