katonobo’s blog

プログラミング中心の雑記ブログ

 お知らせ

 プログラミングスクールの口コミサイト「プロログ」をリリースしました プロログ

 プログラミングに興味ある方はぜひご覧ください!  

 またスクールに通われたことがある方はぜひ口コミにご協力ください!お願いします!

Vuepress + Netlifyのコンボが最強すぎた。

今、夢占い・夢判断のサイトを作っているんですが、なんとサイト自体は一日でできてしまいました!

 

yumemean.netlify.com

 

作った理由は、自分が欲しいからです。僕は結構印象に残った夢の意味を調べたくなるのですが、本だと調べるのが大変だし、今ネット上に存在するサイトでは探すのに時間がかかってしまい、内容を忘れてしまうことがよくあります。そこで、とにかく検索スピードが早く、目的のキーワードまで素早くたどり着けるサイトが欲しかったのです。

まだ中身はスカスカなので、ここからコンテンツを毎日1時間くらいずつ追加して行こうと思っていますが、このサイト、なんとほとんどコードを書いていません。Vuepressというサービスで構築し、デプロイはNetlifyというサービスを使いました。二つとも、このサイトを作るのに初めて触ったのに関わらず1日で済みました。

Vuepressは、提供している内容(文章中心のサイト)から見ればワードプレスに近い感じですが、ワードプレスより全然早いです。

この速さの秘密は、VuePressの仕組みにあります。

Vuepressは、文章のコンテンツを重視した、静的サイドジェネレーターです。例えば公式ドキュメントなど、すでに決まった内容のコンテンツを表示したい時に便利です。すでに表示するべき文章を揃えているから、要求があったらすぐにサイトに表示できるのです。また、コンテンツを書く人にとっても、Markdownが使えるので、慣れた人はかなり便利だと思いました。

Netlifyは、静的ホスティングサービスで、GitHubなどと連携でき、わずかなステップですぐにサイトをデプロイすることができます。

Netlifyの学習に関してはこちらの書籍を参考にさせていただきました。

booth.pm

 

今回のサイトに関しては、すでにある文章を乗せるだけで良い

ブロガーに無くてはならない武器と言えばワードプレスです。先ほども述べたように、ワードプレスの場合はデータベースに文章を格納し、ユーザーからの要求によって表示させる仕組みとなっているので表示するのに少し時間がかかります。今回のVuepressでは、すでに文章を生成して表示するので、スピードがとても早いです。今回作った夢占いのサイトですが、このサイトではユーザーの要求から何かを生成する必要は全くないため、この仕組みが非常にマッチしています。唯一必要になるのが「検索機能」ですが、Vuepressには検索機能が標準で装備されているため、とても簡単に実装できました。

 

最初はもっと欲張っていろんな機能をつけたいと思っていたんですが、よくよく考えて本当に必要な機能を絞ればこの組み合わせがベストだろうと思い方向転換をしたのですが、今のところは正解だっただろうと思っています。

とにかくこれだけ高速で作ることができたのが最高です。また、今回のサイトの作成にかかった費用はゼロ円です。独自ドメインを取得すればお金はかかりますが、それでも1000円ちょっとでしょう。アクセスが増えてきたら広告も貼ろうと思っていますが、このVuepressとNetlifyの組み合わせを用いていくつかサイトを量産したいなと思います。

 

参考:

VuePress をお試ししてみた - Qiita

VuePress入門 | NxWorld