Jekyllを使って極力デザインに手をかけずに製品サイトを作りたい
自分が製品マネージャをやっているAppPotという製品のWebサイトを再整備する取り組みをやっています。
- 今のWebサイト
AppPot〜企業向けスマートデバイスアプリ開発のためのプラットフォーム
このサイトとは別にGithub上にマークダウンで記載した製品マニュアルを公開しています。今回の再整備で、Github上のマニュアルを静的HTMLに変換して、製品サイトと一緒に公開したいと思っています。
今回は、Jekyllを使って、且つ、なるべく既存のThemeを使ってやりたいと思っています。
今日は技術検証なので、このテーマを使て試してみたいと思います。
swcool/landing-page-theme · GitHub
- jekyllのインストール
$ gem install jekyll
- テーマをリポジトリからクローン
$ git clone https://github.com/swcool/landing-page-theme.git
- serveオプションでローカルで試せる
$ jekyll serve Configuration file: /Users/rsogo/work/jekyllsample/landing-page-theme/_config.yml Source: /Users/rsogo/work/jekyllsample/landing-page-theme Destination: /Users/rsogo/work/jekyllsample/landing-page-theme/_site Incremental build: disabled. Enable with --incremental Generating... done in 0.206 seconds. Auto-regeneration: enabled for '/Users/rsogo/work/jekyllsample/landing-page-theme' Configuration file: /Users/rsogo/work/jekyllsample/landing-page-theme/_config.yml Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
4000番ポートにアクセスするとこんな感じ。ここまでは簡単。
ここからテーマをカスタマイズしていきます。 このテーマは_postsの内容をServicesとして表示してくれるみたいです。 この辺はテーマによって違うようなので、テーマのお作法に沿ってやる必要があります。
以下の様な感じでファイルを作成すると、 _posts/2014-09-20-services-0.markdown
--- layout: default img: only_use_detail01.jpg category: Services title: 開発コストが2分の1になります description: | --- AppPotを使えばサーバーの開発が不要です。そのため、セットアップ後、すぐにフロントエンドの開発を行うことができ、開発期間の短縮と、開発コストの削減に効果があります。
こんな感じに表示してくれます。
- _config.ymlの基本の設定を変更します。 titile、twitterアカウント、githubの情報を更新して、LinkedInの情報を消しました。 変更した場合はjekyll servを再起動しないと変更されないです。
# ----------------------- # # Main Configs # # ----------------------- # url: http://yoursite.com title: AppPot email: your-email@domain.com author: Your Name description: > # "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. copyright: 'Copyright © 2015 Your Name. All Rights Reserved.' credits: 'Credits: Landing Page is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com/">Start Bootstrap</a>.' # ----------------------- # # Jekyll & Plugins # # ----------------------- # # Build settings markdown: kramdown permalink: pretty # ----------------------- # # 3rd Party Settings # # ----------------------- # social: - title: twitter url: https://twitter.com/app_pot - title: github url: https://github.com/NCDCHub/apppot-docs
後、一番上の画像を元の製品サイトのものに変えました。 ここまで変えるとレイアウトの崩れなどはありますが、それっぽくなりました。
このテーマを実際使うわけではないので、微調整はやりませんが、テーマに合わせて画像などを用意すれば良さそうです。
実際やってみて感じたのは、ブログ・サイト用のテーマはたくさん有るのですが、それ以外の場合、自分の求めているサイトに「デザイン」「サイト構成」の点で近いものを探すのがポイントかなと思います。
いいところ
- デザイナーさんに画像などを用意してもらう必要がありますが、だいたいイメージにあったサイトをすごい速さで作ることができる
- コンテンツをマークダウンで書けるので楽
- デザインを変えたかったらテーマを変えればいい。コンテンツと、テーマが強制的に明確に分離されているので、やりたいサイトにフィットしたテーマがあれば楽