タグ

ReactとSSGに関するjsstudyのブックマーク (9)

  • コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog

    こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開

    コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
    jsstudy
    jsstudy 2020/07/23
    静的サイトジェネレータにはNext.jsを選びました。我々はReactのエコシステムに慣れていて、Next.jsを使った案件も経験しており、社内にもノウハウが蓄積されています。
  • GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM

    意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress & Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScriptReact)なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScriptReact)をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、

    GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM
    jsstudy
    jsstudy 2020/04/25
    世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript(React)なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。
  • 静的サイトジェネレーター Gatsby - Qiita

    静的サイトジェネレーターとは? Static Site Generator(SSG) WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり

    静的サイトジェネレーター Gatsby - Qiita
  • Gatsby - daily-dev.net

    jsstudy
    jsstudy 2019/11/08
    NetlifyCMSで、記事の作成を行い、Gatsbyで、ビルド中にNetlifyCMSからデータを取得して、静的ファイルに変換します。 NetlifyとGatsbyを組み合わせれば、特定のブランチにpushすれば、自動でビルドして、サイトを更新できます。
  • JAMstack - Google 検索

    事前にデータを埋め込んだ静的HTMLを生成することで、配信するWebアプリケーションと、コンテンツを管理するCMSなどを完全に分離したアーキテクチャをJamstackといいます。 静的HTMLでも、完全に分離したサービスやシステムのAPIを通じて、ブラウザで実行するJavaScriptで動的コンテンツを扱えます。

  • Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか

    静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMスタック」です。JAMスタックとは何なのか、なぜJAMスタックが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JAMスタックとは JAMスタックを使用する利点 JAMスタックはなぜ人気があるのか まとめ JAMスタックの有用なリソース はじめに 最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをは

    Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか
    jsstudy
    jsstudy 2019/11/06
    NetlifyはJAMstackという新しい用語を発表しました。JAMstackは静的なHTMLサイトで、コンテンツを更新するたびに自動的に再構築され、CDNに直接デプロイされます。ちなみにJAMstackのJAMは、JavaScript、API、Markupの頭文字です
  • WordPress REST APIでイマドキHeadless CMS - ドークツ

    正直あまり時流に乗れていないのですが、昨今フロントエンドとバックエンドを分離してフロントにより自由度を! とのコンセプトのもと「Headless(ヘッドレス) CMS」なるものが流行しているそうです。 国内ではあまりサービスは見られないものの、海外ではHeadless CMSの先駆けとして「Elemeno」、そしてFacebook社も「GraphCMS」をリリースしています。 確かにCMSからViewを分離できれば、 CMS側ではJSON(API)のみになるためフロント側が言語に依存しないホスティングされたものが使えるため自前のサーバーがいらず、セキュリティ等もおまかせ等のメリットがあります。 とはいえ、やはりそこは枯れたWordPress。 痒いところに手が届くプラグイン群や日語のUIはクライアントワークには欠かせません。 そこで、「インストールしたらまずはREST APIをオフに」等

    WordPress REST APIでイマドキHeadless CMS - ドークツ
  • Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築 - Qiita

    はじめに(Headless CMSとは) Headless CMSを一言で説明すると「コンテンツを表示する機能を持たず、APIでコンテンツの配信を行うCMS」になります。従来のCMSはコンテンツを管理するバックエンドの機能とコンテンツを表示するフロントエンドの機能が一体となっていますが、Headless CMSでは画面テンプレートのようなフロントエンドの機能を持っていません。従来のCMSをCoupled(一体型) CMSと呼ぶのに対して、Headless CMSをDecoupled(分離型) CMSと呼ぶ場合もあります。 従来のCMSはサイトの枠組みが出来上がった状態から構築を行うことができるため誰でも素早く簡単にサイトを立ち上げることができます。一方でCMSの枠組みに縛られるため自由自在にサイトを構築するという訳にはいきません。 一方、Headless CMSはサイトを構築するための機能

    Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築 - Qiita
    jsstudy
    jsstudy 2019/07/28
    単一のサイトを作るのであればWordPressを使った方が簡単です。しかし、Content Is King, Distribution Is Queenと言う人もいるように、コンテンツは作れば良しではなくディストリビューションも含めて包括的に考える必要があります
  • Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita

    NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。 「静的サイトジェネレータ」って何? いわゆる「静的サイトジェネレータ(Static Site Generator, SSG)」は、CMS(コンテンツ管理システム)の一種です。代表的

    Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
    jsstudy
    jsstudy 2019/07/28
    "たとえば、Reactの公式サイトはGatsbyを使用したサイトです https://reactjs.org/ GatsbyはSSR的な静的HTML生成に加えて、それと連動する通常のReactアプリも生成します。" →データの入力や編集はWordPressを利用可能=便利かも?
  • 1