最近の流行に乗っかってgatsbyでブログを作ることにしました。このブログがgatsby+netlifyでホスティングされています。 簡単にですがやり方を書いていきます。
事前の用意
- netlifyに登録
- nodeをインストール
1. ローカルで動かす。
npx gatsby new $REPO_NAME https://github.com/gatsbyjs/gatsby-starter-blog$REPO_NAMEには自分のリポジトリ名を入れてください。 gatsby-starter-blogテンプレート以外を利用する場合にはURLの指定を対象リポジトリに変えます。
この時点で基本的な構成は完成しているため
npm run build
npm run serveこれでローカルで動かすことができます。
“Gatsby Starter Blog”というタイトルの画面が表示されたら成功です。
2. カスタマイズ
このままでは、Kyle Mathewsさんのブログになってしまうので、authorやdescriptionを書き換えましょう。 gatsby-config.js内のsiteMetaDataを書き換えましょう。
module.exports = {
siteMetadata: {
title: `blog.aimof.net`,
author: `aimof`,
description: `日々のプログラミングで学んだこと`,
siteUrl: `https://blog.aimof.net/`,
},
(略)siteUrlは後ほど書き換えます。
トップページの変更は、src/components/bio.jsの書き換えで対応します。
static/profile-pic.jpgとstatic/favicon.icoを自分の物に変更します。
色々カスタマイズはできますが、最低限必要なのはこのくらい。
3. gitリポジトリとしてホスティング
github, bitlab, bitbucketのいずれかにリポジトリをpushします。
4. netlify側の設定
netlifyのサイト一覧画面にて、“New site from Git”ボタンを押して指示に従って先程アップロードしたリポジトリを選択します。 設定が終わると自動でbuildしてホスティングが始まります。
簡単でしょう？
5. 記事作成
blog/内に記事を作成します。 index.mdに普通にmd形式で記事を書いていきます。 私は日付順に並べていますが、人それぞれお好きなように。
記事の先頭にはタイトルと日時とdescriptionを記述してください。 タイトルがないと記事タイトルがディレクトリ名になります。 descriptionがなく、excerpt(よくわからない)がない場合ビルドに失敗するので注意。
---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
description: "概要"
---記事を書いたら、デフォルト記事を削除してpush。
pushする前に
npm run buildを実行してbuildに通るかは確認しておきましょう。
まとめ
いかがでしょうか？ ある程度知識があれば非常に簡単に作れたかと思います。
この後は、ドメイン設定やブログカスタマイズなどいろいろやることがあるかと思いますが、一応ここまで。