タグ 静的サイト
新着順 10 users 50 users 100 users 500 users 1000 users静的サイトをFediverseに対応させる | おそらくはそれさえも平凡な日々
当サイトをFediverseに対応させました。 @songmu.jp@songmu.jp でMastodonなどでリモートフォローできます。 やったことは、 このブログがFediverseに対応しました というtyageさんのエントリーをそのままなぞっただけです。このエントリーはh-cardのサイトトップへの掲出に関する説明が書き漏れていそうでしたが、それ... 続きを読む
静的サイトに特化した全文検索ライブラリ「Pagefind」、さくらのレンタルサーバで動かしてみた
先日、静的サイトに特化した全文検索ライブラリとして「Pagefind」というソフトウェアがあることを、下記の記事が話題になったことで知りました。 参考:静的サイトに特化した検索ライブラリ Pagefind を試す | grip on minds 実は、いまお読みのPublickeyはまさに、Movable TypeというCMSを用いて生成された静的なWebサ... 続きを読む
クローズしたサービスの管理画面を静的サイトにする - クックパッド開発者ブログ
こんにちは、技術部の石川です。 ある日、社内の各種アプリケーションを眺めている中で、とあるクローズしたサービスの管理画面を担っていたウェブアプリが今も動いていると気付きました。簡単にヒアリングしたところ、サービス自体はクローズしたものの、保有していたデータが次のチャレンジに生かせるため管理画面だけ... 続きを読む
Webフレームワーク「Astro」とは? 開発初心者からベテランまで注目する理由
はじめに Web制作におけるフレームワークというと、ReactやVue.jsなど、エンジニアが効率的に開発を行うために必要なシステムの骨組み、という印象がありますが、Astroは筆者のような、どちらかというとデザイン寄りの制作者でも理解しやすい設計になっており、実体験としてデザインから静的サイトの構築までを一人で完... 続きを読む
ブログをAstro に移行しました - As a Futurist...
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったで... 続きを読む
CloudFrontとS3で作成する静的サイト構成の私的まとめ | DevelopersIO
しばたです。 以前の記事でも触れた様にCloudFrontとS3を使って静的サイトを作る構成に対する理解にあいまいな部分があったので改めてまとめてみました。 特に目新しい話も無く知っている人には当たり前の内容かもしれませんが、まあ、自分自身の理解を整理するために記事にしていきます。 1. S3静的ウェブサイトを使う... 続きを読む
Private GitHub Pagesで社内ドキュメントを公開しよう! - メドピア開発者ブログ
集合知プラットフォーム事業部の榎本です。筋トレのお供のプロテインが切れそうなので、次に購入するプロテインのメーカーとフレーバーに悩んでます。 GitHub Pages でアクセス制限 今まで GitHub Pages というと静的サイトをインターネットへ全世界公開するしかできなかったのですが、2021年に Private GitHub Pages の... 続きを読む
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
Transcript Next.jsで静的サイトを作成時 よく使っているライブラリまとめ 2022/02/22 by hanetsuki in ジャムジャム!!Jamstack_5 hanetsuki • 中野にあるweb開発会社”ちょっと株式会社”所属 • 業界歴4年目のフロントエンドエンジニア • デザインと開発とオタクコンテンツが好き 自己紹介 突然ですが、静的サイトを作... 続きを読む
framekit で静的サイトを API 化する
これは monaco-editor で作られたエディタを操作してるサンプルです。 アイデア 複雑な SPA を同じページ内部で動かそうとすると、主にビルド方法や相対パス周りで問題が発生します。例えば vite と webpack で噛み合わなかったり、monaco-editor のように暗黙の loader を大量に設定する必要がある場合だったり、デプロ... 続きを読む
Puppeteer で静的サイトの Font Subsetting | blog.jxck.io
Intro Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。 Web Font の静的サブセット 本サイトで提供している Web Font は当初、文字を事前に選定して生成したものを使っていた。 Noto Sans の Web Font 対応とサブセットによる最適化 当時はコン... 続きを読む
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql - mizdev
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベー... 続きを読む
Azure App Service に Static Web Apps が登場! - PaaSがかりの部屋
Microsoft Build 2020 で、Azure App Service の新たなオプションとして 静的サイトのホスティング を実現する Static Web Apps が発表になりました(執筆時点で Public Preview)。JavaScript で開発する Web フロントエンドのメインストリームである SPA(Single Page Application))や 静的サイトジェネレータを使う ... 続きを読む
next.js の AMP mode を使って静的サイトを作る - mizchi.dev
by mizchi この記事は mdxx-ssg を作りながら, next.js で AMP に対応したときにやったことです。 コードはこちらです mdxx/packages/ssg at master · mizchi/mdxx AMP について Google の推奨する HTML のサブセット仕様です。制約付きのインライン CSS のみ + 一切の JS が書けず、代わりに動きがあるものは amp plugi... 続きを読む
S3+CloudFrontでS3のURLにリダイレクトされてしまう場合の対処法 | Developers.IO
大阪オフィスのYui(@MayForBlue)です。 S3+CloudFrontの構成で静的サイトを構築していてハマったところがあったので書き留めておきたいと思います。 CloudFrontのURLにアクセスしてもS3のURLにリダイレクトされる S3+CloudFrontの構成で静的サイトをホスティングしたのですが、CloudFrontで指定したドメインにアクセスし... 続きを読む
【実装メモ】Gatsbyを使ってよかった・注意すべき点まとめ - コネヒト開発者ブログ
こんにちは、エンジニアの@dachi_023です。最近、MacBook Proの調子が悪いのですが修理に行くのが面倒で行っていません。放置し続けていたら直ったりしないかな・・・。 今回の記事はGatsbyで100ページ超えの静的サイトを構築したときの学びについてです。Gatsbyって実際どうなん?って思っている方に読んでもらえたら幸... 続きを読む
Netlify と PWA で JAMstack を目指す - kondoumh のブログ
静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。 PWA を作る方法は色々とありますが Vue CLI で簡単にプロジェクト生成できるのでちょっと試してみました。 プロジェクト... 続きを読む
決定版 静的CMSによるAzure Storageでのサイト構築 - Pakue Docs
目的 PHP等を使って動的にサイトを配信するのではなく、先にコンテンツを構築しHTMLファイルとして配信する静的サイトを構築する。その後、生成されたファイル群をAzure Storageに配置しWebサイトの公開を行う。 今回はPubliiというCMSを使うことで、これまでの静的サイト構築で必須だった黒い画面を使わない流れを提示... 続きを読む
S3/CloudFront/Route53/ACM構成の静的サイトをTerraformで構築 & CircleCIで自動デプロイ - Luche Holdings Tech Blog
みなさん、はじめまして。 Luche Holdings(ルーチェ ホールディングス)の坂本です。 LUCE HOLDINGSはギフト領域にフォーカスしたベンチャー企業で、日本とシンガポールに拠点をおいています。 今まであまり情報を発信できていなかったのですが、今後積極的に情報を発信していく一環として、このブロクを開始しました。 ... 続きを読む
静的サイトを公開するならどこがいいの? #技術書典 - フロントエンドの地獄
SPAなどの静的サイト(PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト)のを公開するにあたって、運用・配信(ホスティング)するならどこがいいかと聞かれたのですが、そのときの回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の4つで比較しています。 GitHub Pages Firebase Hostin... 続きを読む
Middelman + Google Spreadsheet を使ってみんなで編集できる静的サイトを作る - Qiita
最近 Middleman を活用しています。middleman は Rails からテンプレートエンジン部分だけを抜き出したようなもので、Haml や Slick などを使いたいが、ログイン処理などの動的なものは必要ないといった時に便利です。 静的なファイルのみの出力なので、Amazon S3 や Github Pages に、生成された HTML をアップロードすることでホスティング費用を劇的に... 続きを読む
お手軽に静的サイトを構築する - Qiita
後は content 以下のディレクトリにMarkdown形式でファイルを置いていったりするだけです。 Themeも用意されており、簡単に導入できます。 hugoの導入は以下が詳しいです。 Hugo | Quick Start サイトを生成する hugo コマンドを実行することで、 public 以下に生成されます。 S3に設置する public 以下に生成されたサイトを設置します。 パブリックア... 続きを読む
ブログをHugoとAmazon S3に移行しました - As a Futurist...
☰Menu ブログをHugoとAmazon S3に移行しました Sep 23, 2015 長らくVPSを使ってWordPressで運用してきたこのブログですが、WordPressの更新もきつくなってきたのでここらで静的サイトに移行しようということで、重い腰を上げてHugoに移行してみました。合わせてホスティング先をAmazon S3にしました。 移行手順 メモ程度に残しておきます。 StaticP... 続きを読む
静的なHTMLサイトをモバイル対応サイトに変換する手順 | 海外SEO情報ブログ
[レベル: 初・中・上級]英語版のGoogle公式ヘルプフォーラムでGoogle社員のZinebさんが、CMSへの移行が難しい静的なHTMLサイトをモバイルフレンドリーなサイトに変換する際に考慮すべきことをアドバイスしました。参考になるので日本語に訳して紹介します。 なおリンク先ページは日本語のものも英語のものもあります。静的サイトをモバイルフレンドリーに転換する方法Chromeのデバイスエミュレ... 続きを読む
Hubpix - GitHub リポジトリ内の画像マネージャー - Atsushi Nagase
03/13-15、同僚たちと行った開発合宿で、GitHub リポジトリ内の画像マネージャー Hubpix を作りました。 https://hubpix.herokuapp.com/ GitHub のリポジトリに Web 画面から直接画像をアップロードすることができます。 以下の様な用途に利用することを想定して開発しました。 GitHub で静的サイトのコンテンツを管理していて、その更新と共に、Gi... 続きを読む
JavaScript - milkcocoaで静的サイトにslack連携のお問い合わせフォーム - Qiita
コーポレートサイトとかにはお問い合わせのメールフォームってありますよね。よくある仕組みとしてはphpなどでメール送信する仕組みです。 milkcocoaを使うことで、静的サイトでphpは使えないサーバーに設置している場合だったりにも応用できると思います。 構成 最近ではメールよりもslackに連絡を集約している(チームも多いと思う)ので、メールフォームという感じの見せ方だけどslackに投げるよう... 続きを読む