gatsby

1/2ページ

Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築

はじめに(Headless CMSとは) Headless CMSを一言で説明すると「コンテンツを表示する機能を持たず、APIでコンテンツの配信を行うCMS」になります。従来のCMSはコンテンツを管理するバックエンドの機能とコンテンツを表示するフロントエンドの機能が一体となっていますが、Headless CMSでは画面テンプレートのようなフロントエンドの機能を持っていません。従来のCMSをCoup […]

Gatsby v2とNetlifyで運用コストゼロのサービスサイトを作る。ハマった部分とメリットの解説。

はじめに はじめてのQiita投稿です。 現在、現役プログラマーとプログラミング学習者を直接つなげるマーケットプレイスCodeGritを開発しています。こちらのサービスで、事前登録、メンター募集を開始するにあたりティーザーサイトを構築しました。 構築したサイト: CodeGrit タイトルの通り、Gatsbyを利用したのですがGatsby.jsが現在Version1から2への移行期にあたり、一部混 […]

Gatsbyを使ってみる

Gatsbyとは Reactを使った静的サイト生成ツール static PWA(Progressive Web Application)を作れるらしい。PWAとはネイティブアプリのようなWEBアプリと自分は解釈している。 Reactのことをさっぱり分かっていないこともあり、学習も兼ねて使ってみた。 静的サイト生成ツールはこちらの一覧が参考になった。 markdownを書いてblog記事にするための […]

Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築

はじめに(Headless CMSとは) Headless CMSを一言で説明すると「コンテンツを表示する機能を持たず、APIでコンテンツの配信を行うCMS」になります。従来のCMSはコンテンツを管理するバックエンドの機能とコンテンツを表示するフロントエンドの機能が一体となっていますが、Headless CMSでは画面テンプレートのようなフロントエンドの機能を持っていません。従来のCMSをCoup […]

VuePressはコーダーの夢を見るか。

Webサービス界隈の優秀な人たちが、フロントエンドの新しいツールを「最高!」と日々謳っている中、 底辺コーダーの我々はクライアントからの修正横目に 「ほーん。どうせ僕らの業務じゃ使えないんでしょ?」という冷淡な姿勢を貫き通していた。 しかし、興味がないわけではなかった。ReactやVueといったコンポーネント思考のフレームワークを駆使すればクライアントからの無理難題をスマートに解決し、家で有意義に […]

Gatsby+firebaseで独自ドメインのHTTPSサイトを作る(その2 Firebaseの設定)

はじめに (ほぼ)無料で静的サイトを簡単に作れたらいいなと常々おもっていました。 最近は環境などそろってきたのでやってみます。 Gatsby+firebaseで独自ドメインのHTTPSサイトを作る(その1独自ドメインの取り方) Gatsby+firebaseで独自ドメインのHTTPSサイトを作る(その2 Firebaseの設定) ← 今回はここ Gatsby+firebaseで独自ドメインのHTT […]

React のエコシステムに乗っかって、普通のランディングページを作りたい

React のエコシステムはどんどん大きくなっていて、ありとあらゆるツールが React を中心に構築されている気さえする。とはいえ、そのツールの設定は前提知識が必要で、例えば Webapck や各種 Lint ツールをうまく使うためには、少し経験が必要だし、細々したツールの組み合わせでできている React の開発環境は、一見するとオーバースペックのようにも感じる。 それでも、フロントエンドを推 […]

静的サイトジェネレーター Gatsby を使ってみた事と、縦書きテンプレートを作った話

Gatsby を使ってみた事と、縦書きテンプレートを作った話 作ったのはこんな感じです ( 既に執筆中にもドキュメントが大きく変更されているが、一部更新できていない。間違いなど何かあったらコメント欄にお願いします ) Gatsby Reactjs 製の静的サイトを簡単に作成できるツール https://www.gatsbyjs.org/ Get Start まずは、通常の Gatsby プロジェク […]

TypeScriptでGatsby.jsチュートリアル

Reactベースの静的サイトジェネレータGatsby.jsのチュートリアルを、TypeScriptで動かしました。 https://www.gatsbyjs.org/tutorial/ TypeScriptはJavaScriptに静的型付けを追加した言語です。Visual Studio Codeなどのエディタで補完が効くといった嬉しい事があります。 環境 Windows 10 Pro Inside […]