はじめに
エンジニアというのは暇があればブログを作り、作って満足して放置し削除、しかしまた暇になればブログを作りという無限ループを行う罪深き存在、、、
今回はブログを作りたいが時間をかけたくない、多機能さは不要でサクッと作成したい、という方に向けたVuePressでブログを作る記事です。
前提条件
- node.js 8.6以降
- yarn
- vuepressはnpmでも導入できますが、方法によってはyarnでの導入が推奨されています。自分はとりあえずyarnで導入しました
- firebaseでアカウント作成、CLIをインストールしている
ブログを作るよ
$ yarn create vuepress
? Select the boilerplate type blog //テンプレートスタイルの選択、ここではblog
? What's the name of your project? // プロジェクトネームを記入します
? What's the description of your project? // プロジェクトの説明を記入します
What's your email? // メールアドレスを記入
? What's your name? //
? What's the repo of your project.
これでブログができました。爆速でしたね。本当にできているの？確認してみましょう
$ yarn
$ yarn run dev
http://localhost:8081/にアクセスしましょう
できていますね。基本的な機能としてタグやブログ内検索がついてます。
作成されたディレクトリは以下のようになっていると思います。
├── README.md
├── blog
| └── _posts // この中に記事を作成、保存します
| └── .vuepress // vueファイルやらページに必要なデータが入っています
├── firebase.json
├── node_modules
├── package.json
├── public
└── yarn.lock
あまりにも爆速でできてしまったので時間が余って仕方のない方のために、作成したブログをFirebaseでデプロイして、爆速でネットの海に公開する方法を書きます。
Firebaseにデプロイする
vueファイルはそのまま使うのではなく、一度htmlに変換してデプロイします。
$ yarn build
blog/.vuepressディレクトリにdistディレクトリが作成されます。
中を見るとビルドされたファイル等が格納されています。このdistをfirebaseにデプロイします。
$ firebase init
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
(*) Hosting: Configure and deploy Firebase Hosting sites
? Please select an option:
(*) Use an existing project
? Select a default Firebase project for this directory
// 使いたいプロジェクトを選択
? What do you want to use as your public directory? public
// blog/.vuepress/distと入力します、デプロイしたいディレクトリを指定します
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
// デフォルトはno SPAなのでYes
これでfirebase側の設定はOKです。本当に設定できているか確認したい場合は
$ firebase serve
こちらのコマンドを実行するとローカルURLが表示されるので、そこを確認して、ブログが表示されていればOKです。
では最後にブログをデプロイします。
$ firebase deploy
Hosting URLに出力されているURLに接続し、ブログが表示されていたら完了です。
終わりに
これで皆さんも気軽にブログを作っては破壊を繰り返せますね！ちなみに自分はVuePress + Firebaseで作ったブログを放置してすでに1週間です。
最後までご覧いただきありがとうございました。