VuePressはじめ（＋気になったバグをFIX）
VuePressのはじめかた
必要なもの
- Node.js (10以上)
- Yarn (1系)
- Firebase CLI
今回は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の記事が参考になる。
バグ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