ryosuke gatsby blog
1.0.0
GatsbyJSフレームワークで作成された個人的なポートフォリオとブログは、静的React駆動のWebサイトを生成します。稲妻は高速で、SEOとPWAフレンドリーで、GitHubページやNetlifyなどのCDNに直接展開します。
これは、GoまたはRubyで書かれた静的サイトジェネレーターソリューションに代わるJavaScriptの代替です。また、ブログアーカイブ、画像処理、SEO最適化などの機能を備えたギャツビースターターブログよりも肉体化されています。
---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---
Your post hereblogまたはprojectにすることができます。CodePenモジュールを埋め込むには、埋め込みコードをコピーして、インポートされるJSスクリプトを削除するだけです。
埋め込まれたコードのブロッククオート部分をマークダウンファイルにコピーすることにより、ツイートを投稿にシームレスに埋め込みました。リンクされたJSファイルをコピーしないでください。プラグインは自動的に処理します。
gatsby-config.jsで構成します。
gatsby-config.jsで構成します。
Static Reactアプリを作成するSSGであるGatsbyjsで実行されます。
npm installnpm run developファイルをローカルに構築し、 gh-pagesと呼ばれる特定のGit Repoブランチを更新するNPMスクリプトを使用して展開します。
これを有効にするには、プロジェクトのgitリポジトリを初期化し、変更をコミットし、Githubリポジトリをリモートリポジトリとして追加します。必ずリモコンにoriginとしてラベルを付けてください。そうしないと、ギャツビーの展開は、どのリポジトリにプッシュするかわかりません。
origin Remote Repoにサイトを展開します：
npm run deploy
git pull最新の投稿を確実にし、競合をマージします。src/content/projectsまたはsrc/content/blogに新しいフォルダーを追加します。これは記事のナメクジに変換されます - タイトルを「ケバブケース」する必要はありませんが、フォーマットを念頭に置いてください。<img src="./my-image.jpg" />使用して、ポストのマークダウンと同じフォルダーをローカルにリンクします。npm run deploy GitHubページに展開します。このサイトは、Netlifyに展開することもできます。 NetLifyにログインし、新しいアプリを作成し、このリポジトリを指すだけです。手順に従って、Netlifyがgatsby buildを実行していることを確認し、 /publicディレクトリを指していることを確認してください。これにより、Netlify CMSを使用することもできます。これは、OAUTH2サポートにサーバーが必要であり、NetLifyでのホスティングにより、各編集で再構築できるため（個人のマシンから構築してそこから展開するのではなく）。
