自分が製品マネージャをやっているAppPotという製品のWebサイトを再整備する取り組みをやっています。

今のWebサイト

このサイトとは別にGithub上にマークダウンで記載した製品マニュアルを公開しています。今回の再整備で、Github上のマニュアルを静的HTMLに変換して、製品サイトと一緒に公開したいと思っています。

今回は、Jekyllを使って、且つ、なるべく既存のThemeを使ってやりたいと思っています。

今日は技術検証なので、このテーマを使て試してみたいと思います。

swcool/landing-page-theme · GitHub f:id:begirama:20151126162004p:plain

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番ポートにアクセスするとこんな感じ。ここまでは簡単。

f:id:begirama:20151126162004p:plain

ここからテーマをカスタマイズしていきます。このテーマは_postsの内容をServicesとして表示してくれるみたいです。この辺はテーマによって違うようなので、テーマのお作法に沿ってやる必要があります。

以下の様な感じでファイルを作成すると、 _posts/2014-09-20-services-0.markdown

---
layout: default
img: only_use_detail01.jpg
category: Services
title: 開発コストが２分の１になります
description: |
---
AppPotを使えばサーバーの開発が不要です。そのため、セットアップ後、すぐにフロントエンドの開発を行うことができ、開発期間の短縮と、開発コストの削減に効果があります。

こんな感じに表示してくれます。 f:id:begirama:20151126170414p:plain

_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 &copy; 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

後、一番上の画像を元の製品サイトのものに変えました。ここまで変えるとレイアウトの崩れなどはありますが、それっぽくなりました。

f:id:begirama:20151126172315p:plain

このテーマを実際使うわけではないので、微調整はやりませんが、テーマに合わせて画像などを用意すれば良さそうです。

実際やってみて感じたのは、ブログ・サイト用のテーマはたくさん有るのですが、それ以外の場合、自分の求めているサイトに「デザイン」「サイト構成」の点で近いものを探すのがポイントかなと思います。

いいところ

デザイナーさんに画像などを用意してもらう必要がありますが、だいたいイメージにあったサイトをすごい速さで作ることができる
コンテンツをマークダウンで書けるので楽
デザインを変えたかったらテーマを変えればいい。コンテンツと、テーマが強制的に明確に分離されているので、やりたいサイトにフィットしたテーマがあれば楽