WordPress→VuePressにブログを移行【1】
# 概要
サイト移行後の初投稿記事です。
ブログらしいブログを全く更新していませんでしたが、連休を前にようやく腰が上がったため更新。
しかし...ワードプレスはなんだか重いしプラグインを更新したりするたびにビクビクしていたし、ローカル環境で試したりが面倒だし、ということで、全く違う環境へ移行することにしました。
# きっかけ
社内で技術情報をまとめる社内サイトを作るという話になったときに、上司が紹介してくれました。
調査も依頼されたので色々調べていたところ、
自分のサイトもこれにしてしまえばいいのでは
と頭によぎり、そのままブログの作成方法も調べ、できそうだったのでドメインも購入し直して作り直すことにしました。
# VuePressのいいところ
# 動作が軽い
静的サイトになるので、とにかく軽いです。
このブログでも感じられると思いますが、リンク先に移動する時に非常にシームレス。
とてもいい！
# githubで記事を管理できる
WordPressでもプラグインを使用して記事からテーマまでまるっとバックアップすることはできます。
ただ、かなり容量があるので定期的にローカルに保存しておくのも大変だし、思い立った時にやろうとしても結構手間な作業だったんです。
VuePressにしてからは、記事もテーマもプラグインも全てgithubに上げておくことができるので、差分をどんどん更新しつつ、なにかあったらすぐ元に戻せます。
とてもいい！
# markdownで記事が書ける
仕事で少しずつ使い始めたmarkdownファイル。
慣れるまではとっつきにくいですが、技術文書を書いたり、ちょっとしたメモ程度なら全然WordPressの機能を使わなくてもなんとかなりました。
# 維持費が安い
WordPress使用時は、XServerを年間で契約しつつ、無料でもらえるドメインを一つ使用していました。
年間16,000円程度。
それなりにしますよね。
このブログは、Netlifyというサービスとgithubを連携させて、githubの更新時（push時）に自動でサイトを更新してくれるというスンバラシイサービスです。
Netlifyのサービス自体は無料で、ドメインをNetlify経由で購入しました。
なんと初年度は年間$10.99。
今までの浪費感は一体...
# 記事のサムネイル画像を用意しなくていい
いやこれ単にWordPressでの使用テーマがいけないんだと思いますけどね。
記事に対していちいち画像を選んだりスクリーンショット撮ったりするのが結構面倒でした。
# 容量をあまり気にしなくていい
一応100GBまでという制限はgithubにはありますが。
1ファイルのサイズ制限の100MBもそう達しないであろうということと、WordPress使用時は毎回画像圧縮のプラグインを走らせたりしていたので、これも良かったです。
# VuePressで難しいこと
# 環境を作る
WordPressのように、GUIでぽちぽち環境を作ることができないです。
# 記事を書く
markdownに慣れていないと、記事を書くこと自体が難しくコストがかかると思います。
画像一つ表示させるのも面倒ですし、さらにそれをセンターに配置して、とか、WordPressならボタン一つでできることがすぐできません。
# 情報がすくない
- CUI操作が多く、エンジニア向けのサービスである感があること
- 公式チュートリアルが中国語/英語であること
などを理由に、まだまだ普及していないと思います。
困った時にまず英語で検索した方がすぐに解決できています。
このブログはvuepress-theme-recoを使用して作成していますが、テーマ内部についてわからないことが出てくると
- VuePressの仕様で解決できる問題なのか
- テーマ固有の問題なのか
の切り分けから始めなければいけません。
実際今も一つ問題が解決できておらず、テーマ作者の方にメールを送りました。（笑）
初歩的な質問だったら申し訳ないので、超初心者です！と添えておきました。（日本人）
ちなみに「超初心者」って、True begginerって言うらしいですよ（小声）
# これからやること
# 調べ物
- VuePressの仕様をもうすこし深く調べる
- Vue.jsについて何にもしらない。調べる
- テーマのカスタマイズの詳細を調べる
- ここまでの経緯をブログに残す（次回記事予定）
- mac/dockerでの開発環境構築
- nodeイメージ
- Netlifyの設定
- sitemap.xmlの作成
- Google Search Consoleの登録
- テーマの編集
- faviconの作成（アプリ・変換サイト）
- 背景画像の作成（350 * 1260で作成）
- mac/dockerでの開発環境構築
- VuePressに詳しそうな人とおともだちになる（？）
# 問題解決
- サイト下部のページジャンプが中国語になってしまっている（問い合わせ中）
- サイトのTimezone設定が（たぶん）中国になってしまっている
- dockerで新コンテナ作成時に
yarn buildがちゃんとできる手順を整理する
# なにはともあれ
とりあえず動く状態まで持ってこれたので なによりデザインがすっきりしていて動作も軽快なことがお気に入りポイントです。
連休中にちゃんとまとめて、Search Consoleに認識されるようにしたいです。