✏️

VuePressはじめ(+気になったバグをFIX)

2021/06/20に公開

VuePressのはじめかた

必要なもの

今回はNode.js(v14.15.5), Yarn(v1.22.10), Firebase CLI(v9.3.0)を用いた。

セットアップ

https://vuepress.vuejs.org/guide/getting-started.html の「Quick Start」に従う。

具体的には上記「必要なもの」をインストールした後に下のコマンドを実行。

$ yarn create vuepress-site 
# 全部Enter

$ cd docs
$ yarn install
$ yarn dev

その後 http://localhost:8000 にアクセスするとサイトが見られる。

https://vuepress.vuejs.org/guide/getting-started.html のページには他にも設定情報が見られるので気になったら参照しつつ触っていく。

文章を書く

文章はMarkdown形式で書ける。お好みのエディタで書くと良い。保存するたびに http://localhost:8000 に更新がかかるので、ブラウザ上の見た目はこちらでチェック。

プラグイン

下のQiitaの記事が参考になる。

https://qiita.com/ozaki25/items/86e61b1e102c10567928

バグFIX

そのままだとうまく動かないところがあるので直す。

※ もしかすると今は直っているかもしれないし、直し方も自己流なのでご了承を。

検索窓にMac限定のバグがある

事象

検索窓に日本語を入力して変換確定のためにエンターを入力すると、勝手に「検索にヒットした1件目の記事」に飛んでしまう。

解決方法

パッチを作ってデプロイ時に自動に当てるような仕組みを導入する。

パッチの作り方

https://github.com/ds300/patch-package に従う。

package.json に下を追記

 "scripts": {
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs",
   + "postinstall": "patch-package"
 },

インストール

yarn add patch-package postinstall-postinstall

バグが発生するファイル (node_modules/@vuepress/plugin-search/SearchBox.vue) を直接編集

diff --git a/node_modules/@vuepress/plugin-search/SearchBox.vue b/node_modules/@vuepress/plugin-search/SearchBox.vue
index b47f18e..f9baa5d 100644
--- a/node_modules/@vuepress/plugin-search/SearchBox.vue
+++ b/node_modules/@vuepress/plugin-search/SearchBox.vue
@@ -11,9 +11,10 @@
       @input="query = $event.target.value"
       @focus="focused = true"
       @blur="focused = false"
-      @keyup.enter="go(focusIndex)"
+      @keyup.enter="goEnter(focusIndex)"
       @keyup.up="onUp"
       @keyup.down="onDown"
+      @compositionstart="composing = true"
     >
     <ul
       v-if="showSuggestions"
@@ -56,7 +57,8 @@ export default {
       query: '',
       focused: false,
       focusIndex: 0,
-      placeholder: undefined
+      placeholder: undefined,
+      composing: false
     }
   },
 
@@ -177,6 +179,15 @@ export default {
       }
     },
 
+    goEnter(i) {
+      var ua = window.navigator.userAgent.toLowerCase();
+      if (ua.indexOf("mac os x") !== -1 && this.composing) {
+        this.composing = false
+        return
+      }
+      this.go(i)
+    },
+
     go (i) {
       if (!this.showSuggestions) {
         return

パッチファイルの作成

yarn patch-package @vuepress/plugin-search

これで完了。buildする際に自動でパッチを当ててくれる。

VuePress Plugin SEOでエラーになるブラウザがある

事象

https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html#install を導入するとSafariとMobileなどでJavaScriptエラーになる。

解決策

直接Google Analyticsのタグをheadに埋め込むこともできるのでこちらで対応する。

docs/.vuepress/config.js

  head: [
    ['script', {
      async: true,
      src: "https://www.googletagmanager.com/gtag/js?id=xxxxx"
    }],
    ['script', {}, `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      gtag('config', 'xxxxx');
    `],
  ],

Firebaseにデプロイ

VuePressのビルド

$ cd docs
$ yarn build

デプロイ

あらかじめ画面でfirebaseのプロジェクトを作っておくこと

$ firebase login
  - 500エラーが出るなら firebase login --no-localhost で試す
  - 500エラーが出るならコンソールに出てくるURLを直接ブラウザに貼ってアクセス
  - 500エラーが出るなら何度かリロードしてみる

$ firebase init
  - Hostingを選択
  - Use an existing projectを選択
    - firebaseで作ったプロジェクトを指定
  - docs/src/.vuepress/distを指定
  - 以降は全部NO

$ firebase deploy

GitHub Actionsとの連携

mainブランチが更新された際に自動的にFirebaseにデプロイするよう設定する。

自動デプロイ設定

$ firebase init hosting:github

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

...

=== Project Setup

...

# 自動的にリンクが開いてGitHubに認証をかけにいく
i  .firebaserc already has a default project, using test-5fd2b.

=== Hosting:github Setup

...

# リポジトリ名を入れる
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) 

...

# ビルドするかどうか
? Set up the workflow to run a build script before every deploy? Yes

# ビルドする際のコマンド
? What script should be run before every deploy? cd docs && yarn && yarn build

...

? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main

...

✔  Firebase initialization complete!

設定した後 $ git push origin master にてmasterにマージすると自動的にビルド&デプロイが実行される。

Discussion

ログインするとコメントできます