サイト構築してMarkdownファイルを表示する

この記事に書いてあること

Gatsbyを使ってWebサイトを構築するために参照したサイトの情報や補足を書いています。
参照先の手順でそのままできることは書いていません。
サイトを構築して、ブログ記事のもとになるMarkdownファイルを表示するまでを書いています。

サイト構築のステップ

Githubでリポジトリ作成する
Gatsbyで空のサイトを作成する
サンプル記事を作成する
コードを書く
起動してブラウザで表示されることを確認する

参照先

外部サイト「基礎から始めるGatsbyJS入門」を参照してGatsbyを使ったサイト構築しました。

1. Githubでリポジトリ作成する

レポジトリ名を決めて新たにレポジトリを作成します

bash

$ git clone https://github.com/gituraccount/markdown-blog.git

2. Gatsbyで空のサイトを作成する

ここに書いてあるとおりにコマンドを打っていけば出来上がります。
基礎から始めるGatsbyJS入門

bash

$ gatsby new blog-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Gatsbyではいろいろなテンプレートを選べるのですが、僕はスクラッチで作りたいので、gatsby-starter-hello-worldを選んでいます。

3. サンプル記事を作成する

srcフォルダ外に以下の2つのフォルダを作成します。

blog
blog/image/

blog直下にMarkdownファイルを作成します。写真の添付を行う場合、blog/image/配下に格納します。

4. GraphQLでMarkdownファイルを取り出して表示するコードを書く

GatsbyJSでのGraphQLの使い方の通りにコーディングすると

5. 起動確認をして表示を確認する

bash

$ yarn run develop

Chromeでlocalhost:8000にアクセスして、表示されることを確認します。 HTMLをきれいに表示するにはもうちょっと工夫が必要のようです。

余談

当初は、ヘッドレスCMSを使ってブログサイトを構築しようとしていました。
ただ、デザインはテンプレートを使うのではなく、自分でやる方針です。
そうすると、APIで受け取ったHTMLをデコレーションする必要があります。
ただ、それはローカルでMarkdownを書いて、変換されたHTMLをデコレーションするのはほぼ同じです。

コンテンツは自分で書いて管理するので、Markdownで書いて、ローカルに保存するのが一番簡単ということに気づきました。
そこで、一旦サイトをMarkdownで記事を書く方向でサイトを作り直しました。

「サイト構築してブラウザにMarkdownファイルを表示する」はここまでです。
もっと具体的な手順を書く予定でしたが、外部サイト「基礎から始めるGatsbyJS入門」をそのまま実行すれば簡単にできてしまうため、書いていません。
Webサイトを立ち上げるだけであれば簡単にできる時代になりました。

お読みいただきありがとうございました。

◀ Prev