コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
こんにちは。電通デジタルでEMをしている河内です。エンジニアにおける採用・評価、スクラムマスターなどを担当しています。今回はすこし実装プラクティスから離れた話題になりますがお付き合いくださいませ。 弊社もご多分に漏れず完全テレワークを実施しており、かれこれ4か月が経ちます。その中で見えてきた課題とエンジニアチームとしてどう対峙したか、そしてそこで得た気づきを綴っていきたいと思います。この内容は、過去に開催したオンラインイベントでお話した内容になります。 テレワーク環境で私たちのエンジニア部門で急務と感じた課題テレワークが開始された2月後半、プログラミングやシステム開発プロジェクトを生業とする私たちの部では「リモート？全然OK。支障無いっす。」とタカを括っておりました。しかし開始されて間もなく、やっぱり慣れていない事が判明・・・。テレワークを経験されている読者の多くの方が感じていることと同様
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
Modern Web Development on the JAMstack を読んでまとめた - console.lealog();
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
このブログがFediverseに対応しました
Twitter が日々壊れゆくなか、周りの人が Misskey や Mastodon や Threads に住居を移すようになりました。 私も移住先を検討してみたものの、移住先のプラットフォームだっていつまで持つか分からないし、複数のプラットフォームにアウトプットを分散させるのも良くないなぁと思い、 最終的にマイクロブログがだめならブログでいいじゃんと自分を納得させるに至りました。 せっかくなら ActivityPub に対応して、Fediverse の人からリモートフォローできるようにして、反応が見れたら嬉しいよねということで色々と調べて対応させることができました。 本ブログは「@blog.tyage.net@blog.tyage.net」でリモートフォローすることが可能です。 このブログは hugo で生成しており、静的ファイルのみ配信しています。 それは変えたくなかったため、Acti
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニアHub｜Webエンジニアのキャリアを考える！
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO
最近話題のVercelを試してみました。競合のNetlifyと同様に、ビルドとホスティング他をまとめてやってくれます。Netlifyと比べて1人で開発をするならほぼフル機能が使えますし、無料プランのままでも100回/日までデプロイできるのが利点です。 前提 Next.jsと親和性の高いVercelですが、今回アプリはGatsby + Contentfulで構築しています。 詳しくは過去に書いた記事がありますので、下記の「1. Contentfulの準備」「2. Gatsbyアプリの立ち上げ」を参考にしてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Githubリポジトリを作成し、masterにソースコードをプッシュしておきます。 Vercelにアプリをデプロイする https://vercel.comにアクセスし、「Sta
先日、静的サイトに特化した全文検索ライブラリとして「Pagefind」というソフトウェアがあることを、下記の記事が話題になったことで知りました。 参考：静的サイトに特化した検索ライブラリ Pagefind を試す | grip on minds 実は、いまお読みのPublickeyはまさに、Movable TypeというCMSを用いて生成された静的なWebサイトです。現在、PublickeyではGoogleが提供している「Googleカスタム検索エンジン」を全文検索エンジンとして採用しています（右上の虫眼鏡アイコンから呼び出せます）。 しかしPublickeyでは以前からGoogleに依存しない、自前の全文検索エンジンを持てないかと模索しており、まさにPagefindは私が探し求めていたソフトウェアだったと言えます。 そこでさっそくPagefindがPublickeyに導入できるかどうか、
yyyy-MM-dd HH:mm:ssのような書式ではなく2006-01-02 15:04:05である。この数値でなければ正しく表示されない。は？ なにこれ？ ひどくない？ 手順 Go言語をインストールする hugoをインストールする プロジェクト作成＆pulpテーマ適用 以下のように設定ファイルを編集する コード 日付の表示形式をyyyy-MM-ddに変更したい。以下のようにする。 config.toml [params] listPageDateFormat = "2006-01-02 15:04:05" singlePageDateFormat = "2006-01-02 15:04:05" 具体的な日時に見えるでしょ？ これ、フォーマットなんだぜ……。 ハァ？ と思うでよね？ ふつうyyyy-MM-dd HH:mm:ssとか%Y-%m-%d %H:%M:%Sとか、そーゆー感じなのに
最近流行りのAstroフレームワークで、WordPressの静的Headless化がかなりお手軽にできたのでまとめてみました。 開発環境 Astro 2.0 WordPress 6.1.1 Local node 18.12.1 Mac OS 13.2(Ventura) Visual Studio Code(Astroプラグイン入り） Astroとは？ Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。 (公式ドキュメントより) LocalでWordPressを構築 まずLocalを使って、ローカル環境にWordPressを構築します。 サイト名 Astro Blog（お好みで） サイトドメイン astro-blog.local WordPressの設定 WP AdminでWordPressのダッシュボードを立ち上げ、いくつかの
自分のウェブサイト( http://www.3qe.us/ )をCloudFront+S3構成からCloudflareを使った構成に乗り換えたので、ひっかかった点やつまづいた点などをメモしておく。 結論としては普通に移行できたが、メールとの兼ね合いでDNSまわりでちょっと配慮が必要な部分があるかも、といった具合。試したいときは全部読んでからチャレンジしよう。 ウェブサイトの静的配信にCloudFrontとS3を使っていた モチベーション: ALBのコストが高い Cloudflare 構成 Cloudflare Pages Cloudflare+ Denoflare + R2 修正 R2のstatic hosting機能を直接使う 手順 Webサイト追加 R2バケット作成 APIトークン作成 Denoflareでworkerをデプロイする 完了 まとめ オチ 参考文献 ウェブサイトの静的配信
静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ
最近ではWebサイトを構築する際にWordPressなどのCMS（コンテンツ管理システム）を利用することが多いが、今日でも静的なHTMLファイルを使ったサイト構築には多くのメリットがある。今回は、こうしたHTMLファイルベースのサイト構築を支援するHTMLファイル生成ツール「Hugo」を紹介する。 静的ファイルでサイトを作るための支援ツール「Hugo」 コンテンツの作成や編集の容易さから、昨今ではWebサイトを構築する際にCMSを利用する例が多い。ただ、CMSを使用するにはCMS自体のインストールや設定、データベースの準備などが必要であるため、更新頻度の低いサイトやページ数の少ないサイトでは静的なHTMLファイルを使って構築したほうがコストが低くなる場合がある。 とはいえ、HTMLファイルをいちいち手動で作成するのは楽ではない。そのため、HTMLファイルを半自動生成するようなツールが数多く
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ
Astro
One frontend architecture with endless possibilities Step into the future with Islands — Astro's next-gen frontend architecture. Supercharge your development with automatic JS-to-HTML streaming and a beloved developer experience. Content-first websites Fetch data from your CMS or work locally with type-safe Markdown and MDX APIs. Astro automatically removes unused JavaScript and renders to HTML fo
NextのJSぜんぶ抜く
サイトパフォーマンスを最適化するため、export 時に Next.js のランタイムを全部抜いた。 どういうことか？ このブログは静的書き出しをしているので、ただの静的なドキュメントといえる。だが Next にしろ Nuxt にしろ、書き出したページをブラウザで読み込むと JS アプリケーションとして振る舞うために Hydration 処理が行われる。これをするために JS モジュールの読み込みや Scripting 処理の負荷が発生する。 書き出された HTML には Hydration 処理用に JS モジュールやシリアライズされた state が挿入されている ピュア HTML を目指して しかしこのブログはドキュメントでありアプリケーションではないので、ほぼ JS を動かす必要はない。state は不要だし、client-side routing も要らない（先読みに必要かもだが
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
κeenです。 GitHub Pagesからこんにちは。 私はこのGitHub Pagesのブログの他にGitLab Pagesのブログも持ってるんですが、それが使いやすいので宣伝します。 GitLab Pagesを使うと Markdownでブログがかける Markdownのまま git push で記事の公開ができる コンテンツの管理が(GitHub Pagesより)楽 サイトでHTMLやJavaScriptが使い放題 になります。 JavaScriptが自由に使えるということは私のようにreveal.jsなどのスライドエンジンを使ってMarkdownでスライドを書いて公開することもできます。 ブログに自由度が欲しいという方におすすめです。 GitHub PagesとGitLab Pages GitHub PagesとGitLab Pagesはだいたい似たようなことができます。 ユーザの
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
ゲーム内お知らせをHugo+Netlify CMS+CircleCIで作りました - KAYAC engineers' blog
鎌倉は寒いです。みなさんはいかがですか。ソーシャルゲーム事業部のゲーム技研チームの谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの10日目の記事です。9日目はデーモン管理をdaemontoolsからsystemdに移行させるでした。 ゲーム内お知らせとは みなさんは、スマートフォンのゲームをされますか。ええ、そこのあなたはよくされる。しかし、そちらの方はあんまりされない。なるほどなるほど。 では分かる人にはおさらいとして、あまりピンとこない方にはそんなことがあるのか〜となってもらうために説明させていただきます。 我々カヤックでゲームを運営している人々が「お知らせ」を指した場合、ゲーム内のある機能を示しています。他のゲームではニュースなどとも呼ばれています。 カヤックで作っているゲーム「ぼくらの甲子園！ポケット」(以下ぼく
プロジェクトドキュメント構築向け静的サイトジェネレータ『MkDocs』及び『Material for MkDocs』の個人的導入＆設定まとめ | DevelopersIO
プロジェクトドキュメント構築向け静的サイトジェネレータ『MkDocs』及び『Material for MkDocs』の個人的導入＆設定まとめ 直近携わっているプロダクトで「ユーザーガイド」的なドキュメントを作る機会があり、暫く前に幾つか見繕ってみた結果「MkDocs」というツールを選定して環境を作成＆整備して来ました。個人的にこのツールは使い勝手がとても良いと思っており、継続して使って来ていました。 当エントリでは今後の備忘録としてMkDocsの基本的な導入・設定方法と、そのMkDocsで適用させたスタイル「Material for MkDocs」をここまで使ってきた中での個人的Tipsなどをまとめておきたいと思います。 MkDocs Material for MkDocs - Material for MkDocs 目次 MkDocsとは MkDocsのインストール 基本操作 各種設定・
What is Docusaurus ? Build optimized websites quickly, focus on your content - Docusaurus Keytar Docusaurus とは "最適化されたウェブサイトを迅速に構築し，本質に集中させる" というスローガンのもと Facebook 傘下のチームが開発している 静的サイトジェネレータです．特徴として，次の五つが挙げられています． Powered by Markdown => MDX Built Using React Content Search Ready for Translations Document Versioning ※ただし，まだまだアルファなので４，５については工事が進行中 追記：2021 年 5 月 12 日に β 版がリリースされ，2022/02/23 現在では beta.15
Cloudflare Pages
Install Cloudflare PagesWhere do you want to install Cloudflare Pages?github-usernameInstall & Authorize Cloudflare PagesInstall & AuthorizeCancel Frontend developers want to build fast and beautiful sites, not play system integrator: bogged down by configuring build systems, setting up environments, and keeping production up to date. With Pages, you can connect your GitHub or GitLab account. Afte
こんにちは、エンジニアの@dachi_023です。最近、MacBook Proの調子が悪いのですが修理に行くのが面倒で行っていません。放置し続けていたら直ったりしないかな・・・。 今回の記事はGatsbyで100ページ超えの静的サイトを構築したときの学びについてです。Gatsbyって実際どうなん？って思っている方に読んでもらえたら幸いです。 つくったもの ママリユーザーが本当に使ってよかったと思う商品・サービスの口コミを元に、自分と家族に合うものを探すことができる「ママリ口コミ大賞」の2019年 秋版のサイトをGatsbyで実装しました。妊娠中の方、育児中の方におすすめしたいサイトです。私も実際つかってみて、「これ、子どもが産まれた時にあったらもっと便利だったな〜！」って毎回思っています。 award.mamari.jp これまでの技術選定 ママリ口コミ大賞は今回で3回目なのですが、毎回使
社内でおすすめのWEBフレームワーク・ツールを教えてくださいとゆるく聞いたところこちらのツールを教えてもらったので触ってみました。 HUGOとは HUGOは静的なWebサイトを爆速で作成できるツールで、Goで書かれています。 (Gopherかわいい) The world’s fastest framework for building websites Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. 公式ページ 訳：静的WEBサイトが楽しくカンタンに作れちゃう世界最速のフレームワークだぜ！ 良さそうですね！早速使ってみましょう。 インストール こ
はじめに はじめまして！株式会社Rivine のつかもとです！ この度 Zenn 初投稿 & 弊社 Zenn Publication の初記事となります。どうぞお手柔らかに・・ 2022 年 11 月より 株式会社Rivine を設立し、エンジニア＆取締役として働いております。 「テクノロジーで、もっと生きやすい世の中へ」をモットーに主に受託開発と開発支援（SES / ラボ型開発）を行っております。 Rivine と書いて、リヴァインと読みます。名前だけでも覚えて帰ってください・・🙏 さて本題ですが、弊社は昨年 11 月に法人設立後、早くも今年の 4 月に自社ホームページをリニューアルしました。今回は主にリニューアルの概要について、少しお話しをさせていただきます。 ※ 本記事タイトルの「ほぼ0円！」という表現について ※ ほぼ0 円 や ほぼ無料 という表現には「ドメインの更新料」は含ん
本格的にブログを作るならWordPress、というのが合言葉になりつつありますが、みなさんWordPress好きですか？わたしはめっちゃ嫌いです。理由は以下の通り。 使いづらい（管理画面わけわかめ、重い、定期アップデートが面倒） コスパが悪い（無料テンプレートが雑魚、有料コンテンツが多い） 自由度が大して高くない（最新サービスの反映が遅い、フォークできない）かと言ってフルスクラッチでブログを作るのは悪手です。ページを増やすたびにhtmlファイルを作って、記事一覧をひとつずつずらして...この面倒くさい作業をぜんぶやってくれるのがWordPressや静的サイトジェネレーターです。 （追記）フロントエンドエンジニアやWebデザイナーの方でもWordPressやめて静的サイトジェネレーターに移行したよ！という声も多く。誰でも簡単に便利に、が謳い文句のWordPressの便利さ簡単さが何回使っても
当サイトをFediverseに対応させました。 @songmu.jp@songmu.jp でMastodonなどでリモートフォローできます。 やったことは、 このブログがFediverseに対応しました というtyageさんのエントリーをそのままなぞっただけです。このエントリーはh-cardのサイトトップへの掲出に関する説明が書き漏れていそうでしたが、それも実施しました。 当サイトは静的サイトであり、付随機能は外部サービスに頼りたいと考えている。例えば、コメント機能はDisqusを使っている。Fediverseに関しても何かそういうサービスがないかと思っていたが、Bridge Fedというサービスがあり、上記のエントリー内で懇切丁寧に解説されていたので導入は比較的簡単で、作業時間は小一時間でできた。大まかな手順は以下。 Bridgy Fed というサービスを利用してサイトをFedivers
GitHub ActionsでビルドしたドキュメントをGitHub Pagesで表示する - 山ｐの楽しいお勉強生活
まとめ GitHub Pagesは「GitHub Enterprise Cloud 」プランの場合privateで使用する事ができる 企業でお金払っていてオンプレのGitHubでなければこのプランのはず 追記: 有料プランでもTeamプランというのがありました。こちらではアクセス制御はできません Pricing · Plans for every developer · GitHub GitHub ActionsでbuildしたドキュメントをGitHub Pagesに簡単に反映可能 peaceiris/actions-gh-pagesというGitHub Actionsが便利すぎる ほぼ無料 はじめに GitHub Pagesの存在は知っていてもprivateリポジトリで使用できないと思っている方は多いと思いますが、2021/01/21より「GitHub Enterprise Cloud 」
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
登録不要で完全無料！ブラウザだけで完結する静的サイトジェネレータ「T3MPL」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー
静的サイトジェネレータ「Astro 2.1」リリース。画像の最適化、Markdocのサポート、ファイル変更検知し型チェックなど新機能
静的サイトジェネレータ「Astro 2.1」リリース。画像の最適化、Markdocのサポート、ファイル変更検知し型チェックなど新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.1」が正式にリリースされました。 Astro 2.1 is here with a brand new <Image> component! Check out the full release:https://t.co/tFxjU86eVR — Astro (@astrodotbuild) March 8, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLに
はてなブログで運用してたブログ「ゆーすけべー日記」をGitHub Pagesへ移行した。ドメインも昔使ってたyusukebe.comにした。 静的ファイルのジェネレーターとしてHugoを使ってる。 結局、Hugoいじってる https://t.co/NAKS6k3W1M — Yusuke Wada (@yusukebe) January 15, 2020 今まで使ってた、はてなブログに大きな不満があったわけじゃなかったが、気分一新しようとしていた。ちなみに上記のツイートにあるようにMediumとnoteを試してみたが、今回のユースケースには合わなかった。 というのもコードを貼り付けたいという重要な要件に対して、 Medium Markdownに対応している なので``` と書きはじめてコードを貼り付けることができる ただWYSIWYGすぎて書いた瞬間からHTMLに変換されるのが使いにくかっ
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればGulpやWebpack等の選択肢もありましたが、Viteの設定が非常に簡便であるという噂を聞いたので試してみることにしました。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 各ツールの役割 MicroCMS：ヘッドレスCMS。コンテンツのデータを登録できる、APIを提供している。 11ty：ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターで、HTMLを出力することができる。複数のテンプレート形式に対応している
The No-Hassle CMS for GitHub Tired of juggling Git and YAML to update your Next.js, Astro, Hugo or Nuxt website? Make it easy on you and your team, get a user-friendly CMS running straight on top of GitHub. Packed with features... Configurable Customize content types, views, search, and more. Visual editor Rich-text, syntax highlighting, and more. Media manager Drag and drop upload, multi-file sel
GitHub - getmeli/meli: Platform for deploying static sites and frontend applications easily. Automatic SSL, deploy previews, reverse proxy, and more.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テレワークで始めたドキュメント駆動業務｜Dentsu Digital Tech Blog
Astroで始める爆速個人サイト開発
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
静的サイトに特化した全文検索ライブラリ「Pagefind」、さくらのレンタルサーバで動かしてみた
hugoの日付書式がクソすぎる（悪いのはgo言語です） - やってみる
AstroでWordPressを爆速Headless化してみる - Qiita
CloudFront+S3構成だった自分のサイトをCloudflare+R2に移行した - Lambdaカクテル
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
BlogやるならGitLab Pagesがおすすめ | κeenのHappy Hacκing Blog
ドキュメント作成ツールの決定版！Markdown + React の体験を Docusaurus で
【実装メモ】Gatsbyを使ってよかった・注意すべき点まとめ - コネヒト開発者ブログ
【HUGO】爆速で静的Webページ作成してFirebaseにデプロイしてみた | DevelopersIO
【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル
WordPressが使いにくいなら静的サイトジェネレーターを使えばいいじゃない｜meow｜note
静的サイトをFediverseに対応させる | おそらくはそれさえも平凡な日々
はてなブログからGitHub Pages+Hugoへ移行した - ゆーすけべー日記
MicroCMSとViteで作るかんたん静的サイト | DevelopersIO
Pages CMS: The No-Hassle CMS for GitHub
zenn.dev/k2mashu
mikiki.tokyo.jp
yularihappysmile.com
brutus.jp
news.yahoo.co.jp
neurosamasama.hatenadiary.jp