静的サイトジェネレータ

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

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

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

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

はてなブログをちゃんと使っていなかったのでよく知らなかったんだけど、Wordpressなら一記事ごとに【下書き】か【公開状態】の設定ができるのだけど、はてなブログは最新の書いている記事の入力フォームの状態を保つ機能しかないらしい。 そして複数のページで開いているとなにかの拍子に白紙で上書きされてしまうことがあるらしい。はてなdiary時代ならそういう設計でも仕方なかったのかもしれないけど、まさか今の時代にそんな設計のままだとは思っていなかった。 大した量を書いていなかったのでまた書けばいいだけなんだけど、ちょっとこのままはてなブログを使うかどうかは考え直したほうがいいかもしれない。最近は静的サ…

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末尾に/をつけたら参照できなくなってしまう。

zolaは特定のディレクトリ名やファイル名に役割が与えられている。これを知ることで、どのようにサイトを作ればよいか理解しやすくなる。

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

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

ざっくり。

始めに jampackとは？ 特徴 使い方 結果 最後に 始めに 今回は jampack というツールがあることを知り、興味があったので早速私の個人サイトに適用して実際に使ってみたので所感を記事にしたいと思います！ jampackのリポジトリとドキュメントは以下になります。 【リポジトリ】 github.com 【ドキュメント】 jampack.divriots.com jampackとは？ jampackは静的サイトジェネレータ等で生成したHTML、CSS、JavaScript、画像などのファイルを最適化してくれるCLIツールです。 ビルド後に出力された静的なファイルを元に最適化を行ってくれ…

やっている技術書の積み上げを消化する。 オライリー社より出ている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・・・ これらをすべてやっている余裕はないと気づき…