登録不要で完全無料！ブラウザだけで完結する静的サイトジェネレータ「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 この記事のメインである、サイトのプレビュー機能です。 データソー
Gatsby製のブログにタグ機能を追加するための方法を見直してみよう
このブログにタグ機能を作りました。 タグって自作ブログを作ると絶対に欲しくなってしまう機能なのですが、Gatsby でそれを作るのはちょっと敷居の高さを感じていたので、噛み砕きながら解説しようと思います。 一度わかってしまえば単純な話だとは思うものの、gatsby-node.js の使い方やビルドプロセスの知識が問われるので、Gatsby を使えるようになるかどうかの最初の関門になってそうと個人的には思っています。 同様の知識は Gatsby から記事ページを生成するときにも問われますが、それは公式チュートリアルをやればすんなりと通れるため、実質タグ機能の実装が最初の関門になってそうです。 そのため "Gatsby を初めてみてチュートリアルやって静的サイトは作れるようになったけどよくわかってない" という人にとって有用になりそうな情報も含めて、タグ機能の実装に必要な知識や考え方をつらつら
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が使いにくいなら静的サイトジェネレーターを使えばいいじゃない｜meow｜note
本格的にブログを作るならWordPress、というのが合言葉になりつつありますが、みなさんWordPress好きですか？わたしはめっちゃ嫌いです。理由は以下の通り。 使いづらい（管理画面わけわかめ、重い、定期アップデートが面倒） コスパが悪い（無料テンプレートが雑魚、有料コンテンツが多い） 自由度が大して高くない（最新サービスの反映が遅い、フォークできない）かと言ってフルスクラッチでブログを作るのは悪手です。ページを増やすたびにhtmlファイルを作って、記事一覧をひとつずつずらして...この面倒くさい作業をぜんぶやってくれるのがWordPressや静的サイトジェネレーターです。 （追記）フロントエンドエンジニアやWebデザイナーの方でもWordPressやめて静的サイトジェネレーターに移行したよ！という声も多く。誰でも簡単に便利に、が謳い文句のWordPressの便利さ簡単さが何回使っても
【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 という感じにする方法もあります。 コマンドが使えるか確認 コマンドプロンプトで下
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Best React-Based Framework | Gatsby
https://cloudlance-motio.work/post/hugo-uber-blog/