タグ 静的サイト
人気順 5 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 ベー... 続きを読む
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... 続きを読む
【実装メモ】Gatsbyを使ってよかった・注意すべき点まとめ - コネヒト開発者ブログ
こんにちは、エンジニアの@dachi_023です。最近、MacBook Proの調子が悪いのですが修理に行くのが面倒で行っていません。放置し続けていたら直ったりしないかな・・・。 今回の記事はGatsbyで100ページ超えの静的サイトを構築したときの学びについてです。Gatsbyって実際どうなん?って思っている方に読んでもらえたら幸... 続きを読む
Netlify と PWA で JAMstack を目指す - kondoumh のブログ
静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。 PWA を作る方法は色々とありますが Vue CLI で簡単にプロジェクト生成できるのでちょっと試してみました。 プロジェクト... 続きを読む
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に投げるよう... 続きを読む
Amazon S3で限定したIPアドレスに公開する静的サイトをつくる - CrowdWorks Engineer Blog
Amazon S3のバケット(Bucket)に、アクセス元IPアドレスによるアクセスコントロールをかけられる、ってご存知でしたか? この記事では、AWSやS3のリクエスト認証の概要と、それを踏まえた「アクセス元IPアドレスによるバケットへのアクセスコントロール」の方法、その応用例を紹介します。 バケットに入れるオブジェクトの機密性によっては、デフォルトの 「認証情報をつける」以外の方法でアクセスコ... 続きを読む
s3cmdとRoute53で静的サイトをデプロイする手順メモ - mizchi's blog
2014-03-09 s3cmdとRoute53で静的サイトをデプロイする手順メモ クレカの類が復活したので、ドメイン買い直してAWSが使えるようにした。 そんでJSで作った類のアプリを静的サイトとしてホスティングしたいなーと思い、s3でサブドメインにホスティングできるまでの作業メモを残す。 ググッて出る情報が色々古くて苦労した。 アカウント登録 クラウドコンピューティング なら アマゾン ウェブ... 続きを読む
Watchman – Facebook製のファイル/フォルダ監視ツール|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ
ファイルの変更を監視して何らかの処理を行うと言ったソフトウェアは静的サイトの流行もあって幾つか出てきています。軽量なもの、プラグインで拡張できるものなど色々ですが、今回はFacebookにより開発されているWatchmanを紹介します。 特徴としてはファイルの拡張子も問わず、指定したファイル(パターン指定可)が変更されたらそれをトリガーに何らかの処理を行うと言ったソフトウェアになるようです。さっそ... 続きを読む