登録不要で完全無料！ブラウザだけで完結する静的サイトジェネレータ「T3MPL」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー
Gatsby Cloud で Contentful にプレビュー環境を簡単構築する - Qiita
Gatsby Cloud を使うと、Gatsby + Contentful で構築したサイトにプレビュー機能を簡単に実装できたので、その手順を紹介します。 Gatsby Cloud とは Gatsby Cloud は、Gatsby 社が提供するクラウドサービスで、Gatsby 製サイトのビルド、デプロイ、ホスティング、CMSプレビューなどの機能を基本無料で使うことができます。 有料プランでは、月間のビルド数上限が増えたり、並列ビルドが可能な Incremental Builds を利用可能になります。 いくつか機能を簡単に紹介します。 Lighthouse Reports 各ビルドに Lighthouse のレポートを出力することが可能です。 ビルド履歴にスコアが残るので、推移が見えて良いです。 Gatsby Preview この記事のメインである、サイトのプレビュー機能です。 データソー
Stackbitを触って感じるWebアプリ構築の進化のひとつの形 - BASEプロダクトチームブログ
この記事はBASEアドベントカレンダー 19日目の記事です。 devblog.thebase.in Webアプリの解体 こんにちは。フロントエンドエンジニアの松原(@simezi9)です 近年、Webアプリはクラウドの発展とともにそのあり方を大きく変質させてきました。 具体的にはXaaSの発展により、Webアプリはその構成要素をあらゆるレイヤにおいて細かく分解され、それらを開発者が組み合わせることで作られるようになりました。 このアプローチによりシステムはプラガブルになり可用性の面でも品質面でも大きく進化しました。 その反面で当然このアプローチにも問題があります。その最たるものが組み合わせの複雑度の増加だと思います。 あらゆるものがプラガブルになった反面、それぞれのサービスをどのように組み合わせてWebアプリを構築していくのか自体が一つの知見・分野となり、「昔はWebアプリフレームワーク一
ノーコードでJAMstackなWebサイトを作成できる「Stackbit」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JAMstack*1を構成できるさまざまなサービスと連携してサイトを手軽に作成できる無料のWebサービス「Stackbit」をご紹介します！ しかもプログラミング不要で、話題のノーコード（NoCode）サービスとしても人気が高いことで知られています。面倒な処理はすべて自動化されているので、誰でも手軽に最新のWebサイトを作ることができます。 Webサイト制作やJAMstackなどにご興味ある方は、ぜひ参考にしてみてください！ 【 Stackbit 】 ■「Stackbit」の使い方 それでは、基本的な「Stackbit」の使い方から見ていきましょう！ まず最初にトップページにある【TRY NOW】ボタンをクリックします。 JAMstackを構成する各サービスを選択する画面が表示されます。 2020年5月時点において、選択できるサービスは
Gatsby製のブログにタグ機能を追加するための方法を見直してみよう
このブログにタグ機能を作りました。 タグって自作ブログを作ると絶対に欲しくなってしまう機能なのですが、Gatsby でそれを作るのはちょっと敷居の高さを感じていたので、噛み砕きながら解説しようと思います。 一度わかってしまえば単純な話だとは思うものの、gatsby-node.js の使い方やビルドプロセスの知識が問われるので、Gatsby を使えるようになるかどうかの最初の関門になってそうと個人的には思っています。 同様の知識は Gatsby から記事ページを生成するときにも問われますが、それは公式チュートリアルをやればすんなりと通れるため、実質タグ機能の実装が最初の関門になってそうです。 そのため "Gatsby を初めてみてチュートリアルやって静的サイトは作れるようになったけどよくわかってない" という人にとって有用になりそうな情報も含めて、タグ機能の実装に必要な知識や考え方をつらつら
シリーズ「Netlify CMSを実践で使ってみた」まとめ
Gaji-Laboのデジタル環境でいろいろなお手伝いをしているゆるボット・がじ専務が、Gaji-Labo内でNetlify CMSを実践した感触・知見・TIPSについて書かれた記事シリーズをまとめました。 Netlify CMSやNetlify関連の周辺トピックに興味のある方におすすめの内容です。 Netlify CMSを実践で使ってみた知見をまとめた記事の一覧Gaji-LaboのコーポレートサイトはNetlify CMSを使っていますGaji-Labo 的 Netlify CMS の運用方法Netlify CMSのちょっとしたTips集Netlify + GatsbyJS + Netlify CMSの環境にBasic認証を掛けようとしてハマったことZapier を使って Netlify のサイトに設置したフォームと Google スプレッドシートを連携させるNetlify で Forms
GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。 今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。 Gatsby Cloud とは？Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。 GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、イ
Gatsby cloud と Headless CMSの紹介
昨年末（2019年末）に登場したGatsby Cloud！ これは、buildとhostingをしてくれるサービスですが、 gatsbyを使っている方の悩みとして、ページ数や画像等のmediaファイルが増えてくると、ビルドの時間がかかる。 そこで、これをGatsby Cloudに任せ、 さらにhedlessのcms（contentfulやcosmic js など）にて、記事を管理し、 リアルタイムpreviewまでも可能にします こちらを実現する上で、 今回はまずHeadless CMSのご紹介をします。 この記事の内容を読むメリット Headless CMS導入のメリットがわかる 静的サイトジェネレーターを使いたくなる 静的サイトジェネレータ 従来の、サーバーサイドプログラム（Ruby Python PHP等）でのWEBサイトは アクセス来る 処理する ブラウザが読める形でDesign含
GatsbyをNetlifyでサイトやブログを作成しよう！（無料・サーバーレス・ほぼコーディング不要）｜masia02 (CipherWeb,LLC.)
GatsbyをNetlifyでサイトやブログを作成しよう！（無料・サーバーレス・ほぼコーディング不要） 次回の記事を簡潔にするための前フリ記事ですｗ Gatsbyは、Reactに基づく無料のオープンソースフレームワークであり、開発者が高速のウェブサイトやアプリを構築するのに役立つ静的サイトジェネレーターです。 スターターライブラリには、サイトやブログのテンプレートが複数あります。Netlify CMSに対応したテンプレートが増えております。 Netlifyは、静的ウェブサイトのためのホスティングサービスとサーバーレスのバックエンドサービスを提供しています。無料プランでも十分利用できると思います。 Netlify料金表スターター 個人向け $ 0 /月 ・無料SSL ・100GBの帯域幅/月 ・300ビルド分/月 簡単に利用するにはスターターライブラリから利用したいテンプレートのGithub
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita
Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア
WordPressはオワコン！Hugo+Netlifyで最強の独自ドメインブログを作ろう · クラウドランス望月 札幌のフリーランスブログ
これからブログを始めたい時、どんなブログ環境を作りますか？ 無料ブログじゃなく独自ドメインブログにしたいとか。 Wordpressはサーバー借りて作らなきゃでハードルが高いとか。 脆弱性があって危ないかなーとか心配ですよね。 じゃあどんな独自ドメインブログが良いんだろう？と迷走している方の為に、現時点での技術トレンドの中で一番ベストな独自ドメインブログの作り方を紹介します。 自分はフリーランスエンジニアとして現役バリバリで絶賛稼働中で、ブログ構築する時にめちゃくちゃ調べまくって、現在の最強のブログ環境にたどり着きました。 それはズバリHugo + netlify CMS で作る独自ドメインブログです。 HugoとNetlifyについては後で解説します。 自分のブログは費用対効果が最も高く安定、安心、快速で最強のブログ環境です。 最初構築するのはやや手間で面倒くさいんですが、一度作ってしまえ
初心者がReact製の静的サイトジェネレーター「Gatsby」でシンプルなWebサイトを作ってみた
UI構築のためのJavaScriptライブラリ「React」製の静的サイトジェネレーター「Gatsby」を使ってWebサイトを作りました。後半ではFirebaseでサイト公開まで行いますが、前半ではコンパイルまで。 今回作ったWebサイト https://imairisako.com/ 本記事は『あさぎデザインひとりAdvent Calendar 2019』の7日目のエントリーです。 Gatsbyを使う準備をする npxでインストールしました。Macのターミナルを起動して、下記を実行します。 Terminal npm install --global gatsby-cli Terminal gatsby --version バージョンが確認できれば、インストールはOK。 Terminal gatsby new app https://github.com/gatsbyjs/gatsby-s
WordPressが使いにくいなら静的サイトジェネレーターを使えばいいじゃない｜meow｜note
本格的にブログを作るならWordPress、というのが合言葉になりつつありますが、みなさんWordPress好きですか？わたしはめっちゃ嫌いです。理由は以下の通り。 使いづらい（管理画面わけわかめ、重い、定期アップデートが面倒） コスパが悪い（無料テンプレートが雑魚、有料コンテンツが多い） 自由度が大して高くない（最新サービスの反映が遅い、フォークできない）かと言ってフルスクラッチでブログを作るのは悪手です。ページを増やすたびにhtmlファイルを作って、記事一覧をひとつずつずらして...この面倒くさい作業をぜんぶやってくれるのがWordPressや静的サイトジェネレーターです。 （追記）フロントエンドエンジニアやWebデザイナーの方でもWordPressやめて静的サイトジェネレーターに移行したよ！という声も多く。誰でも簡単に便利に、が謳い文句のWordPressの便利さ簡単さが何回使っても
静的サイトジェネレーターは脱CMSなブログが作れるツール
自分用のブログを作るにあたって、ブログサービスを利用したりWordPressをこさえたりすることにもう疲れてしまった。ブログサービスはコミュニティとしての利点はあるものの、細かい調整ができずストレスになる。WordPressはサーバー費用やらセキュリティ工数やらがのしかかってくる。そこで使い始めたのが静的サイトジェネレーター。 静的サイトジェネレーターとは簡単に言うと、用意したMarkdownファイルなどから普通のHTML/CSS/JSを生成してくれるツール。ややこしいデータベースと無縁。ローカルで確認できるただの静的サイトが吐き出されるので、それを丸ごとサーバーに上げるだけ。公開用のデータが1つのフォルダにまとまっているからサーバー引っ越しが簡単。すべてが静的ページなので当然表示が早い。 どうやって使うものなのか静的サイトジェネレーターをコマンドラインでMac/PCにインストールして、コ
Webサイトを静的サイトにしました : hugo による静的サイトの作成 (1/3) - プログラマーのメモ書き
個人事業主としての森ソフトのサイトは、さくらインターネットのレンタルサーバー上で Joomla! を使って動かしていました。 当初は、ブログ代わりの技術メモとしていろんなものを載せるために使っていました。ちなみに、Wordpressを選ばなかったのは、当時のさくらのレンサバのDBのバージョンがWordpressのサポート対象外だったためなのと、知り合いがJoomla!使っていたのが理由でした。 ちなみに、あれこれやってた時の記事がまだ残ってました (^^; 思い出にリンク張っときます。 でも、一昨年から技術メモの部分はブログとして、はてなブログに移行したので、そんなに大そうな頻度で更新することもなくなりました。 となってくると気になってくるのがサーバー代です（サイト分だけでなくバックアップサーバーも立ち上げているので２台の料金がかかっています）。 昨今、あれこれ見てると静的サイトホスティン
【Hugo】静的サイトジェネレーターでのサイト作成方法｜CGメソッド
OSのよってデータが違います。今回はWindows版をダウンロード。 ディレクトリの作成 C:Hugoに「Hugo」フォルダを作成「hugo_バージョン名_Windows-64bit」フォルダをbinという名前に変えて、C:Hugobinに配置C:Hugositesに「sites」フォルダを作成 環境変数の設定 パスを保存して、コマンドを使えるようにします。 せっかくなのでこれもコマンドプロンプトで設定します。 win+Rから「cmd」と検索してコマンドプロンプトを起動 setx path "PATH=%PATH%;C:Hugobin" と入力。「成功: 指定した値は保存されました。」と表示されればOK 環境パスの設定がうまくいかない時 Hugoのコマンドの前にパスを入れましょう。 C:Hugobinhugo という感じにする方法もあります。 コマンドが使えるか確認 コマンドプロンプトで下
Hugo 静的サイトジェネレーターによるサイト構築と公開 | パソコン工房 NEXMAG
「静的サイトジェネレーター」を使用すると、WordPressなどのように動的にページを生成することなく、表示が高速で安定したサイトを運用することができます。また、最近増えてきている静的サイト用のホスティングサービスを利用すれば、別途Webサーバーを準備しなくてもサイトを公開することが可能です。 今回は「Hugo」というオープンソースの静的サイトジェネレーターを用いて、サイトの作成と公開を行う手順についてご紹介します。 静的サイトジェネレーターによるサイト運用のメリット・デメリット まず、静的サイトジェネレーターでWebサイトを運用する場合のメリットとデメリットについて整理してみました。 静的サイトジェネレーターによるサイト運用のメリット 表示速度が早い いわゆる動的サイトでは、アクセスの都度サーバー側でページ生成をするため、ページの表示に時間がかかる場合がありますが、静的サイトではあらかじ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://https//furiwake.alltimeneet.com/entries/kHtGBxjlOe1Uk1o9
The Best React-Based Framework | Gatsby
