作成日:2024-01-31
javascriptも、Reactもあまりわからない状態から、ブログを作って２年が過ぎてしまった。感想
2022年1月からブログを書こうとし、git commitを遡ると、初コミットが2022年1月10日でした。
ブログを始めた当時は、Reactも知らずGatsbyに手を出して... ?!分からず。
そもそもjavascriptもあまりわかっていない中、Gatsbyと格闘をし、md記法や、ブログのデザイン、ブログの構成、DNS設定、ドメイン取得、gitの使い方、npm使い方、node jsとjsの違い。SEO設定、ogp 設定、VPS、Linux設定、等々...本当に色々学んでこれたと思います。
２か月間はブログのレイアウトと、gatsbyの使い方を学んでいました。本当に何も知らずにいたので、相当苦しんでいましたね、素直にwordpressを使う方が良かったのか？Gatsbyを辞めてしまおうかとずっと思っていました。
Gatsbyを触りながら、学んだのは、javascriptのアロー関数、GraphQL、pluginsの追加方法、markdown mdx、です。
ずーっと分からないけどとりあえず動くから、とりあえずコピペでやっていました。
ブログのレイアウトデザインも散々悩んで、最終的に色々なブログページを見て真似て作りました。
今でもそうですが、デザインは難しい...試行錯誤してとりあえずブログのコンテンツを表示できる状態までやりました。デザインできる人は尊敬する。
なんとかブログを公開し、記事を公開できる状態まで頑張りました。
ブログを公開したもののサイトマップとの格闘が始まります。 ブログの更新もFTPで手動アップしていたので更新するのもひと手間でした。
何よりも悲しかったのは、3ヶ月も経てば他のブロガーの方々はPVも上がり1000近く出る人も、収益も出ている！とtwitterの報告を見て、他の
ブロガーの成果が出ているのに、こちとら誰も見てないよ。そもそもインデックス登録されているのかどうかも分からず...
「URLがGoogleに登録されていません」なんで登録されていないんだ？ 検索してみたけど解決策が結局分からず。試せることは全て試してみました。URLの最後/があるのでできないのか？と思い全て削除したページに切り替えてindexに再登録してみたり、手動でindexを登録してみたり、新しいドメインを取得し試してみたりしまいしたが、全然登録されないのであきらめモードでとりあえず記事を作って行くことにしました。
GatsbyなのでローカルのPCでビルドし静的ファイルをfilezillaを使ってサーバーにアップしていました。
本当に煩わしい... 自動でアップできたらな～。
既存のホスティングサービスを利用すると自動でgitを連携し、自動アップロードをしてくれるなんて、lolipopサーバを借りたのは間違いだったのか、今から切けえてもいいのでは？
色々なホスティングサービスを探してGatsby、Netlify、heroku、aws,firebaseをちょこっと触ってみたが、従量課金制はプランがよくわからん。他も商用利用、ビルドが通らないとか問題が生じ、その内git actionというものを知りました。今でもgit actionを使ってアップロードしています。
index登録がされない状況が続き、google index apiを使っても登録されないのか...と諦めて放置していた時期でした。その後2週間ぐらい後にindexに登録され、ブログを始めて7ヶ月目でやっと初めての訪問者が訪れました。やっとかー、やっと動き出すんだ。成果が見れるのは嬉しかったですね。
しかしながら現実は残酷なもので、PVなんて全く伸びませんでした。1日0~2pvの日々が続きました。
どうすればpvが伸びるのかウェブアナライザー、SEOについて力を入れていきました。
そしてVPSも新規で借り、cloudflareも使ってみました。
7ヶ月もブログをしてきたんだ、次は自動化だ！！と、ブログを作成するための環境を整えていきました。
まずは、gif アニメーションです。画面キャプチャーは何がいいのか。そういえば昔買ったbandicamがあったなと思い出し、使ってみたら、かなり便利でした。マウスカーソルのクリック、位置が分かる機能がとてもいいです。昔に買ったbandicamが、こんなに役立つなんて思わなかった。もし買ってなかったら今は、無料のソフトでもキャプチャーもできるし、買う必要はないだろうと、bandicamを買うことはなかっただろうが、今では必需品になっています。
全ての事において言えることですがツール(ソフト)が無ければそれはそれでと思うが、一度使ったら手放せないですね。
ソフトウェアは少しの投資でかなり便利になることを改めて実感しました。
ウェブページに動画を載せるのは？mp4,youtube？それともgifですればいいのかを考えていくと、webp,apngという比較的新しいファイルフォーマットがあることをしり、webpを採用しました。 ffmpegでwebpで書き出しができるので非常に楽になりました。今までffmpegは使っていたのでbatファイルを作成し、半自動で変換するので負担が少ないです。やっぱりgifと比べるとファイルサイズも小さく画質も良いので新しい規格は取り入れるべきですね。
7ヶ月~9ヶ月目でも全くpvが伸びません。一日０の日も多くて3とかですね、どうすればPVが伸びるのか？試行錯誤ウェブ解析のmatomoを導入して、hotjar、google analytics等を導入していたのですが、見てもほぼ0なので見る価値無し。それでも気になるもので毎日のようにPVを見ていました。
conohaVPSを借りた時期です。使用用途が主にブログ用であり、VPSはレンタルウェブサーバより高いし設定も面倒なので借りるのを躊躇していました。ブログとは別で、映像配信系サービスで必要になったため、テスト兼勉強用で借りました。正直のところこの時期はサーバー維持コスト、金額のコストが増えるので、お荷物でしたね。今ではLinux、nginxについて学ぶことができ、現在もメインで利用しているので借りて正解でした。借りたことで、Linuxについての知識が増えたのでスキルの幅が増え、DNS、ドメイン、ウェブサーバとは？プロキシ？とか理解度が増しました。あいまいな知識でいたのでこの辺が理解できたのは大きい恩恵です。
pvが伸びない理由を探していました。googleのlighthouseを知ったし、SNSにアップする時の画像が表示される。ogpの存在。ドメインパワー、見出しタグの存在の重要性、description、robots、google analyticsの使い方を学べました。
初めてのGatsbyだったので不要な処理が入っていたりで速度が遅く、適切なdescriptionを設定していなかったり、関連ページを含めたり、目次を入れたり、画像を最適化したり。javascriptについて、画像フォーマットについて、SEOについて学べました。
約一年経って急にpvが増えてきました。と言っても一年経ってようやく月間pvが30になっただけですが、その後も順調に進み月間pv100まで行きました。また、Reactについてもようやく理解することができ、勉強のため、ブログをGatsbyからNextjsに置換えてみることにしました。
ブログはGatsbyを使っていましたが、別件でウェブページを作っているとき、サーバー処理でないとできない事が度々発生し、また、Gatsbyのバージョン5でpluginsが色々と使えなくなったため、ブログをNextjsに置き換えようとしました。
Nextjsの置き換えもかなりつらかったですね。
Gatsbyではpluginsを使えばほとんど解決できますが、Nextjsはそうではありません。pluginでできていたことを全てコードを書いて解決しなければならなかったからです。
最大の問題はmdxで記事を作成していましたが、Nextjsでは私のゴリゴリカスタムしていたmdxの記述方法が使えなかったのです。
mdxは最終的unifiedとparse,rehypeを使って記述方法もカスタマイズできるようにしました。今でもよく作ったなと思います。2カ月ぐらいこのNextjsの移行に時間がかかりました。
mdxパース記事にて相当苦労したものが分かるはずです。
ほぼ1年経ってやっと月間pvが100になりました。理由としては、運よく、2ヶ月前の１つの記事が月60pv程になったためです。その他は多くて20程でほとんど5pvに満たないものもたくさんある状況です。
ちょっとずつ、ちょっとずつ訪問してくださっている方が増えていき月間900pvに到達するようになり、安定してきました。記事の書き方がブログを始めたころよりよくなっていき、Nextjsでサーバー処理でできることも増え新たな機能として、コメント機能、メール受信機能も、また、不要なコード機能も削除してブラシュアップしていきました。今までホスティング先もあっち行ってこっち行ってをしていましたがサーバーもconohaVPSで安定稼働しています。pvも順調だったのでここまでよく頑張ったと自分をほめてやりたい。
しかし順調なのもここまで、pvもあまり上昇しなくなり、停滞気味になってきました。
また、記事のネタもいいものが無い状態です。
それでも着実に記事を書いていきます。
ブログで必要な機能も今まで妥協していた問題に対して対処していきます。
ゆっくりとpvも増えていきます。
md記述もカスタマイズできるように頑張りました。
注意喚起とかできそうなボックスをmd記述できるようにする。
画像のモーダルウィンドウズーム表示もできるようにしました。ここで紹介しています。
ここまでくると画像の量も増えディスクの圧迫、通信量の増加によって無視できなくなります。
cloudinaryを使うことで画像の管理をすることで解決させました。
別記事で紹介もしています。
Nextjsに移行してから、無駄なloop処理であったため、ビルド前に実行されるjsを追加することによってサーバー負荷を減らしました。
気づけばブログが2年目に突入しています。
現在月間pvは2800程で、そろそろ3000に達します。正直今も全く読まれていない記事もたくさんあります。
それでもたくさん訪れている記事もあるので何とか3000に届くか届かないかというところまで来ました。
本当にブログ運用が下手だと実感します。ブログでは無く、他の事に費やせばもっと良かったのではと思うこともあり、友達も同時期から始めていたyoutubeは登録者4000まで増え、収益化もできているのに、私と言えばまだまだマイナスである状態ですね。
ブログを始めて２年経ちました。収益なんてありません。下手なんでしょうね？他の方々を見ると羨ましい限りです。
負け惜しみではありませんが、ブログやっていてよかったと思っています。
アウトプットすることで理解度が増しました。また、私自身忘れてしまったことを自分のブログを見ることで解決することもできています。ブログをやってきてこれまで積み上げたものは財産です。
質問や、間違いがありましたら、お気軽にどうぞ
※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください
