
next.jsブログbulerplateは、tailwind css 3.0を備えたnext.js 12+フレームワークに基づいたブログのスターターコードです。 [next.js、typescript、eslint、prettier、postcss、tailwind cssで作られました。
このプロジェクトをクローンし、それを使用して独自のnext.jsブログを作成します。次のJSブログテンプレートデモを確認できます。
![]() ![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
| ここにロゴを追加します |
ブログ機能:
開発者エクスペリエンス最初:
next.jsの組み込み機能:
地元の環境で次のコマンドを実行します。
git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name
cd my-project-name
npm install
次に、ライブリロードで開発モードでローカルに実行できます。
npm run dev
お気に入りのブラウザでhttp:// localhost:3000を開き、プロジェクトを確認します。
.
├── _posts # Your blog posts
├── public # Static files
│ ├── assets
│ │ └── images
│ │ └── posts # Images used in your blog posts
└── src
├── pages # Next.js pages
├── styles # Your blog CSS files
└── templates # Blog templates
次のJSボイラープレートを簡単に構成できます。次のファイルを変更してください。
public/apple-touch-icon.png 、 public/favicon.ico 、 public/favicon-16x16.png and public/favicon-32x32.png :https://favicon.io/favicon-converter/から生成できます。public/assets/images/logo.png 、 public/assets/images/logo-32x32.png :ブログのロゴsrc/styles/main.css :Tailwind CSSを使用したブログCSSファイルsrc/utils/Config.ts :ブログ名、URLなどの構成ファイル。src/templates/Main.tsx :ブログテーマ次のように、生産モードで結果をローカルに見ることができます。
$ npm run build
$ npm run start
生成されたHTMLおよびCSSファイルは模倣されています(Next JSの組み込み機能)。また、Tailwind CSSから未使用のCSSを除去します。
次のように最適化された生産ビルドを作成できます。
npm run build-prod
これで、あなたのブログは展開する準備ができています。生成されたすべてのファイルは、 distフォルダーにあり、任意のホスティングサービスで展開できます。
このリポジトリを独自のgithubアカウントにクローンし、deployにdeploylify:
誰もがこのプロジェクトに貢献できます。質問がある場合やバグが見つかった場合は、お気軽に問題を開いてください。
MITライセンスの下でライセンス、Copyright©2022
詳細については、ライセンスを参照してください。
![]() ![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
| ここにロゴを追加します |
creativedesignsguruによって♥で作られました