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
Hugo で次のページ、前のページへのリンクを表示する
ページ変数の .NextInSection や .PrevInSection を使用すると、同じセクション内の次のページ、前のページを参照することができます。 同じ階層にある「前のページ」「次のページ」へのリンクを表示する下記のテンプレートコードは、前のページへのリンクと、次のページへのリンクを表示するシンプルな例です。 テンプレートコード（抜粋） {{ with .PrevInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} {{ with .NextInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} Page 変数の .PrevInSection や .NextInSection には、同じセクショ
Hugo で独自のショートコードを作成する
Hugo で独自のショートコードを作成すると、定型の HTML コードを記事内に簡単に埋め込めるようになります。 ショートコード作成の基本ショートコードは、layouts/shortcodes ディレクトリ内に .html 拡張子のファイルとして作成します。 layouts/shortcodes/my-shortcode.html ファイル名から拡張子を除いたものが、ショートコード名となります。 上記の例の場合、my-shortcode というショートコードを作成したことになります。 記事（Markdown ファイル）の中から、下記のように呼び出すと、上記の内容がそこに展開されます。 content/page1.md ショートコードにパラメータを渡す (.Get)単純なパラメータショートコード呼び出し時に、パラメータを渡すことができます。 下記の例では、２つのパラメータ red、32px
Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています。今回は、その中でも基本となる以下の 4 つについて、とくにつまずきやすい点を中心に解説します。記事の内容に対するご質問やご指摘等はコメント欄でお待ちしております。 template partial block define template template構文は、Hugo であらかじめ定義されている内部のテンプレートファイルを読み
Pagination
Hugo supports pagination for your homepage, section pages, and taxonomies. The real power of Hugo pagination shines when combined with the where function and its SQL-like operators: first, last, and after. You can even order the content the way you’ve become used to with Hugo. Configure pagination Pagination can be configured in your site configuration: paginate default = 10. This setting can be o
静的サイトジェネレータHugoを使ったサイト構築（Taxonomy編）
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo の Taxonomy ついて。 Taxonomy （タクソノミー）とは、ざっくり言うとコンテンツをグルーピングする 分類 のことです。 Hugo ではデフォルトで tags と categories の２つの Taxonomy が定義されています。Taxonomy を使用すると Hugo は自動的に Taxonomy 自体のリスト(tags, categories, …)、各Taxonomy毎のキーのリスト、各Taxonomyに紐づくコンテンツのリストを生成します。 定義 Taxonomy 公式ドキュメントに記載されている俳優(Actor)というTaxonomyと出演作品（Content）の例をあげます。 Actor <- Taxonomy Bruce Willis <- Term The
开云平台(会员认证)-App Store
开云平台(会员认证)-App Store 错误提示 很抱歉！您访问的页面不存在... 10秒之后页面自动跳转首页 XML 地图
开云平台(会员认证)-App Store
开云平台(会员认证)-App Store 错误提示 很抱歉！您访问的页面不存在... 10秒之后页面自动跳转首页 XML 地图
Hugo Shortcodesの作り方 - SIS Lab
Hugoでは、ちょっとしたHTMLタグを記事やテンプレートに差し込みたいと思った場合、ShortCodesという便利な機能が使えます。 例えば、次のものがあります。 Twitterのツイート埋め込みSlideshare, Speakerdeckなどのスライドの埋め込みYoutubeなどの動画埋め込みAmazonアフィリエイトリンクInstagramの写真imgタグAdsenseShortcodesのメリットHTMLタグを直書きと比べて何が嬉しいかというと、次の2点が挙げられます。 変更に強い見た目がシンプル埋め込みURLでよくあるパターンが、各記事に主導でコードを埋め込んだはいいがちょっと変更を加えたいときに、1つ1つ直していかなければいけないというものです。 HTML直書きだと変更に対して明らかに弱いです。 一方、Shortcodesにしておけば、コードは変えずにレイアウトを後からいくら
はてなブログからHugoに移行。移行の際に行ったことまとめ。 · Goldstine研究所
2017年5月27日に2014年2月から約3年3ヶ月程度使ってきたはてなブログからHugoを使ったブログへ移行をした。 長らく使いやすいブログを提供してきたはてなさんにはとても感謝している。 はてなブログはとても魅力なブログプラットフォームであると感じているし、いまでもそう思うのだけれどいくつかの判断をした結果Hugoへの移行を決めた。 本記事では、移行を決めた理由や移行する際に行ったこと、Hugoの実行環境などを紹介する。 1.Hugoに移行した理由 Hugoに移行した理由というか、はてなブログから別のところに移行しようとした理由になるのだが、 端的に言うと以下のとおりだ。 常時SSL化したかった HTTP/2に対応したかった 独自ドメイン(mosuke.tech)を利用したかった Hugo以外にももちろん他のツールやサイトも検討を行った。 はてなブログPro jekyll medium
静的なHTMLジェネレータを探してみる～サービス紹介サイトとCMSの間にある溝 - Qiita
※記事を読んで、もっといい方法があったら、救ってください（切実） いま触ってみている静的HTMLジェネレータ jekyll -Rubyでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる静的htmlジェネレータ メモ：jekill 静的なHTMLジェネレータを使ってみた Hugo -Goでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる知識だけで使える静的サイトジェネレータ メモ：Hugo サイトジェネレータを使ってみた jekyllと比べて なんで、いま静的HTMLジェネレータなのか サービス・商材をWeb上で売るということ、と、CMSの関係 私は普段、自社が提供するサービスや商材を紹介するブランドサイトを運営しています。 スペック的には、レスポンシブなHTML・CSS＆JSでフロント、CMSテンプレートカスタマイズ（WordPres
Create a Theme | Hugo
The hugo new theme command will scaffold the beginnings of a new theme for you to get you on your way. If you’re creating a theme with plans to share it on the Hugo Themes website please note the following: - If using inline styles you will need to use absolute URLs, for the linked assets to be served properly, e.g. <div style="background: url('{{ "images/background.jpg" | absURL }}')"> - Make sur
nginxで /welcomeとかを静的ファイルにマッピングする - Qiita
/welcomeをwelcome.htmlにマッピング /をindex.htmlにマッピング css js 画像も配信できるように location ~ ^/(index) {}がみそ。 /は/index.htmlに変換されてもう一度評価されるため、 上を書かないと、index.html.htmlなるファイルにアクセスしようとする。 listen 80; server_name stg.mono-street.at; access_log /var/log/nginx/stg.access.log; root /home/conoha/stg/htdocs; location = / { add_header Content-type text/html; default_type text/html; index index.html; root /home/conoha/stg/htd
超軽量シンプルなCMS「Monstra」を使って、サイトを作ってみた | くろひつじのメモ帳
前回の記事でシンプルなCMSないかなーと思って色々探してみてましたが、前回の記事で紹介したものをいくつか試してみたものの、コレ！というのがなく（というか上手く設置できなかったです_(:3 ｣∠ )_）、それでも諦めずにCMSを探しまくってましたら、こんな記事を見つけまして。 軽量CMS一覧 | サイト運営の私的メモ ここで紹介されていた「Monstra」を試してみました。 最初に試したのは「ロゴが可愛かったから」です。 （過去にPerlとPHPどっち勉強しようかなーと思って名前が可愛かったからって理由でPerl勉強した人間です） 「Monstra」とは？ Monstra – The Fast, Extensible, and Easy Flat File Open Source Content Management System（公式サイト / en） 速くて軽い、フラットファイル（データ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
开云平台(会员认证)-App Store
http://blog.mismithportfolio.com/web/20160207hugomyblog
Roots.cx – Crypto is our world!
re-dzine.net situs togel online toto 2023 -
