GatsbyでContentfulのマークダウン形式のテキストを読み込んでHTMLとして出力する | DevelopersIO
どうも、ベルリンオフィスの小西です。 ヘッドレスCMSのContentfulで長文入力フィールドを作る際、マークダウン形式 とリッチテキスト形式が選択できます。 基本的には使いたい方を使えばいいのですが、Contentful的にはマークダウン形式がおすすめな気がします。 リッチテキストを扱う方法については以前記事を書いたので、 今回はContentfulで投稿されたマークダウンテキストをGatsbyでパースしてHTML表示する方法についてまとめます。 Gatsbyでフロントエンドを作る際、マークダウンを出力する方法はいくつかありますが、今回はGatsbyのオフィシャルプラグインのみを使う方法で行います。 前提 Gatsby : 4系以降のバージョン Gatsbyプラグイン gatsby-source-contentful : 7系以降のバージョン 3系以前のバージョンの場合、Content
GatsbyJSで認証サイトを実装する | みどりのさるのエンジニア
Making a Site with User Authentication | Gatsby のチュートリアルを試した時の作業を備忘録としてまとめました。 全体の実装は t-yng/examples/gatsby-auth を参照してください。 要件 ログイン、ログアウトができる 非ログイン状態で要認証ページが表示できないこと プロジェクトの作成 $ gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world $ cd gatsby-auth ナビゲーションバーを実装 ナビゲーションバーのコンポーネントを作成する。 // src/components/NavBar.tsx import React from "react"; import { Link } from "gatsby"; export const NavBar =
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより
blog.ojisan.io
InteliJ で作った new Kotlin Project が、Gradle のバージョン設定が古くてビルドできなかった
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
【GatsbyJS製ブログ】GitHubActionsでブログ更新をサーバに自動デプロイ | Bear-Fruit
Gatsbyを使ってサイトを作っているけど、いちいちビルドしたファイルを送信するのは面倒 GitHubActionsの使い方を知りたい Gatsbyをサーバーレスではなく、レンタルサーバーにデプロイしたい GitHubのリポジトリと紐付ける まずは、GitHubでリポジトリを作成し、ローカルのGatsbyプロジェクト（といっても実際はディレクトリ群）と紐づけます。ここら辺ができているorできる人は読み飛ばしてOKです。あらかじめ GitHubの登録は済ませておいてください。 1．VSCodeでローカルのGatsbyプロジェクトを開く ローカルでGatsbyプロジェクトを開く 2．GitHubで新しいリポジトリを作成 すると、下図のような画面が出てくるはずです。赤い囲みは、この後コマンドラインで打っていきます。 新規リポジトリ作成 3．VSCodeでコマンドラインを開き、コマンド入力 ターミ
Gatsby.js製ブログをセルフホストしているサーバーにデプロイする | Yucchiy's Note
February 13, 2020Gatsby.js製ブログをセルフホストしているサーバーにデプロイする Yucchiy's Noteは2019/02/13時点で、Gatsby.jsで作成していて、sakura VPSに立ち上げたサーバー上でホストしています。 このブログをGithub Actionsを用いてサーバーにデプロイしてみます。 ただし下記を前提とします。 サーバーに対して公開鍵認証でSSHができる サーバー上ではnginxが構築されている(nginxである必要はないが) レポジトリ直下にGatsby.jsコンテンツが配置されている(package.jsonなどが直下に配置されている) workflow fileの作成 Github Actionsを設定するためには、まずworkflow fileと呼ばれるファイルを.github/workflowsディレクトリ以下に作成する必要
Github Actions で Gatsby + Contentful のブログを VPS にデプロイする - utamt engineer blog
Gatsby + Contentful で作成したブログを VPS で運用しています。Contentful で記事を作成したり、コードを github に push したときに自動でデプロイするようにしたかったので、その仕組みを Github Actions を使って構築しました。 前提 以下の状態であることを想定します。 VPS で gatsby のアプリが稼働している (= npm run serve が実行中) 公開鍵認証で SSH が可能である 公開鍵/秘密鍵が作成済みで、~/.ssh/authorized_keys に公開鍵が登録されている ワークフロー作成 Github Actions は、プロジェクトの .github/workflows ディレクトリ配下にある .yml ファイルの内容を元に実行されます。ファイル名は任意ですが、今回は deploy.yml とします。 na
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Samuel Lawrentz | How to cache your Gatsby site for faster builds in Github Actions?
ブログサイトを作りながら学ぶGatsby入門
[BUG] The process '/usr/local/bin/npx' failed with exit code 1 · Issue #277 · FirebaseExtended/action-hosting-deploy
How can I inject environment variables during the build process in Github CI/CD?