Javascript/vue/vuepress
目次
[非表示]vuepressとは
Markdownのドキュメントジェネレーター
vuepressインストール
npm init npm install -D vuepress mkdir docs
参考:https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
helloworld
echo "# Hello World" > docs/README.md echo "# Hello hoge" > docs/hoge.md
localhost:8080/hoge でアクセス
ビルド設定準備
package.json を以下のように編集
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "vuepress dev docs", "build": "vuepress build docs" }
ビルド(開発用)
$ npm run dev
ttp://localhost:8080/
ビルド(リリース用)
$ npm run build
サイトデザインなど変更
設定ファイル
docs/.vuepress/config.js
リンクの仕方
- [タイトル1](setup/README.md)
画像追加
![image](../../img/hoge.png)
画像ファイル配下へ置く。
docs/.vuepress/public/img/hoge.png
サイドバー
docs/.vuepress/config.js
module.exports = { title: 'メモ', themeConfig: { sidebar: [ '/', '/hoge', // ['/page-b', 'Explicit link text'], ] } }
無いページが追加されてるとサイドバー全体が表示されなくなる。
参考:https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
公式参考:https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar
ロゴ画像
docs/.vuepress/config.js
module.exports = { themeConfig: { logo: '/img/logo.png',
themeConfigの下にlogoを入れる
docs/.vuepress/public/img/logo.png
カスタム変数用意
.vuepress/scripts/string.js
const string = { example: { mail: "hoge@example.com" } } export default { computed: { $string () { return string } } }
.vuepress/enhanceApp.js
import strings from "./scripts/string" export default ({ Vue, options, router, siteData }) => { Vue.mixin(strings); }
example1.md
ver:{{$string.example.mail}}'
全文検索API
Algoliaが使える。https://www.algolia.com/users/sign_in
algoliaとはSaaSの全文検索エンジンサービスで広告を表示すれば無料で使える。
自身のサイトがドキュメントサイトで、Algoliaコミュニティに登録すれば、無料で24時間毎にクロールしてくれる。
Algolia DocSearch申請
https://community.algolia.com/docsearch/#join-docsearch-program
こんな感じの結果が1日で来る
apiKey: 'bb637hogehogegehohogehogegehohogehogegehoge', indexName: 'gehogehoge', https://github.com/algolia/docsearch-configs/blob/master/configs/hogehoge.json
regionはeuropeに強制でなる模様。
参考:https://kitigai.hatenablog.com/entry/2019/04/04/133432
やり方
docs/.vuepress/config.js
module.exports = { themeConfig: { algolia: { apiKey: '<API_KEY>', indexName: '<INDEX_NAME>' } } }
- 既にmodule.exports/themeConfig構成がある場合は、そこに混ぜないと、上書きしてしまうので注意。
- しばらくすると検索に全文検索結果が出てくるはず。
検索結果件数
algolia: { apiKey: '<API_KEY>', appId: '<API_ID>', indexName: '<INDEX_NAME>', algoliaOptions: { hitsPerPage: 10, }, }
hitsPerPageを10にすると10件に増える。(デフォは5件)
apiKeyはanalyticsのapikeyじゃなくて、初回メールきたapiKeyを使う。後日管理画面には記載されないっぽい。(管理画面にはanalyticsのapiKeyしかない)
参考:https://stackoverflow.com/questions/52019383/vuepress-algolia-increase-results
15日試用期間
- 最大5,000,000レコード - 最大2500万オペレーション - 無制限の同義語 - 最大10,000のクエリルール - 開発チームによるサポート
COMMUNITYプラン(無料版)の制約
1秒あたりのクエリ 30query/sec 1レコードの最大サイズ 10KB 最大レコード数 1万レコード 最大オペレーション数 10万オペレーション/month
https://qiita.com/mido_app/items/919839aaf33382d9bc89
algoliaで同一サイトでアカウントを別にしたいとき
旧アカウントに紐付いてたcacheを削除して、問い合わせして 新しいアカウント側でリンクを踏んで(https://www.algolia.com/users/sign_in)dosearchのcacheができてた。
vuepressでsitemap.xml作成
$ npm install -D vuepress-plugin-sitemap
docs/.vuepress/config.js
module.exports = { plugins: [ [ "sitemap", { hostname: "https://hogehoge.example.com/", changefreq: "weekly" } ] ] };
参考:https://hene.dev/blog/2019/05/02/sitemap/#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83
docs/.vuepress/public/robots.txt
User-agent: * Sitemap: https://hogehoge.example.com/sitemap.xml
sitemap.xml作成方法
$ npm run build
docs/.vuepress/dist/sitemap.xml にファイルができてることを確認
firebaseでvuepressを公開
gcp/Firebase/Hosting [ショートカット]
publicを"docs/.vuepress/dist"とする
vi firebase.json
{ "hosting": { "public": "docs/.vuepress/dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } }
以下のようにして公開できる $ npm run build $ firebase deploy
もしくは
vi package.json
{ "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "predeploy": "npm install && vuepress build docs", "deploy": "firebase deploy", "postdeploy": "./postdeploy.sh" },
上記記述してから
$ npm run deploy
postdeploy.sh はdeploy後に実行したい通知などあればここに記述するなければpostdeployは削除で良い。