Mon, Jul 13 2020

VuePressとAzureで静的ブログページ配信

安価にnoteみたいなブログを運営する方法を考える

# VuePressでブログを作成する

ブログと言えばWordPressが有名ですが、サーバを用意したりメンテナンスもめんどうです。シンプルにWebページを配布したかったのでVuePressを使います。

VuePress自体が比較的新しいこともありテンプレートの選択肢はあまり多くなさそうです。 mediumishというテンプレートが良さげだったのでこれをベースにします。

Mediumish - VuePress Bootstrap Blog Theme

体裁の統一感や後からのデザイン変更を考えると、Markdown一択と思っています。なによりGit等で構成管理できるのがうれしいポイント。

記事の頭に画像指定が必要になりますので、いい感じの画像を探してきます。フリーで使えるサイトとしては、Pexelsが良さそうだったので採用。

配信に使うのはAWSでもなんでもよいのですが、最近仕事でAzureを使っているので今回はAzureで構成します。

AWSでいうところのS3みたいなストレージです。配置したファイルをWebページとして公開する機能があるので、ありがたく使わせてもらいます。

Azure Storage での静的 Web サイトホスティング

これで完成でもよいのですが、せっかく静的Webページとして作成したのでCDNを設定します。 CDNを利用することでサイト表示が爆速になりますし、独自ドメインの設定も可能になります。

静的な Web サイトを Azure CDN と統合する

imgcomp

今回の構成ではレンタルサーバ等は一切借りていないため、純粋にストレージの従量課金とCDNの配信料金のみです。

データ量やアクセス数にもよりますが、一般的なブログなら月数十円あれば十分運営できそうです。