gatsby starter try ghost
1.0.0
ヘッドレス Ghost CMS からブログを作成するための Gatsby スターター。
Ghost ブログを高速の静的 Web サイトに変えます。このギャツビー テーマは、強化された Ghost Casper のルック アンド フィールを特徴とする Ghost Handlebars エンジンのフロントエンド代替品です。すべてのコンテンツはヘッドレス Ghost CMS から取得されます。
gatsby-config.jsにはうんざりですか?さらに多くの利点がある統合ソリューションについては、Blogody をチェックしてください。
Gatsby よりも Next.js を好みますか? next-cms-ghost に移動してください。
このプロジェクトの使用に関する実践的なガイドについては、チュートリアルを参照してください。
デモをプレイして第一印象を掴んでください。
便宜上、次のプラグインが含まれています。
| 名前 | バージョン | 説明 |
|---|---|---|
gatsby-theme-ghost-dark-mode | ダークモードの切り替え? | |
gatsby-rehype-ghost-links | CMS リンクを絶対リンクから相対リンクに書き換える | |
gatsby-rehype-prismjs | PrismJS を使用した構文ハイライト | |
gatsby-theme-ghost-members ? | メンバーの定期購読 |
それらが必要ない場合は、 gatsby-config.jsおよびpackage.jsonから削除できます。これにより、ビルド プロセス中に時間を節約できる可能性があります。
Gatsby テーマまたはプラグインをインストールすることで、追加の機能を統合できます。次のプラグインはgatsby-starter-try-ghostで動作することがテストされています。
| 名前 | バージョン | 説明 |
|---|---|---|
gatsby-rehype-inline-images ? | ぼかしのあるインライン画像の遅延読み込み | |
gatsby-theme-ghost-contact | お問い合わせページ | |
gatsby-theme-ghost-commento | Commento によるコメント システム | |
gatsby-theme-ghost-toc ? | 目次 | |
gatsby-plugin-ackee-tracker | Ackee によるサイト追跡 | |
gatsby-plugin-google-analytics | Google Analyticsによるサイト追跡 |
このスターターを実行してインストールします
gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghostディレクトリを変更する
cd try-ghost走る
yarn develop http://localhost:8000にあるサイトにアクセスします。
//siteConfig.js
module . exports = {
// Do not include a trailing slash!
siteUrl : `https://your-blog.com` ,
// Maximum number of post shown per page
// Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
postsPerPage : 3 ,
// This allows an alternative site title for meta data for pages.
siteTitleMeta : `Gatsby Starter Ghost CMS` ,
// This allows an site description for meta data for pages.
siteDescriptionMeta : `Turn your Ghost blog into a flaring fast static site with Gatsby` ,
// Used for App and Offline manifest e.g. Mobile Home Screen
shortTitle : `Ghost` ,
siteIcon : `favicon.png` ,
backgroundColor : `#e9e9e9` ,
themeColor : `#15171A` ,
// Include Gatsby images for lazy loading and image optimizations (default: true)
gatsbyImages : true ,
// Overwrite navigation menu (default: []), label is case sensitive
// overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
} ;上記の構成で、変更する最も重要なフィールドはsiteUrl 、 siteTitleMeta 、およびsiteDescriptionMetaです。ニーズに合わせて少なくともそれらを更新してください。
すべてのコンテンツは Ghost CMS から取得されます。デフォルトでは、コンテンツはhttps://cms.gotsby.orgのデモの場所から取得されます。確かに、独自のコンテンツを調達したいと思うでしょう。コンテンツ キーを利用できるようにするには 2 つの方法があります。構築シナリオに応じて方法を選択してください。
クラウド プロバイダー (Gatsby、Netlify、Vercel など) を使用してプロジェクトを構築する場合、最良のオプションは、キーに環境変数を指定することです。
| 鍵 | 値（例） |
|---|---|
| GHOST_API_URL | http://ローカルホスト:2368 |
| GHOST_CONTENT_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |
それらを定義できる場所はプロバイダーによって異なりますが、通常はサイト設定の下にオプションがあります。これにより、パブリック リポジトリでのキーの公開が回避され、最も安全になります。
ローカルでビルドする場合、またはビルド ディレクトリに世界中からアクセスできないプライベート ネットワーク上でビルドする場合は、次の JSON 構造を持つ新しい.ghost.jsonファイルをベース ディレクトリに安全に追加できます。
{
" development " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
},
" production " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
}
}このファイルは、パブリック リポジトリに誤って公開されることを避けるために、 .gitignoreの一部です。 apiUrlとcontentApiKey変更して、独自の Ghost CMS コンテンツ API キーと一致させます。
最良の SEO 結果を得るには、Ghost 管理設定内で [このサイトを非公開にする]フラグを選択して、デフォルトの Ghost Handlebars テーマのフロントエンドを無効にすることを強くお勧めします。これにより、Ghost インストールの前にパスワード保護が有効になり、 <meta name="robots" content="noindex" />が設定されるため、Gatsby フロントエンドが検索エンジンの信頼できるソースになります。
sudo npm install npm-upgrade -g upgrade をインストールすることをお勧めします。ベース ディレクトリに移動し、次のコマンドを使用してすべてのパッケージを更新します。
npm-upgrade package.jsonファイル内のすべてのパッケージを更新するように求められます。次に、新しいパッケージをダウンロードします。
yarn
yarn clean更新プロセスが完了したので、 yarn build (またはyarn develop )で新しいビルドを開始できます。
すべての開発はそこで行われているため、すべてのバグと問題は gatsby-theme-try-ghost/issues に報告してください。
このプロジェクトはギャツビーやゴーストとは無関係です。
Copyright (c) 2020 styxlab - MIT ライセンスに基づいてリリースされています。
