Astro(Static Site Genarator) 好きなフレームワークで高速WEBサイト構築 | Reffect
高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので最新のバージョンは 2023 年 12 月 5 日にリリースされた Astro4.0 です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astro ですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発されています。
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
ブログ・サイトの管理をWordPressからHugoに移行したら爆速で快適
このブログは昨年8月、事務所の公式サイトは今年7月に、WordPressからHugoに移行しました。 正直、もっと早くHugoに移行しておけばよかった、と思えるくらい快適です。 ブログと言えばWordPress、と言われるほど、WordPressは人気の高いCMS（コンテンツ管理システム、Content Management System）です。 このブログや事務所サイトではPVが増えても安心のエックスサーバーを以前から利用していますが、エックスサーバーのような良心的なレンタルサーバー運営会社であれば、1クリックでWordPressをインストールできる便利なサービスもあります。 導入も簡単、ブログやウェブサイト管理に必要な機能が充実しているということでWordPressが流行するのは当然です。 実際、2019.6の調査「Shopifyが増加 - 6月CMSシェア」によると、WordPres
【HUGO】爆速で静的Webページ作成してFirebaseにデプロイしてみた | DevelopersIO
社内でおすすめの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サイトが楽しくカンタンに作れちゃう世界最速のフレームワークだぜ！ 良さそうですね！早速使ってみましょう。 インストール こ
Webサイトを静的サイトにしました : hugo による静的サイトの作成 (1/3) - プログラマーのメモ書き
個人事業主としての森ソフトのサイトは、さくらインターネットのレンタルサーバー上で Joomla! を使って動かしていました。 当初は、ブログ代わりの技術メモとしていろんなものを載せるために使っていました。ちなみに、Wordpressを選ばなかったのは、当時のさくらのレンサバのDBのバージョンがWordpressのサポート対象外だったためなのと、知り合いがJoomla!使っていたのが理由でした。 ちなみに、あれこれやってた時の記事がまだ残ってました (^^; 思い出にリンク張っときます。 でも、一昨年から技術メモの部分はブログとして、はてなブログに移行したので、そんなに大そうな頻度で更新することもなくなりました。 となってくると気になってくるのがサーバー代です（サイト分だけでなくバックアップサーバーも立ち上げているので２台の料金がかかっています）。 昨今、あれこれ見てると静的サイトホスティン
Hugo で静的なサイト・ブログを構築しよう - Qiita
この記事について この記事は Hugo でブログを始めようとしている方へ向けた Hugo 入門記事となっており、Hugo による静的なブログの構築・運用方法 を簡単にですが紹介します。 Hugo の Awesome は以下をどうぞ。 Awesome Hugo - 有用なリンクまとめ - Qiita 動的サイトから静的サイトへ WordPress で構築する、というのが長らくブログ運用の主流でした。もちろん現在も多くのサイトが WordPress によって運用されていますが、最近では「 静的サイト 」という選択肢も広まってきています。(調査したわけではありませんがこの分野に関心がある人の中で実感している人は多いと思います。) 静的サイトとは HTML, CSS, JavaScript のみで構成 サーバーサイドの処理を PHP で書いたりする、というような必要はありません。私たちが気にしなけ
Hugoを使ってAmazon S3でウェブサイトを構築してみた | DevelopersIO
こんにちわ。大阪のガノタです。 Static Site GeneratorであるHugoを使って、S3でウェブサイトを作成する機会がありましたので、ご紹介します。 Hugoとは Hugoとは、Static Site Generatorの１つです。Static Site Generatorとは、記事用のテンプレートファイルを元にHTMLファイルを生成してくれるツールです。 HTMLファイルなので、S3やCloudFrontと組み合わせてサイトを構成することが可能です。また、ローカルにあるPCで記事を書いてHTMLファイルを生成するので、コンテンツ管理用のサーバが不要になります。 Hugoの詳細については、公式ページを見て頂ければと思います。 Hugo :: A fast and modern static website engine Hugoのインストール 普段Macを利用しているので、M
S3とLambdaを使ってHugoのWebサイトホスティングをやってみる - Qiita
この投稿は今年もやるよ！AWS Lambda縛り Advent Calendar 2015の12/21日分の投稿になります。 最近みた記事で以下のようにHugoで作ったMarkdownをS3に配置することでLambdaを実行し、ビルド後、S3に再配置して自動でWebサイトのホスティングをするというのを見て、おもしろそうだったので実際にやってみました。 How to host Hugo static website generator on AWS Lambda なお、本記事では上記CloudFrontとRoute53の設定部分については記載しておりません。 Hugoのビルド?からS3への配置までをCircleCIでやるという記事を見たことがあった気がするのですが、CircleCIの部分をLambdaでやろうという記事がこちらになるかと思います。 ローカル環境でHugoの開発環境を構築し、サ
CMSから静的サイトジェネレータによる運用に切り替えるのは、まだまだ世間受けしにくいという話
以前書いた「デザイナーも静的サイトジェネレーターが使えた方がよいのではないか」の記事が最近よく見られているので、追い記事を書いてみようかと思います。 静的サイトジェネレーターはお客様サイトに使えるのか 前回記事で紹介したように、このブログは「middleman」というツールを使って静的サイトとして運用しています。なので、ファイルも HTML / CSS / JavaScript のみとシンプルです。 静的サイトのメリットは、CMS で必要な DB や サーバ側のシステムがいらず、セキュリティリスクが少ないことと、実体のあるファイルを読み込むため動的サイトよりも早いことです。 また、一定のスキルと知識があってターミナルを使うことに抵抗のない Web デザイナーさんであれば、静的サイトを構築する様々な便利ツールがあるので難しくはありません。 ただこれだと、お客様に静的サイトジェネレーターなどを
静的サイトジェネレータHugoを使ったサイト構築（レイアウト編２）
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo のテンプレートの書き方について。 Hugo では、テンプレートの記述に Go 言語の html/template ライブラリを使用しています。 その文法や変数の扱い方等を簡単にご説明したいと思います。 基本文法 テンプレートで変数や関数を使用するときは、中括弧（波括弧）２つで括ります。括弧内で改行してはいけません。 {{ }} 引数はスペースで区切ります {{ printf "%#v" . }} 関数や変数は . を使用してアクセスします .Params.bar コメントは /* */ で括ります。コメント内は改行しても構いません。 {{/* コメント */}} 変数 変数は、前述のように .名前 という形式で記述します。 .Title 前回ご紹介したように Hugo ではページの種類によっ
静的サイトジェネレータ「Hugo」について - UUUMエンジニアブログ
こんにちは、村上です。 今回紹介するHugoは静的サイトジェネレータ(static site generator)と呼ばれるフレームワークの一種です。 静的サイトジェネレータとは 1リクエスト毎にサーバサイドスクリプト(ruby/perl/phpなど)でHTMLを生成する仕組みを動的サイトと呼びますが、 サーバサイドスクリプトを介さずに予め設置されたHTMLをWebサーバが直接クライアントへ返却する仕組みを静的サイトと呼びます。 一般的に、ホームページと呼ばれるものですね。 昔からHTMLなどをFTPなどでアップロードし、無料で使えるレンタルサーバのサービスが存在しています。 静的サイトジェネレータのメリット テンプレートエンジンによりヘッダー/フッターなどの共通部分をコンポーネント化出来るため、HTMLをのそまま記述するよりも効率が上がる CMSと違いDBとサーバサイドスクリプトが存在し
Jekyll製ウェブサイトに簡易検索機能を実装する — Genji App Blog
はじめに Jekyllは静的ウェブサイト生成システムであり、検索機能は付いていない。 プラグインで検索機能を付けられるのかもしれないが、GitHub Pages上でビルド・ホストをする場合は使えないので、ちゃんと探していない。かんたんにサイト内検索を実現するならGoogleのカスタム検索を使用する方法もあるが、Googleには頼りたくないので今回は自分で実装した。 こんなの。 キィワードを入力してエンターで検索実行。キィワードを[]（角括弧）でくくるとそれをブログ記事に付けられたタグとして認識する。たとえば[jekyll] 検索とすると、「jekyll」タグを付けられたもの、かつ本文に「検索」を含むブログ記事がヒットする。 コンセプト 基本コンセプトは「simple jekyll searching - alex pearce」を参考にした。 かいつまんで言えば、ブログ記事の情報（タイトル
nanocをHerokuで使ってみる - SKKTM Lab Blog
久しぶりの記事を書いてみる。 nanocというRubyで書かれたCMSを見つけたので使ってみた。静的Webサイトを生成するシステムで、Nestaと同じようにDBを使わないのでお手軽サイトには良さそうである。ドキュメントも結構整備されているので、自分で手を入れるのもある程度できそうな感じだ。これで静的なWebサイトを生成し、Herokuで公開できるかを実験してみた。結果、上手く行ったのでその過程を記録しておく。 ちなみに、nanocのサイトを見ると、類似のシステムは結構あるみたいなので、後で調べてみよう。 まず、インストール。 > gem install nanoc > gem install kramdown > gem install adsf 本家サイトにあるチュートリアルにしたがって使ってみる。 > nanoc create_site tutorial > cd tutorial >
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hugoでサイトを作ってみて感じた良い点・悪い点 : nyagosu hanten
jpico.info × 歩み284. Webサイトは単純明快がいい
Not Found : Watanabe-Denki Inc.
re-dzine.net situs togel online toto 2023 -
歩み286. ノートを模したデザインのサイトにした | jpico
歩み285. いつも２５手先を考える | jpico
歩み283. Solarizedで目に優しいサイトにした | jpico