お勉強 y-s

誕生日だし飲みながらvuepressでサイト作ってみた

このエントリは飲酒プログラミング Advent Calendar 2019の4日目です。

4日目にしちゃいましたが、4日目に実行してそれを記そうと思ってたらよりによって当日トラブって全然時間がありません…。

なぜこの日にしたかというと、4日は自分の誕生日だからです。
時間がなかったので大したものは用意できませんでしたが、スーパーのお寿司とケーキを買って、お酒を飲んでひっそりやってます。

さて、何をするかと思いましたが時間がないのでなんかのチュートリアルを飲みながらやりたいなと思い、
そういえばポートフォリオ作ってないなあと思ったので前から試したいと思っていたVuePressでチュートリアルを終えてGitHubにコミットするところまでやりたいと思います。
静的サイトジェネレータを試してみたかったというのも大いにあります。
NodeJSはちょろっとしか触ったことないのでパッケージ管理に慣れるという意味もあります。
間に合うかな？

Vuepress
https://vuepress.vuejs.org/

本日のお供

好きなお酒はビールと日本酒なので一つずつ

グランドキリンIPA

クラフトビールが好きなんですが、日本でメインなのはまだまだ苦いピルスナー。
でも、あまりビールを飲まない人がイメージするビールは、たくさんある種類の中の一つでしかありません。
これは国内でメジャーなビールのメーカーであるキリンが販売しているIPAという種類のビール。
IPAも苦いタイプの酒ですが、香りが強くただ苦いだけではないのが特徴です（ざっくりしすぎですね。）
これは初めて飲みましたが、香りと苦味が混ざって美味しいです。
これをメジャーなメーカーが売っているのは嬉しい。
ちなみにグランドキリンは他にも種類があります。

グランドキリンに限った話ではなくビール全般の話ですが、
苦いのが苦手な人はエールとかヴァイツェン（白ビール）とか、全然違うのだとフルーツビールとか、そのへんがおすすめです。

無冠帝

さて、川崎サポーターの自分としては色々あるこの酒ですが、
今では結構関東でも変えるようになりました。
日本酒の味を論評できるほど詳しくはないのですが、
菊水酒造の飲みやすくて美味しい日本酒です。
今回は常温でしたが冷やしたほうが美味しいかも。
ビールに比べて論評が淡白だという苦情は受け付けますｗ

今現在のtwitterアカウントのアイコンやGitHubのアイコンの酒はこれです。

構成

AWSのエンジニアなので、GitHubにコミットして最終的にS3にデプロイして公開、という形まで持っていきたいですね。
構成図を作る時間はないので、文字だけで書いておきます。

GitHub→S3＋CloudFrontという構成
GitHubにコミット（セルフでプルリク？）して、それをトリガーにしてデプロイ
GitHub　Actionを使うかCodeBuildにやらせるかは考え中

やってみた

VuePressのセットアップ

まずはGetting Startedを読みます。
合わせてコミットするためのリポジトリをGitHubに作成
そのリポジトリをgit cloneして、そこで

yarn init
yarn add -D vuepress

ドキュメントに従ってdocsディレクトリを作成し、packages.jsonに以下を追記

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

どうやらこれを記載することによって、docsディレクトリの中でyarn dev、yarn buildを実行できるようになるようです。

yarn docs:devを実行するとhttp://localhost:8080/　で立ち上がるのでアクセス

yarn devを実行するとReadMe.mdに記載した内容が表示されます。

yarn buildでhtmlが生成されます。
どうやらこれをデプロイすれば良さそうですね。
ページが増えたときにどう並列させていけばいいのかとか気になりますが、一旦はここまで。デプロイフローを作ります。

S3のデプロイ

まずはデプロイするS3バケットを作成します。
バケットを作成し、静的WEBサイトホスティングを設定。
ここで設定するバケット名は任意ですが、自分のアカウントだけでなくグローバルでユニークな名前を付ける必要があります。
これは恐らく静的WEBサイトホスティングを設定するときに名前がかぶったら困るからそうなっているのでしょう。
通常のバケット作成ではパブリックアクセスはすべてブロックするようになっていますが、今回は逆に公開したいので何もブロックしません。

CodeBuildの設定をしよう…と思いましたが時間切れなのでここまで。

とりあえず、コミットだけはしました。
https://github.com/yutaro1985/Curriculum-Vitae-vuepress

yarn buildでhtml生成できるので、それをどこかに公開してやればよさそうな感じですね。
デプロイフローを整えた頃に追記します。

参考にしたもの

S3へのデプロイはこちらを参考にしました。
https://medium.com/@fernalvarez/documentation-with-continuous-delivery-pipeline-using-vuepress-s3-and-buddy-works-5daffdeb191d

RECOMMENDこちらの記事も人気です。