Middlemanを相対パスで

Middlemanを相対パスで書きたいなーと思っていたところに

紹介していたブログがあったので転載。助かります。

 

config.rbに

activate :relative_assets 

 を追加することで、<%= stylesheet_link_tag "all" %> や <%= image_tag "/images/xxx.jpg", :alt => "" %> の出力が相対パスで出力されるようになるそうです。

 

ほかにもためになる記事がたくさん書かれています。感謝。

 

Middleman メモ：相対パス - HAM MEDIA MEMO

サイトの高速化

制作したサイトのロードが遅い、ということで、

下記の対策をそれぞれ施し、GTmetrixで計測し、

最適な方法を考えてみたのでここに記述。

 

1, ソーシャル系の読込を全て外す

2, WEBフォントの読込を全て外す

3, メインビジュアルの切り変えを外す（スライダー）

4, CSSの圧縮

5, jsの圧縮

6, WordPressの不要プラグインの削除

7, htaccessでcasheの制御（今度に持ち越し）

8, gzipで圧縮（今度に持ち越し）

9, PHPの条件分岐を減らす（今度に持ち越し）

 

結論から言うと、4〜8を実施することでページ速度は

高速化できそう。

しかし2に限っては、WEBフォント（fontplus）の読み込みが不安定で、

ロードに長くかかることもあれば、短くなることもあり、

WEBフォントに依存するところは大きいと感じた。

というわけで、4〜8を実施することに重きを置いて動いているが、

4〜6は簡単にできたが、7,8で見事につまづいている。

理由は

・さくらのレンタルサーバーで制限があること

（httpd.confをいじれない。一応mod_expiresは使えるとのこと）

　http://did2memo.net/2012/07/21/sakura-rental-server-mod-expires/

・htaccessの書き方がわかっていない。つまりapacheとかそのへんの理解不足。

があるかな、と思っている。

 

やっぱりフロントエンドに特化したいとは思うけど、

サーバーサイドに関しても勉強しないといけないなーと思う次第です。

 

これはもうちょっと時間をかけて勉強と実戦を重ねて行く予定です。

クライアントのサイトなので、具体名を出せないためわかりづらいかも、と思いつつ綴ります...

 

ちなみに、htaccessの書き方で、これがわかりやすかったのでメモ。

 

.htaccessのRewriteCond、RewriteRule：超初心者向けメモ｜ぼくんちのバックステージ

 

超初心者向け...

こちらも追記

WordPress がもっさりしてきたので、ブラウザキャッシュ（Expires ヘッダ）を設定して高速化してみた | MacBook Air とWordPressでこうなった

Middlemanでblogを構築してみる（序章）

Middlemanでgithub上にblogを構築してみようという試み。

まだ何もしてないので参考リンクだけ。

 

http://urouro.net/blog/2013/12/20/begin-middleman-blog.html

http://re-dzine.net/2014/01/middleman-slim/

https://github.com/tvaughan/middleman-deploy

サイトのトレースをphotoshopで始めてみた。

だいぶ前から、デザインをやらねば・・と思っていたのですが、

この記事を読んでようやく奮起。

 

模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG


文字通り、模写をしようと思いました。笑

ということで、ブログでも紹介されているコロンビアのサイトを手始めに。

1週間に1ページという感じでいけるだろうか。

まぁ徐々にならしていけば早くなるとは思う。

 

また、photoshopをgithubでバージョン管理する方法や、

海外の人気サイトのPSDが落ちていたので、このへんも参考にしていきたい。


というわけで、こちらにちょいちょいアップしていこうと思うので、

お楽しみ？に。

 

thamamur/design-box · GitHub