hakyll を使用して静的サイトを構築する_html/css_WEB-ITnose

hakyll とは

hakyll は、静的サイトを構築するための jekyll に似たツールです

hakyll と jekyll の違い

hakyll は、他のほとんどの同様のツール、github のデフォルトと比較して優れた柔軟性を持っています 静的 Web ページ ジェネレーター jekyll は、 jekyll を使用する場合は、その規則に従う必要があります。たとえば、ブログ投稿は yy-mm-dd で始まるファイル名で ~posts~/ フォルダーに保存する必要があります。柔軟性、hakyll の哲学は、ユーザーがコンテンツを作成し、hakyll がこれらのコンテンツをさまざまなプレゼンテーション形式に変換する責任があるということです。このように、生成されるサイト形式にはブログに限定されず、スライドや PDF などのコンテンツも含めることができます。 hakyll のインストールと基本的な使い方

hakyll は非常に高度な Haskell 言語で書かれているため、hakyll を使用するには Haskell 環境が必要です。Mac でのインストールは非常に簡単です

  brew install ghc cabal-install

インストールが完了したら、$HOME/ を忘れずに入れてください。 .cabal/ bin が $PATH に追加されるので、新しいサイトを作成できます

  $ hakyll-init my-site  $ cd my-site  $ ghc --make -threaded site.hs  $ ./site build  $ ./site watch

http://localhost:8000/ を開くと、デフォルトで生成されたサイトが表示されます。jekyll のように hakyll を使用したい場合は、そのまま行ってください。ここで、投稿フォルダーにブログ投稿を書くだけです

hakyll の高度な機能

hakyll の強力で柔軟な構成を体験したい場合は、以下をお読みください

hakyll の仕組み

上記の方法で hakyll を初期化すると、サイトのファイル構造は

  .  ├── README.md  ├── about.rst  ├── contact.markdown  ├── css  │   └── default.scss  ├── images  │   └── haskell-logo.png  ├── index.html  ├── posts  │   └── use-hakyll-to-build-static-website.org  ├── site  ├── site.hi  ├── site.hs  ├── site.o  └── templates      ├── archive.html      ├── default.html      ├── post-list.html      └── post.html

に似ています。ただし、サイトの先頭にあるいくつかのファイルを除きます (サイトはコンパイルされたバイナリ ファイルで、サイズは約 100 MB です。次のファイルは含めないでください)。バージョン管理内にあります!)、その他は静的ファイルであり、構造は自由に定義できます。このうち、site.hs は hakyll の設定ファイルと考えられますが、これを開くと、haskell のわかりにくいコードが大量に表示されます。

少し観察すると、3 つのキーワードがあることがわかります

match

route
compile
• match は一致で、次のファイル名はサイト ディレクトリ内のソース ファイルです (例: ') css/*' これは、css フォルダー内のすべてのファイルを参照します

route は、通常のプログラムのすべてのルートとは少し異なります。これは、一致したファイルがコンパイルされたサイトの場所に配置されることを意味します (デフォルトは です)。 ~site~ フォルダー)

compile はパイプライン、リソースのようなもので、マークダウン -> HTML や圧縮と難読化など、一致 (先頭) からルート (末尾) までのプロセスで実行する必要がある変換作業です。 、などです。

これは hakyll の構造です。非常に明確です。ユーザーが元のデータを提供すると、hakyll がそれらをコンパイルして正しい場所に配置します

hakyll の能力を示すための実践的な例をいくつか示します

sass

  -- 使用 compass 来处理 scss 样式  match (fromList ["sass/main.scss", "sass/blog.scss"]) $ do      route   $ setExtension "css"      compile $ getResourceString >>=          withItemBody (unixFilter "sass" ["-s", "--scss", "-I", "sass/"]) >>=          return . fmap compressCss

をサポートします

存在しないページを作成します

  create ["archive.html"] $ do      route idRoute      compile $ do          posts <- recentFirst =<< loadAll "posts/*"          let archiveCtx =                  listField "posts" postCtx (return posts) `mappend`                  constField "title" "Archives"            `mappend`                  defaultContext          makeItem ""              >>= loadAndApplyTemplate "templates/archive.html" archiveCtx              >>= loadAndApplyTemplate "templates/default.html" archiveCtx              >>= relativizeUrls

この例では、archive.html ページは元々存在しません。posts/ の下にあるすべてのファイルを読み取り、そのタイトル属性を読み取り、リストします。これは、オブジェクトのプロパティを読み取ってループアウトする Jekyll の方法と同じです。結局のところ、Haskell は関数型言語です

スライド

  match "slides/*" $ do      route   $ setExtension "html"      compile $ getResourceString >>=          withItemBody (unixFilter "pandoc" ["-s", "--mathml", "-i", "-t", "dzslides"])

強力な Pandoc を使用して、マークダウン ファイルを直接スライドに変換します。

実際の例

ここに hakyll を使用している多くの Web サイトがリストされていますが、すべて参照用に github にソースコードが掲載されています

概要

hakyll はパイプラインであり、その機能は、作成したコンテンツを適切な方法で表示することです