Site Generators A List of Static Site Generators for Jamstack Sites
静的サイトジェネレータを使ってサイトを作ってみたかったけど、StaticGenを見ても違いがイマイチわからなかったので、自分の気になる点で比較してみました。 比較したプロダクト Middleman Hugo Metalsmith Pelican 上記の4プロダクトを比較しました。 StaticGenで人気がありそうなものを中心に選定しましたが、自分が作りたいサイトはブログではない普通のサイトなので、ブログ作成に特化1していると書いているものは外しました(Jeykll, Octopress, Hexo等)。 なお、比較はすべてドキュメントやサンプルプログラムから読み取れる内容で行ったので、実際の挙動が違っていたらごめんなさい。 基本項目 プロダクト名 開発言語 コンテンツ
以前書いた「デザイナーも静的サイトジェネレーターが使えた方がよいのではないか」の記事が最近よく見られているので、追い記事を書いてみようかと思います。 静的サイトジェネレーターはお客様サイトに使えるのか 前回記事で紹介したように、このブログは「middleman」というツールを使って静的サイトとして運用しています。なので、ファイルも HTML / CSS / JavaScript のみとシンプルです。 静的サイトのメリットは、CMS で必要な DB や サーバ側のシステムがいらず、セキュリティリスクが少ないことと、実体のあるファイルを読み込むため動的サイトよりも早いことです。 また、一定のスキルと知識があってターミナルを使うことに抵抗のない Web デザイナーさんであれば、静的サイトを構築する様々な便利ツールがあるので難しくはありません。 ただこれだと、お客様に静的サイトジェネレーターなどを
Wordpressで始めたブログを管理画面がいらないという理由で静的サイトジェネレータのmiddlemanに乗り換えて早3ヶ月。CMS案件やWebアプリケーションのHTML/CSS制作にmiddlemanを使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。 というわけで、以下のような方におすすめの内容でお届けします。 middlemanを使ったことがある方middlemanでブログを作りたい方middlemanでのブログ初期設定をやろうとしている方なんとなく見てしまっているという奇特な方 ← どうもありがとうmiddlemanを初めて使う方は、まずは過去記事をご覧ください。 インストールからサーバーの起動まで ブログサイト制作するには、上記ページ内のmiddlemanを起動してみようのスケルトン作成の箇所に補足として記載している、$
お初にお目にかかります。鉛弾を敵の眉間にブチ込むゲームが好きなdkimuraです。 先月末に当ブログを、WordPressからMiddlemanへ移行いたしました。 その際にハマった/悩んだところをご紹介させていただきます。 移行の流れ WordPressから、記事データをXMLでエクスポートする エクスポートした記事データをMarkdownに変換 middleman-blogコーディング Github Pagesでホスティング 今回は太字になっている箇所で苦労したお話をさせていただだきます。 エクスポートした記事データをMarkdownに変換 既に記事移行用に、Rubyスクリプトが公開されていたのでForkして使用しました。 大半の記事は上手くMarkdownに変換できましたが、変換後の確認と調整は必要です。 salmansqadeer/wordpress-to-middleman ht
Rubyで作られた静的サイトジェネレーターとして人気があるMiddlemanのミートアップがEngine Yardオフィスで開催されました。 私自身は当日参加できませんでしたが、ストリーミングと録画を仕掛けておいたので簡単にレポートしようと思います。 Tokyo Middleman Meetup #2 - connpass Tokyo Middleman Meetup#2 - an album on Flickr Tokyo Middleman Meetup #2 で発表してきた - ja.ngs.io 【Middleman】Tokyo Middleman Meetup #2 でLTさせていただきました。 | Developers.IO Thomas さんによる講演 "Middleman Past, Present & Future" 今回、来日したThomasさんによる講演はMiddle
ジキラーだったがMiddlemanを少し調べてみたところなかなか便利そうな印象を受けた。MiddlemanはRubyで作られた静的サイトジェネレータでJekyllとよく似ている。設定ファイルやテンプレートを事前に作成しておいて、別にコンテンツ用のテキストファイルを用意してコマンドを打つとひと通りのhtmlファイルが作成されるのであとはウェブサーバにファイルをアップロードすればサイトを公開できる。 ローカルで作成すればウェブサーバ側にRubyをインストールしておく必要はない。サーバ側にウェブサーバしか要求しないのでGihtub PageやAmazon S3などで公開することができるし、自前でレンタルサーバやVPSを契約していてもサーバ側にあまり負荷をかけないのでメリットはある。 Middlemanはまず日本語のドキュメントが存在するのが良い点。アセットパイプライン、LiveReload、デプ
主なコマンドプロジェクトフォルダを作成 … middleman init開発用ローカルサーバーを起動 … middleman serverファイルをビルド(静的ファイルの出力) … middleman build【Middleman】静的サイトジェネレータを使用してみる。 | Developers.IO その他。 % middleman --help Tasks: middleman build [options] # Builds the static site for deployment middleman console [options] # Start an interactive console in the con... middleman extension NAME [options] # Create Middleman extension scaffold NAME
そんな訳で、前回は Middleman のインストールから基本的な機能まで学習しました。今回はより本格的に使いこなすために、Middleman の持つ膨大な機能の中から僕が比較的多用している機能を7つばかり紹介していくとします。Middleman って何?という方は、先に以下の記事をご参照ください。 [ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ テンプレート - レイアウトを無効にする すべてのテンプレートファイルは何らかのレイアウトに囲われた状態で出力されますが、時にレイアウトを全く使用したくないという状況もあるでしょう。具体例として、モーダルダイアログ内に読み込む外部ファイルなどが考えられます。そんな時はテンプレートファイルがレイアウトに囲われないように無効化する訳ですが、以下の二種類の方法でこれを解決することが出来ます。 Fron
インストール楽をするために、先人のプロジェクトテンプレートを利用します。 お好みで。 shimoju/middleman-bootstrap-sass-slimテンプレート化。 shimoju/middleman-bootstrap-sass-slim % git clone https://github.com/shimoju/middleman-bootstrap-sass-slim.git ~/.middleman/bootstrap-sass-slim % middleman init test_middleman_bss --template=bootstrap-sass-slim % cd test_middleman_bss % bundle % bundle exec middleman server
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています(※拡張子はerb)。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERb のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
デフォルト設定では Middleman はプロジェクトの中であなたが記述したとおり正確に ファイルを出力します。例えば source フォルダの中の about-us.html.erb ファイルはプロジェクトのビルド時に about-us.html として出力されます。 example.com の Web サーバのルートディレクトリにプロジェクトを配置すれば, このページは次の URL でアクセスできます: http://example.com/about-us.html Middleman は .html 毎にフォルダを作り, そのフォルダの index としてテンプレートを 出力するディレクトリインデックス拡張を提供します。 config.rb で次のように指定します: このプロジェクトがビルドされた時, about-us.html.erb ファイルは about-us/index.h
ブログをOctopress + GitHub PagesからMiddleman-Blog + Amazon S3へ移行しました。 Middlemanに興味があって試したところ、シンプルで使い勝手がよかったためそのまま移行することにしました。 AWSも勉強中なので、この機会に併せてホスティングをS3に、DNSサーバーもRoute 53にしました。 コスト意識を持った方が、色々工夫しようとする気持ちが強くなるので、技術が身につきやすいのかなぁと思います。 Goodbye Octopress Octopressを使うとき、まず本体をGitリポジトリからクローンし、その中に記事のファイルを追加していきます。 そのため、記事用のブランチを切ってはいますが、本体の更新のコミットと同居するのでログがかなり見づらいです。 記事だけ別のリポジトリにすれば幾分マシだったのかも?それもなんだかなぁ。 また、テン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く