静的サイトジェネレータ

こんにちは、フロントエンドエンジニアの柳田です。 現在、チーム内でドキュメントを作成する機会が多くなってきました。 社内では、様々な方法でドキュメントを作成しているのですが、そのひとつの方法として、静的サイトジェネレータ（Static Site Generator：SSG）があります。 今回は、ドキュメント作成にあたって自分が試してみたSSGをいくつかご紹介したいと思います。 静的サイトジェネレータ（SSG）とは？ 静的サイトジェネレータとは、入力ファイルから簡単に静的ページを生成してくれるツールのことです。 有名なものだと、Next.jsやGatsby、Nuxtがありますね。 実際に表示に利…

こんにちは。今回は静的サイトの作り方について書いてみます。 フリー張り紙素材 はりがみやも静的サイトで、基本的にはこの記事と同じようなやり方で作られています。 【注意】 これを書いている人は趣味レベルな上、「なんだかわからんが動いたからヨシ！」という人間です。ベストプラクティスとは程遠い内容かもしれません。 とはいえ「ちゃんとやる」「完璧にやる」といろいろとハードルが高いですし。 とりあえず動かしてみたい、作ってみたいという方に読んでいただければ。 想定している読者 前書き 静的サイトとは？ 動的サイトとは？ 静的サイト作成の流れ 静的サイトジェネレーター 本記事のゴール 完成イメージ 環境の…

静的サイトジェネレータPelicanでAsciiDocを使いたかったが…。

静的サイトジェネレータPelicanでAsciiDocを使いたい。

Next.js 13.4からApp RouterがStableになりました。 普段、Next.jsを静的サイトジェネレータとして使っている自分としては、App Routerの恩恵は少ないような気がしていたのですが、App Routeをつかっても静的書き出しができることを知ったので、これからは時代に合わせて、App Routerを活用していこうと思います。個人的に、styled-componentsを使って実装することが多いので、styled-componentsの導入方法も調べます。 静的書き出し（Static Exports） next exportコマンドがなくなり、next.config…

2つの相対パスがあって混乱したのでまとめた。

page.html, section.htmlではルート相対パスを使おう。もしファイル相対パスにするとURL末尾に/をつけたら参照できなくなってしまう。

index.htmlを作ったら、次にやってみること。ここではaboutページを追加してみる。

config.tomlに書いたタイトル、説明、著者名をのせる。

今週のお題「何して遊ぶ？」 私はこのゴールデンウィークに新しいブログを作ってみました。今回は、いつも使っているはてなブログではなく、静的サイトジェネレータのHugoを使って開設したため、手間はかかりましたが、よりシンプルなブログができました。 Hugoで作った新ブログこのブログのコンセプトは、「中国語学習応援サイト」です。中国語の知識をコンパクトにまとめているので、「折りたたみ中国語」と名付けました。ホスティングサービスにはGoogleのFirebaseを利用していますが、GitHubやGitLab経由ではなく、ローカルでビルド（PCで公開用ファイルを生成）してからFirebaseにデプロイ（…

ざっくり。

Twitter が API 有料化などどんどん邪悪になっていくので、将来的に Markdown で日記をつけることを見越して、Twitter 投稿内容を Markdown でも書いてみる練習。 読んだもの Science "Watching biomolecules stride in real time" MINFLUX, MINSTED という超解像手法を知った。とりさんとしては、electron tomography よりこういうやつのほうが萌える。 Tomography は分解能はイマイチなくせに生で見られないし中途半端な印象。 ASCII 「ロードマップでわかる! 当世プロセッサー事…

やっている技術書の積み上げを消化する。 オライリー社より出ているReactハンズオン第2版の12章3~4節。 ここより前は既にやっているので割愛。 しかしひとまず12章全体の概要を自分用に要約しておく。 アイソモーフィックとユニバーサル Reactはアプリケーションのビューを提供するライブラリのためクライアントサイドに寄っている。しかし昨今のwebアプリケーションはバックエンドで何かしらの処理を行うのがほとんど。 そこで出てくるのがアイソモーフィックという概念。 アイソモーフィックとは「複数のプラットフォームでレンダリング可能なアプリケーション」のこと。 ユニバーサルと近い概念だが、あちらは「…

研究開発を担当している市岡です。この度、芝 海人さんに長期インターンに来ていただき、会社が技術力向上の１つとして推奨しているCTF活動について体験頂きました。 今回は主に「チーム紹介用のWebサイト作り」と「勉強会用のWriteup」の作成を実施頂きました。 また、「勉強会用のWriteup」を使って、実際に勉強会を実施頂きました。 CTF勉強会の様子 芝さんに体験してみた感想をいただきましたのでご紹介します。 芝さんの体験記 はじめまして。この度、エヌ・エフ・ラボラトリーズで長期インターンに取り組みました芝 (@mc4nf)と申します。 インターンでは、主に以下の業務に取り組みました。 Te…

プログラミングの勉強をしていると、未知の言語、ライブラリ、フレームワークが出てくる。 うんざりするくらい次から次へと出てくる。 すべてやってられない 例えば、Webのフロントエンドの勉強をしようとHTML、CSS、JavaScriptに取り組み出すとします。 すると、本に「サーバーもある程度知っておいたほうがいいよ」的なことが書いてある。 「そうかサーバーも勉強してみよう」と思い調べてみると、Node.jsが出てくる。次は、npmが出てくる。そして、Git、Github、React、Vue、Tailwind、TypeScript、Next.js・・・ これらをすべてやっている余裕はないと気づき…

昨年末にRubyコミッターの柴田さんが、るりまの更新作業を一緒にやれる人を募られていて、やりたいです！！とご連絡し、今年の1月に初めてるりまに修正のPRを出しました。 私が修正をしたのはRubyのインストールページのパッケージ管理システムの箇所です。 www.ruby-lang.org 英語版のサイトの内容と異なる部分があったため、英語版に合わせて日本語版の修正を行いました。 2月も継続して取り組みたかったのですが、忙しさのあまり手がつけられず・・・3月は改めて更新作業もやりたいと思っています！ たくさん助けていただいてPRが出せた いざるりまの更新作業に取り組むと、やり方がわからないことがた…