sassに慣れるべく、cssをいじるサイトはどれにしようか考えていてわざわざスタイルのためだけに静的ページつくるのもナンだったので、このサイトにメディアクエリのブレイクポイントを追加してみた。
960px〜1024pxでは元のデザインと全く違うものにしてみた。
ここの元と同じくヒーローイメージ以外はスタイルのための画像は無し。
以前から試してみたかった要素を縦書きにしたもの。
ただし、とにかく作り終えることを目標にしていたので、macのchromeでしか確認できていない。
他のブラウザでの挙動はまた後ほど。
atom上でロポジトリを作成。
bitbucketでリポジトリを作成。
HTTPS git clone https://「bitbucketのアカウント名」@bitbucket.org/「bitbucketのアカウント名」/test.git
すばやく使用を開始
リポジトリに何かを入れる一番簡単な方法は、README または .gitignoreを作成することです。
＞ローカルの Git リポジトリを Bitbucket に移行しましょう
＞ステップ1: リポジトリのディレクトリに移動する
＞cd /User/「ホームフォルダ名」/「プロジェクト名」/.git
＞ステップ2: 既存のリポジトリをBitbucketに接続する
＞git remote add origin
＞https://「bitbucketアカウント名」@bitbucket.org/「bitbucketアカウント名」/「リポジトリ名」.git
＞git push -u origin master
とすればローカルのリポジトリとリモートが紐付けられる。
サブ機が使えない代わりに、非対象の古いMacにEl CapitanやSierraをむりやりインストールするアプリをみつけたので今度試してみようかな。
また何週間も格闘しそうだけども
今日も早朝覚醒したのでサブ機でコーディング。
この前までやってたものとは違う今更感があるもののテスト。mixinを使ってメディアクエリを使ってみてる。eachとかは使わない従来通りのやり方だけど。
しかし10年前の初代MBAでmountain Lionまでかな、しか入らないはずのものにhackintoshで無理やりYosemite動かしてるからか、バッテリーがすぐ切れる。
んで次に続きをやる時に何してたっけ、って忘れてしまう。
ほんとはcssで矩形とか色だけとかで組み立てるだけじゃなくaiかpsdでちゃんとしたデザインをした上でそれを実現させるコーディングしなきゃいけないのだけど…
早朝覚醒した時は持ち出し専用のサブ機を連れてきてクルマの中で作業する。
とは言ってもエディタとブラウザだけしか入ってないからコーディングしかできないけど。
そんでここ数日は、この表サイトを弄って見た目や構造を変えたくないので裏に別ページ作ってそっちでいろいろ試し始めた。
mixin使ったメディアクエリ、いろいろ宣言しないといけなくて頭がパンクしそう。
eachだのを使うやり方もあるみたいだけどそっちはもっとぐちゃぐちゃになりそう…
cssもプログラミングチックになってきてこれらができなきゃと思うとかなりの危機感。
phpやjsが苦手な自分としては、せめてcssはなんとか会得しなければ。
て、gulpやらをインストールしようとしたらエラーがたくさん♫
koala使わずにatomだけでscssをコンパイルしようとsass-autocompileていうプラグイン使ってみたらそんなコマンドねぇって怒られてアレーと思ってみたらNode.jsやらなんやら全くインストールしてなかったみたい。
Koalaはその辺インストールしなくてもそれ単体でコンパイてくれてたのね…勘違い
こちらもやろうやろうと放置していたもの。
チェックボックスをiOSのトグルスイッチ形式の見た目にすること。
特にdisplay:noneとかを使わず予想以上に簡単にできた。
ただ、個別ページのコメント部分には適用してないのでそれはまた後日。
放置してた画像の遅延読み込み、ようやく組み込めた。
ネットで探した中でヒット数が多かったjquery.lazyloadを使うことに。
ただ、思った以上に読み込み速度が上がらない。
ポートフォリオのセクションは画像が多くてそれらをすっとばすはずなのに。
まあそれでも多少でも速くなったのでひとまずは良しとする。
あとは、訪問者が最初に訪れた時だけprofileとportfolioを表示させて、そこからどこかへページ遷移すると表示させない、ということをやりたい。毎ページportfolioとかが表示されるのも鬱陶しいので。
どうすればできるのか、そもそもできることなのか、そこから調べないといけない。
mastodonのインストールが終わったら、とにもかくにもsshの設定。
ローカルで
$ cd ~
$ mkdir .ssh
$ cd ~/.ssh
$ ssh-keygen -f rsa -t rsa
サーバ上のマストドン（hogegoge）ユーザで
$cd /home/hogehoge
$ mkdir .ssh
$ chmod 700 .ssh
ローカルで
$ scp ~/.ssh/rsa.pub hogehoge@「ipアドレス」:~/
hogehogeユーザで
$ cat rsa.pub > .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys
$ rm -f rsa.pub
$ sudo vi /etc/ssh/sshd_configを編集
PermitRootLogin no
PasswordAuthentication no
Port 「任意の番号」
#PubkeyAuthentication yes
$ sudo systemctl restart sshd
$ sudo vi /usr/lib/firewalld/services/ssh.xml
〜〜 port=”上記の番号”〜
$ sudo firewall-cmd –reload
ローカルで鍵を使ってログインできるか確認
$ssh -p 上記の番号 -i ~/.ssh/rsa hogehoge@hogehogeのIP
ローカルでこれをつくっておく
ローカル
（~/.ssh/config）
Host foobar
HostName hogehogeのIP
Port ポート番号
User hogehoge
IdentityFile ~/.ssh/rsa
としておくと次回から「ssh foobar」と打てばログインできる
ユーザーに管理者権限を付与
/home/mastodon/liveのディレクトリで行う
echo “export RAILS_ENV=production” >> ~/.bashrc
cd /home/mastodon/live
RAILS_ENV=production bin/tootctl accounts modify alice –role admin
アプデ手順
無難な対応としては、最初にmastodonを一度停止した方が良いので停止する。
systemctl stop mastodon-{web,sidekiq,stream}
Mastodonのインストールパスに移動
cd /home/mastodon/live
git で最新の状態を取得してくる
git fetch origin
新しいリリース版が出ているにもかかわらず上記コマンドでも当該バージョンのタグが取得されない( * [new tag] が表示されない)場合は下記のコマンドで取得してみる
git fetch –tags origin
または、既に取得済みである可能性もあるので、その場合は
git tag -l
で現在取得済みのタグ一覧を表示し、当該バージョンのリリースタグがあるか確認する
取得したら目的のタグに切り換える。ここでは v1.4.1 にアップデートする。
git checkout v1.4.1
bundler を使用して gem やらの更新
bundle install
フロントエンド関連のライブラリも yarn で更新
yarn install
DBの構成変更がある場合は db:migrate を実行する（何も無い場合も実行しても何も起こらない）
RAILS_ENV=production bundle exec rake db:migrate
フロントエンドのCSSやJSの更新とパッケージング（これがチョット長い）
RAILS_ENV=production bundle exec rake assets:precompile
※ここで「Using /mastodon/config/webpacker.yml file for setting up webpack paths Compiling… Compilation failed:」となったらほぼメモリ不足らしいので、スケールアップするなどする
最後にエラーのような文言が出るが、500.htmlに関するレンダリングエラーじゃなくって、500のエラーを吐き出すページ？をレンダリングしましたよ、ってことなので無問題
アプデできたらmastodon起動
sudo systemctl start mastodon*
もしくはsudo systemctl start mastodon-{web,sidekiq,streaming}
うまくいかない場合は個別に立ち上げる
sudo systemctl start mastodon-web
以下同
参考、アプデ手順
https://gist.github.com/anon5r/bd96ee4127d6b66ad4150287f5a4ed99
参考、その他保守
https://qiita.com/kumasun/items/bf4997f181f893130041