Gridsomeを使って爆速でwebサイトを作成してみた。
「Vue.js 急成長スタートアップを支えるフロントエンド戦略」というFinatextホールディングスさんが開催するwebinerに参加しました。
その際、登壇された方がGridsomeを使って、League of Legendのアイテムを表示するサイトを簡単に作っていたんです。
めちゃすご！と思ったので、僕も簡易的なサイトを作ってみました。
開発環境
macOS: Big Sur 11.5.2
MacBook Pro: (Retina, 13-inch, Early 2015)
簡易サイト作成の手順
1 Gridsome CLI toolをインストールします。
$ yarn global add @gridsome/cli
もしくは
$ npm install --global @gridsome/cli
次に、下記コマンドを打ちます。
新しいプロジェクトを作成。
$ gridsome create first-gridsome-site
作成したプロジェクトディレクトリに移動。
$ cd first-gridsome-site
http://localhost:8080でサーバーを立ち上げるために実行。
$ gridsome develop
そして、ブラウザでlocalhost:8080を入力。
すると、下記画像のようにサイトが立ち上がります。
これでサイトが立ち上がるなんて、驚きですよね、、
簡易ブログも立ち上げることもできる。
記事を参考にして、ブログサイトを簡単に立ち上げてみたいと思います！
まずはプロジェクトを作成します。
$ gridsome create my-blog https://github.com/gridsome/gridsome-starter-blog.git
ディレクトリを移動します。
$ cd my-blog to move into the project directory
http://localhost:8080でサーバーを立ち上げるために実行。
$ gridsome develop
下記のような画面がターミナル上で出てくるかと思います。
ブラウザでlocalhost:8080を入力すると、サーバーが立ち上がって下記の写真のような画面が出ると思います！（少し改良しました。笑）
参考記事