digital gardenダウンロード - digital gardenソースコードのダウンロード

digital garden

AI ソースコード

v0.7.2

ダウンロード

モダンな開発者ブログテンプレート（デジタルガーデンスターター）

GardenPromo こちらのスクリーンショット

next.jsアプリルーター、mdx、contentlayer、tailwind css、 @shadcn/ui、lucideアイコンなどを使用する開発者向けのオープンソースブログ（デジタルガーデニング）テンプレート。

このテンプレートが気に入ったり、使用したりする場合は、GitHubで星を付けてください。これは、より多くの人々がそれを発見するのに役立ち、したがってテンプレートの改善に役立ちます。

注：このプロジェクトは常に進化しており、完璧でも完璧ではありません。私は常に提案と貢献を受け入れています。アイデアや提案がある場合は、お気軽に問題やPRを開いてください。また、貢献したい場合は、計画された機能のロードマップを見ることができます。

モチベーション
はじめる
- コンテンツの書き込み
  - FrontMatter
- 展開
カスタマイズ
- フォント
- 色
- サイン
- 画像
  - ホームページアバター
- メタデータ
  - ナビゲーション
  - ソーシャルリンク
- 分析
  - ヴェルセル
  - うーした
  - もっともらしい
  - Googleアナリティクス
  - 他の分析プロバイダー
- ニュースレターサブスクリプション
  - MailerLite
  - 他のニュースレタープロバイダー
- ヒーローセクション
- 他のヒントとトリック
  - 画像の最適化
例
機能とロードマップ
貢献
- 貢献者
- どうやって？
インスピレーションと言及
サポート

モチベーション

コンテンツを作成する開発者として、私は自分の考えやアイデアを世界と共有できるブログとデジタルガーデンを持ちたいと思っています。現在、現在、これには「完璧な解決策」はありません。含まれている分析、SEO、電子メールサブスクリプション、最新のツール、シンプルなデザインなどが含まれています。ゼロから1つを構築するか、デザインテンプレートを使用して機能をコーディングするか、CMS/ノーコードツールを使用する必要があります。

それで、私は自分自身を使う解決策を構築することにしました。これが結果です。

はじめる

自分のデジタルガーデンのためにこのテンプレートをどのように設定するかを確認したい場合は、すべての変更でこのコミットを確認できます。

テンプレートとしてリポジトリを使用します
pnpm installで依存関係をインストールします
情報と一般的な設定を使用してutils/metadata.tsを編集します
使用するソフトウェアとハードウェアを使用してutils/uses-data.tsを編集します
プロジェクトでutils/projects-data.tsを編集します
utils/navigation-links.tsを編集しますナビゲーションで必要なリンクを使用してください
content/pages/now可用性で編集してください
バイオでcontent/pages/about編集します
pnpm devで開発サーバーを実行します

http：// localhost：ブラウザで3000を開いて結果を確認します。

コンテンツの書き込み

MarkdownまたはMDXでコンテンツを書くことができます。コンテンツはcontent/に配置されており、フォルダーに編成されています。 pagesフォルダーにはページが含まれています。 postsフォルダーにはブログ投稿が含まれています。 projectsフォルダーにはプロジェクトが含まれています。

編集リストページはlibフォルダーで行われます。

/uses -Lib lib/uses-data.ts
/projects lib/projects-data.ts
/social lib/social-data.ts

FrontMatter

FrontMatterは、ページと投稿のメタデータを定義するために使用されます。ファイルの上部にあり、Yamlで書かれています。次のフィールドを定義できます。

title - ページ/投稿のタイトル
description - ページ/投稿の説明
publishedDate - 投稿の日付（ページで使用されていません）
lastUpdatedDateページ/投稿の日付
tags - 投稿のタグのリスト。 tagOptionsリストに追加すると、新しいタグを追加できます。（ページで使用されていません）
series - 投稿のシリーズ。シリーズには、投稿のタイトルと注文番号があります。（ページで使用されていません）
author - 投稿の著者。著者には名前と画像があります。（ページで使用されていません）
status - ページ/投稿が公開されているかドラフトされているか

展開

Vercelまたはその他のホスティングプロバイダーでプロジェクトを展開できます。 Vercelを使用する場合は、このREADMEの上部にあるボタンを使用できます。

package.json著者情報を更新します
RepoをGithubに公開します
Vercelで新しいプロジェクトを作成し、リポジトリをインポートします
vercelでNEXT_PUBLIC_BASE_URL環境変数を設定して、ウェブサイトのルートURLを指します
分析および/またはニュースレタープロバイダーを使用する場合は、Vercelにそれぞれの環境変数を設定します
構築して展開しますか？

カスタマイズ

フォント

このプロジェクトでは、インターをデフォルトのフォントとして使用します。 next/fontsパッケージを使用して、 app/layout.tsxで変更できます。

色

このプロジェクトでは、Tailwind Colorsと @Shadcn/UI Configを使用しています。 globals.cssの色をカスタマイズします。

サイン

フッターで使用する署名コンポーネントがあります。 components/signature.tsxの署名を編集できます。私はfigmaを使用して、 Caveatフォントで署名を書き、SVGとしてエクスポートしました。同じことを行い、コンポーネントのSVGを更新できます。

画像

画像やその他のメディアファイルはpublic/ディレクトリにあります。 /<filename>.<ext>パスを使用して、コンテンツでそれらを使用できます。

ホームページアバター

2分以内にFigmaで同様のアバターを作成する方法に関する簡単なチュートリアルを次に示します。 https://youtu.be/ny-vaeehjkm

メタデータ

utils/metadata.tsのメタデータと著者の詳細を変更できます。これは、タイトル、ソーシャルリンク、ソーシャルハンドル、SEOなどにサイトの周りで使用されます。

ソーシャルリンク

lib/social-data.tsでソーシャルリンクを編集できます。また、ファイルにそれらを追加し、プラットフォーム名をキーとして、およびURLを値として使用することにより、新しいソーシャルリンクを追加することもできます。 SocialButtonコンポーネントは、Simple-Iconsでサポートされている場合、プラットフォームのアイコンを自動的に追加します。

分析

ヴェルセル

構成するには、プロジェクトを選択してVercel Project Dashboardで有効にする必要があります。[Analytics]タブをクリックして、[ダイアログから[有効）]をクリックします。

うーした

Umamiは、自己ホスティングオプションを備えたシンプルで使いやすいWeb分析ソリューションです！ Umami Webサイトで詳細を読むことができます。 （ヒント：鉄道では、低コストまたは無料で自己ホストできます） 。

構成： NEXT_PUBLIC_UMAMI_SCRIPT_URL ＆ NEXT_PUBLIC_UMAMI_WEBSITE_ID環境変数を.env.localファイルとvercelダッシュボードに設定します。

もっともらしい

もっともらしいのは、Googleアナリティクスに代わる、シンプルで軽量なオープンソースの代替品です。もっともらしいウェブサイトで詳細を読むことができます。

構成： NEXT_PUBLIC_PLAUSIBLE_DOMAIN ＆ NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL環境変数を.env.localファイルおよびVercel Dashboardに設定します。広告ブロッカーが懸念される場合は、独自のドメインを介してもっともらしいスクリプトをプロキシできます。詳細については、こちらをご覧ください。

Googleアナリティクス

Google Analyticsは、Googleが提供するWeb Analyticsサービスであり、現在はGoogleマーケティングプラットフォームブランド内のプラットフォームとしてWebサイトトラフィックを追跡および報告しています。 Google Analytics Webサイトで詳細をご覧ください。

構成： NEXT_PUBLIC_GOOGLE_ANALYTICS_ID環境変数を.env.localファイルとvercelダッシュボードに設定します。

他の分析プロバイダー

他の分析プロバイダーをサポートしています。自分で実装したい場合は、提案やPRがある場合は、お気軽に問題を開いてください。

ニュースレターサブスクリプション

MailerLite

MailerLiteは、あらゆる種類のビジネス向けの簡単な電子メールマーケティングツールです。詳細については、MailerLiteのWebサイトでご覧ください。

構成： EMAIL_API_BASE 、 EMAIL_API_KEY 、およびEMAIL_GROUP_ID環境変数を.env.localファイルとvercelダッシュボードに設定します。

他のニュースレタープロバイダー

他のニュースレタープロバイダーのサポートが進行中です。自分で実装したい場合は、提案やPRがある場合は、お気軽に問題を開いてください。

ヒーローセクション

インポートされたヒーローコンポーネントを変更して、 app/(site)/page.tsxで使用する3つの異なるヒーローバリアントから選択できます。

HeroSimpleイメージ、タイトル、サブタイトルを備えたシンプルな中心的なヒーローセクション。
HeroVideo -片側にビデオアスクが埋め込まれた2列のヒーローセクションと、もう片方にタイトルと字幕が埋め込まれています。
HeroImage -片側に画像とタイトルがあり、もう片方に字幕が付いた2列のヒーローセクション。
HeroMinimal小さなヒーローセクション名と役職

他のヒントとトリック

画像の最適化

ImageOptimで無料で画像を最適化することをお勧めします。 Macにインストールしてから、Finderでpublicフォルダーを開きます。すべての画像を選択し、右クリックして、[> [ImageOptim]で開く]を選択します。これにより、フォルダー内のすべての画像が最適化されます。

注：無理をしないでください。喪失した圧縮アルゴリズムで画像を簡単に見栄えを良くすることができます。

例

https://davidlevai.com/-私自身のデジタルガーデン
ドラゴンとコードデジタルガーデン - シンプルな変更ソース
Shafie Mukhreのブログ - ソース
Praveen Kumarsのブログ - ソース
スティーブン・セロロのブログ - ソース
マートンのブログ - ソース

テンプレートを使用している場合は、PRを作成し、このリストにブログを追加してください！

機能とロードマップ

貢献

貢献者

@thedevdavid
@br4adam

このプロジェクトは、開発者向けの開発者からのものです。すべての貢献は大歓迎です！お気軽にお願いします：

バグを報告します
改善のための現在の状態とアイデアについて話し合います
修正を送信します
新機能を提案します

どうやって？

リポジトリをフォークし、 developからブランチを作成します。
コードを追加します。
ドキュメントを更新します。
コードの糸くずとアプリが構築されていることを確認してください。
ブランチdevelopためのプルリクエストを開きます。

あなたが行う貢献はすべて、MITソフトウェアライセンスの下にあります。要するに、コードの変更を送信すると、提出物はプロジェクトをカバーする同じMITライセンスの下にあると理解されます。行動規範はここにあります。

インスピレーションと言及

Delba Oliveira Personal Blog -ContentLayerを使用して目次を使用および構造化する
timlrx/tailwind-nextjs-starter-blog-アイデア

サポート

このテンプレートが気に入ったり、使用したりする場合は、GitHubで星を付けてください。

拡大する

追加情報

バージョン v0.7.2
タイプ AI ソースコード
更新時間 2025-08-18
サイズ 6.04MB
から Github

digital garden