はてなブログのデザイン
プロジェクトテンプレート
LICENSE
MIT
README.md
How to DevelopとLicense
stylus
Sass, LESS, Stylusとあるけど、
node.jsで完結している
標準のCSSの文法と互換性がある
以上の点からStylusを推していきます。
live-server
nodeの静的サーバいろいろあってどれ使ったらいいかわからないけど
定期的に保守されている
ほどほど豊富なオプション
以上の点で優位かなと思ってlive-serverを選択しました
ほか参照した静的サーバ
http-server
superstatic
local-web-server
static-server
ecstatic
micro
serve
用途によってはsuperstaticかserveがいいかも
ress.styl
はてなの素のデザインもリセットされるので使わないことにした
How to Develop
必要ツール
yarn
Chrome + Stylus(ChromeのユーザーCSS拡張)
開発の仕方
1. yarn dev します
2. Stylusに @import url('http://127.0.0.1:8080/theme-hatena-blog-yumeutsutsu.css'); でスタイルを作ります
3. はてなを見ながらデザインします
package.json の scripts について
code:json
"scripts": {
"dev": "npm-run-all -p watch server",
"server": "live-server",
"watch": "stylus --include-css -c -m -w theme-hatena-blog-yumeutsutsu.styl -o theme-hatena-blog-yumeutsutsu.css",
"prod": "stylus --include-css -c theme-hatena-blog-yumeutsutsu.styl -o theme-hatena-blog-yumeutsutsu.css"
},
開発中は yarn devしておいて、完成したらyarn prodでCSSファイルを出力する