Vue.js + VuePress + Netlify でブログを作った話

僕

Jabelic です. 2020 年現在, 明治大学総合数理学部現象数理学科 3 年です.

💁このブログについて

特に何も決めていませんが, 技術系の記事が多くなると思います. Qiita や note でも良いと思いましたし今までも少しだけ投稿していたことがありますが, もっと気軽に書ける場所が欲しかったのでブログを開設するに至りました. もちろん, Vue.js で何か作ってみたかったというのもあります.

メモ感覚でどんどん書いていきたいお気持ち💪💪

使用技術

フレームワーク

• Vue.js

• Vuepress 1.x

  • markdown で書いて, それをレンダリングしてほしかったので.　更新頻度が落ちないようにするせめてもの工夫.

プラグイン

• @vuepress/plugin-google-analytics (opens new window)
• vuepress-plugin-seo (opens new window)
• vuepress-plugin-sitemap (opens new window)
  • うまく導入できてるかな？

デプロイ

• Netlify
  • 無料枠が大きい.

画面構成

• HOME 画面
  • 記事を表示するカードはVuepress でブログカードが作りたい | 民主主義に乾杯 (opens new window)を参考にしました.
• Budge
  • MacBook にシールをペタペタ貼る感覚でつけちゃいました. shields.io (opens new window)

💁Trouble shooting

• katex
  • align環境をサポートしていなかった. alignedはサポートされているのでこれを使う.
    • #issues 1007 (opens new window)

💁TODO

• PWA 化
  • した！ついでに UpdatePopup も追加した。
    • 追加できてなくね？ありゃ？
    • できた.
• Google Search Console がうんたらかんたら. ようわからん.
  • した！Google Search Console を Hugo ブログ+Netlify の環境に設定する方法 (opens new window)の通りに行なった. "Jabelic blog"で最上位に出てきた. やったぜ.
  • build コマンドを実行しないと PWA のホップアップが出てこないこともわかった(PC だと+ボタン).
• KaTeX を使えるようにする. プラグインがあったはず.
  • できた. alignをサポートしてなくて, alignedを使わなければならない.
• テーマカラーを変えたいかな. Vuetify の導入にはあまり前向きでない.
• Footer をつける
• Tag を表示
• Tag 別一覧表示
• last-updated を導入

---

Tweet