Gatsby ブログを構築してホストする方法

ギャツビー: Orbiter を使用してブログを構築してホストするための初心者ガイド

Gatsby は、React 上に構築された主要な静的サイト ジェネレーターであり、動的 Web サイトの作成プロセスを簡素化します。 2015 年にオープンソース プロジェクトとして開始され、2023 年に Netlify に買収され、現在は開発者の間で人気の選択肢となっています。 Netlify は堅牢なホスティングを提供しますが、Orbiter は、Gatsby サイト向けに特別に設計された、よりシンプルでユーザーフレンドリーな代替手段を提供します。このチュートリアルでは、Orbiter で基本的な Gatsby ブログを構築してデプロイする方法を説明します。

はじめに: 前提条件とプロジェクトのセットアップ

始める前に、以下のものがあることを確認してください:

1. 無料の Orbiter アカウント (サインアップは簡単です)。
2. Node.js v18 以降 (まだインストールされていない場合は簡単にダウンロードできます)。
3. コード エディター (VSCode、Zed、またはお好みの選択肢)。

ターミナルを開き、プロジェクト ディレクトリに移動します:

<code class="language-bash">cd my-projects-folder</code>

使いやすくするために、事前に構築された Gatsby ブログ テンプレートを利用します。 ターミナルで次のコマンドを実行します:

<code class="language-bash">npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog</code>

これにより、プロジェクトが初期化され、必要な依存関係がインストールされます。 端末には、次のような追加の指示が表示されます。

<code>  cd gatsby-starter-blog
  gatsby develop</code>

これらの指示に従ってください。まず、ディレクトリを変更します:

<code class="language-bash">cd gatsby-starter-blog</code>

次に、ローカル開発サーバーを起動します。

<code class="language-bash">gatsby develop</code>

http://localhost:8000 からブログにアクセスしてください。 プレースホルダー投稿を含むサンプル ブログが表示されます。

ブログをカスタマイズする

コードエディターでプロジェクトを開き、gatsby-config.js を見つけます。 このファイルにはサイトのメタデータが含まれています。 siteMetadata セクションを変更して、ブログの詳細を反映します。 例:

<code class="language-javascript">siteMetadata: {
  title: `My Gatsby Blog`,
  author: {
    name: `Your Name`,
    summary: `Your brief bio`,
  },
  description: `A description of your blog`,
  siteUrl: ``, // Leave blank initially, or use your future Orbiter URL
  social: {
    twitter: `yourTwitterHandle`,
  },
},</code>

変更を保存します。ブラウザは自動的に更新されます。 デフォルトの作成者画像 (src/images/profile-pic.png) を独自の画像に置き換えます。

次に、content/blog フォルダーに移動します。 不要なプレースホルダー投稿を削除し、1 つだけ残します。 Gatsby は、各投稿が my-first-post ファイルと関連アセットを含むフォルダー (例: index.md) であるフォルダー構造を使用していることに注意してください。

残りの index.md ファイルを編集してコンテンツを追加します。 Markdown 構文 (または WYSIWYG エディター) を使用します。 フロントマター (上部の YAML セクション) を更新して、投稿のタイトルと説明を調整します。

保存後、変更は http://localhost:8000 に反映されます。

ブログを Orbiter にデプロイする

満足したら、サイトを構築します:

<code class="language-bash">npm run build</code>

これにより、public フォルダーに必要なファイルが生成されます。

Orbiter アカウントにログインし、[サイトをアップロード] をクリックします。 public フォルダーを選択します。サイトのサブドメインを選択し、[作成] をクリックします。 あなたのブログはすぐに公開されます!

サイトを更新するには、再構築 (npm run build) してから、Orbiter で歯車アイコンをクリックし、[サイトの更新] を選択して、更新された public フォルダーをアップロードします。

結論

Gatsby は、特にブログの静的サイトの作成を簡素化します。 Orbiter を使用すると、導入が驚くほど簡単になります。 今すぐギャツビー ブログの構築を始めましょう! 私のサンプル サイトは [Your Orbiter URL] から入手できます。 このプレースホルダーを実際のサイトの URL に置き換えてください。

以上がGatsby ブログを構築してホストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。