moyashidaisuke's diary

フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

ブログをGatsby+Netlifyからはてなブログに戻しました & はてなブログproにしました

あらまし

前回の moyashidaisuke.hatenablog.com

自分には合わなかったようで(これだけが原因じゃないけど、更新頻度がすごく減ってしまった)、戻しました。

  • 記事を作成する時に、環境セットアップされたPCからじゃないとできない
    • サブのPCだとできない
    • ので、更新が億劫になる
  • エディターを開いたり、コマンド打ったりするのがめんどくさい
    • ので、更新が億劫になる
  • (選んだテンプレートが良くなかったのかもだけど)デザインが崩れてたり、バグってたりするのを自分でなおすのがめんどくさい
  • 自分でカスタマイズすればなんでもできるぜ!と思っていたけど、そんなにカスタマイズしたい要素が自分の中に存在しなかった
  • 画像や、はてな記法で書かれてる部分の修正がめんどくさい

要は自分にははてなブログで十分という事でした。

でも、Gatsby.jsとNetlify触れたのは良かったです。どっちも良くできてます〜

戻すにあたってやったこと

はてなブログ -> 新環境(Gatsby.jsとNetlify)への転送処理の削除

moyashidaisuke.hatenablog.com

↑の削除。

gistに残しておきました。

gist.github.com

新環境にしか書いてない記事のimport

4記事しかないので手動でコピペ。

URLのpathがずれちゃうけど、まあ4記事しかないので特に制御しない。

せっかくはてなブログに戻ってきたのでやったこと

proへの変更

www.lifelogweb.com

せっかく独自ドメインとったので、独自ドメインでの運用にしようと思います。

ついでにGoogleアドセンスも貼って、多少は広告収入を、、、 旅行の記事とかがんがんあげて広告収入で旅行費用を経費扱いに、、、(夢)

f:id:moyashidaisuke:20190909140611p:plain

割引率が1年プランと2年プランで大きくは変わらなかったので、とりあえず1年にしました。

独自ドメイン設定

proなので独自ドメインが使えます!

help.hatenablog.com

私はmoyashidaisuke.com を新環境に移行する時に取得済なので、これをそのまま使います。

私はsakuraのDNSを使っているので、sakuraのコンソールからマニュアル通りに設定。 (キャプチャ取り忘れだけど、nemeserverがnetlifyのDNSをを向いていたので、元々の設定に戻しました) f:id:moyashidaisuke:20190909162703p:plain

netlifyの設定を削除(この後サイトごと消しました

f:id:moyashidaisuke:20190909162805p:plain

はてなブログに設定(よく見るとこの時はDNSエラーが出てる) f:id:moyashidaisuke:20190909163005p:plain

変更前

dig www.moyashidaisuke.com                        [master:english]

; <<>> DiG 9.10.6 <<>> www.moyashidaisuke.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 37710
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.moyashidaisuke.com.        IN  A

;; ANSWER SECTION:
www.moyashidaisuke.com. 20  IN  A   178.128.115.5

;; Query time: 50 msec
;; SERVER: 14.193.100.8#53(14.193.100.8)
;; WHEN: Mon Sep 09 16:24:44 JST 2019
;; MSG SIZE  rcvd: 67

変更後

; <<>> DiG 9.10.6 <<>> www.moyashidaisuke.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 3887
;; flags: qr rd ra; QUERY: 1, ANSWER: 3, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.moyashidaisuke.com.        IN  A

;; ANSWER SECTION:
www.moyashidaisuke.com. 60  IN  CNAME   hatenablog.com.
hatenablog.com.     55  IN  A   13.230.115.161
hatenablog.com.     55  IN  A   13.115.18.61

;; Query time: 42 msec
;; SERVER: 14.193.100.8#53(14.193.100.8)
;; WHEN: Wed Sep 11 11:19:26 JST 2019
;; MSG SIZE  rcvd: 108

広告切る

proユーザーなので、はてなが出してる広告を非表示にできます!

f:id:moyashidaisuke:20190909171449p:plain

before f:id:moyashidaisuke:20190909171542p:plain

after f:id:moyashidaisuke:20190909171557p:plain

すっきりしました。

トップページの表示形式を「一覧」にする

f:id:moyashidaisuke:20190909171916p:plain

before f:id:moyashidaisuke:20190909171937p:plain

after

f:id:moyashidaisuke:20190909171951p:plain

明らかに見やすくなりました。

keyword link非表示

本文からはてなキーワードに飛べるやつ(スクロースしようと思って誤ってクリックしちゃう、、、しかも別タブじゃなくて同じタブ内で遷移しちゃうからブログを離れちゃう、、、)を無効に

f:id:moyashidaisuke:20190909172647p:plain

headerとfooter非表示

「はてなブログです!」感が減って、HPっぽくなる。 f:id:moyashidaisuke:20190909172921p:plain

before

f:id:moyashidaisuke:20190909173014p:plain f:id:moyashidaisuke:20190909172945p:plain

after f:id:moyashidaisuke:20190909173059p:plain

なんか背景画像が欲しくなるシンプルさ。

# 感想

戻ってくると色々馴染んでいるので書く意欲が湧いて来る気がする、、、

あと、エディター開いていると頭がプログラムモードになってしまうのも自分には良くなかったですね。プログラム書いてる時とは全然違う頭の領域を使ってたらしいです。

デザイン周りも修正したので、それは次の記事で。 また書いていくのでよろしくおねがいします。