devblog
1.0.0
DevBlog は、ブログを始めたいと考えている開発者 (またはその他の人) 向けに設計された、完全にカスタマイズ可能なブログ テンプレートです。すぐに使用して展開できる状態で提供されており、必要に応じて編集したり拡張したりすることもできます。ブログは GatsbyJS によって完全に静的に生成され、すぐに使用できる構文強調表示 (PrismJS 経由) が付属しており、サーバーサイド レンダリングなどが組み込まれています。
ライブデモを表示するには、ここをクリックしてください。
config.jsファイル経由でカスタマイズ可能最初のステップは、GatsbyJS CLI をローカルにインストールすることです。これは、コマンドnpm install --global gatsby-cli実行することで実現できます。
新しい Gatsby サイトを作成する場合、CLI を使用するとスターターを指定できます。この場合は、このリポジトリの URL を指定するだけです。これは、コマンドgatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblogを実行することで実現できます。
これでセットアップが完了したので、ブログを使用したり、必要に応じて編集を行ったりすることができます。たとえば、 gatsby develop実行して、localhost:8000 で使用可能なホットリロードされた開発環境を起動したり、 gatsby build実行して、最適化された運用ビルドをビルドしたりします。 Gatsby の CLI コマンドの完全なリストについては、ドキュメントを参照してください。
あるいは、単にこのリポジトリをフォークまたはクローンしたい場合は、 npm install実行し、その後gatsby develop実行するだけですぐに実行できるようになります。
基本的な構成は、プロジェクト リポジトリのルートにあるconfig.jsファイルを介して実行できます。このファイルを通じて、ブログの主な色を編集したり、ブログの作成者や説明を追加したりすることができます。デフォルトは次のとおりです。
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;注: 「必須」とラベル付けされている構成オプションは、基本的なプレゼンテーションの目的で必要です。 「必須」コメントのないものは、使用したくない場合は削除できます。
上記で参照した構成変数は次のように使用されます。
| 変数 | 使用方法の説明 |
|---|---|
| タイトル | ブログのタイトル。これは主にページのタイトルに使用されます。 |
| 著者 | ブログの著者。これはヘッダー名とページタイトルに使用されます。 |
| 説明 | 著者の説明。これは作者の下のヘッダーに使用されます。 |
| 原色 | ブログの原色。 |
| showHeaderImage | ヘッダー画像を表示するかどうかのフラグ。 |
| 共有ボタンの表示 | 各ブログ投稿にソーシャル メディア共有ボタンを表示するかどうかのフラグ。 |
| ページあたりの投稿数 | ブログのトップページのページごとの投稿数。これはページネーションに使用されます。 |
| 社交 | ブログ著者のソーシャルメディアプロフィール。現在、個人 Web サイト、GitHub、Twitter、LinkedIn のみがサポートされています。 |
デフォルトのヘッダー画像を変更するには、 /srcフォルダー内のmain.jpgファイルをオーバーライドするだけです。
デフォルトの favicon を変更するには、 /srcフォルダー内のfavicon.icoファイルをオーバーライドするだけです。
すべてのブログ投稿は/src/pagesにあり、 gatsby buildコマンドが実行されると静的にビルドされます。新しい投稿を作成するには、希望する URL の名前を付けて/src/pagesに新しいフォルダーを作成するだけです。たとえば、URL をmyblog.com/hello-worldとして表示したい場合は、フォルダーをhello-worldとして作成します。フォルダーを作成したら、その中にindex.mdファイルを作成するだけです。
ページの先頭にはすべて、特定の投稿に関する必要な情報を Gatsby に伝える同じマークダウンが含まれている必要があります。基本的なテンプレートは次のとおりです。
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end -->上記のコード スニペットで必要なのは、タイトルと日付だけです。アイキャッチ画像はオプションであり、上記の例のように、作成したページフォルダーに画像を追加して参照するだけで追加できます。抜粋部分もオプションであり、 <!-- end -->マーカーを使用しない場合は、投稿の最初の部分が自動的に抜粋として使用されます。
このテンプレートには、コード スニペットの使用方法、画像の挿入、注目の画像と抜粋の使用などのすべてが含まれる 3 つのブログ投稿の例が付属しています。
ブログをデプロイして公開する準備ができたら、いくつかのオプションを利用できます。
ブログを手動でデプロイするには、運用ビルドを作成するためにgatsby build実行する必要があります。その後、Digital Ocean ドロップレットや AWS インスタンスなど、通常 React アプリが接続する任意のサーバーを使用できるようになります。必要なのは、静的ファイルを提供する何らかの方法だけです。
React アプリケーションのデプロイに慣れていない場合は、他にもさまざまなオプションがあります。
GitHub ページにデプロイするには、まずgatsby-config.jsでパス プレフィックスを設定する必要があります。デフォルトはpathPrefix: '/devblog'ですが、これは選択したリポジトリ名に変更する必要があります。たとえば、 https://github.com/YOURUSERNAME/myblogにブログがあり、それをhttps://YOURUSERNAME.github.io/myblogにデプロイする場合は、パス プレフィックスをpathPrefix: '/myblog'に設定します。 pathPrefix: '/myblog' 。
次に、 npm run deploy実行するだけで、ブログがデプロイされます。
あるいは、 https://YOURUSERNAME.github.io (つまり、プロジェクト サイトではなくユーザー/組織サイト) にデプロイする場合は、さらにいくつかの変更が必要です。 Gatsby の公式ドキュメントには、ここで詳しく説明されています。
ブログを展開する最も簡単な方法の 1 つは、Netlify を使用することです。 Netlify にデプロイするには、下のボタンをクリックしてプロンプトに従ってください。
ブログを展開するために使用できるオプションは、上で概説したオプションだけではありません。 Gatsby の公式ドキュメントでは、他の多くのオプションについて詳しく説明されています。導入オプションの詳細については、ここをクリックしてください。
MITライセンスに基づいてライセンスされています。詳細については、LICENSE.md を参照してください。
