ホームページ > ウェブフロントエンド > jsチュートリアル > Rino、HTML、CSS、Typescript/JavaScript を備えた簡単な静的 Web サイトビルダー

Rino、HTML、CSS、Typescript/JavaScript を備えた簡単な静的 Web サイトビルダー

Linda Hamilton
リリース: 2024-12-26 16:01:14
オリジナル
330 人が閲覧しました

Rino, easy static website builder with HTML, CSS and Typescript/Javascript

高速学習、前処理、直感的な Web サイトビルダー

Rino.js は、HTML、CSS、Typescript/JavaScript を使用して効率的な静的 Web サイトを構築するための頼りになる Web フレームワークです。あらゆるレベルの開発者向けに設計されており、標準的な Web テクノロジーのパワーと合理化された前処理ツールを組み合わせることで、Web 開発を簡素化します。

要件

  • Node.js
  • HTML
  • CSS
  • JavaScript / Typescript

クイックスタート

始めるのはとても簡単です:

npm create rino@latest
ログイン後にコピー
ログイン後にコピー

たった 1 つのコマンドでプロジェクトをセットアップし、すぐに開発を開始できます。

あなたのウェブサイトに Rino.js を選ぶ理由?

Angular、React、Next.js、Vue、Nuxt などの最新の Web フレームワークは Web アプリ開発を再構築しましたが、多くの場合、次のような課題が伴います。

  • コストの増加: ホスティング、トラフィック管理、メンテナンスの費用が増加します。
  • 複雑さ: 急な学習曲線、複雑なルール、遅いビルド速度。
  • リソース需要: より高度なコンピューティング要件。

Rino.js を入力してください。 プロセスを簡素化するために構築された Rino.js は、標準的な Web テクノロジ (HTML、CSS、JavaScript) に重点を置いています。それは以下を提供します:

  • HTML コンポーネント: 再利用可能なコンポーネントを簡単に構築します。
  • シームレスな統合: JavaScript には npm パッケージとライブラリを使用します。 CSS ファイルをインポートし、1 つのファイルとして生成します。
  • 自動化ツール: サイトマップの生成、画像の圧縮など。

初心者でも 30 分以内に Rino.js の基本を理解できるため、迅速な開発に最適です。さらに詳しく知りたい場合は、プロジェクトの構造と構文ガイドをご覧ください。

Rino.js は柔軟性も備えています。必要に応じて React や Vue などの他のフレームワークを統合でき、プロジェクトを軽量かつ管理しやすく保ちます。

コマンド

開発
開発サーバーを実行します:

npm run dev
ログイン後にコピー
ログイン後にコピー

静的 Web サイトの生成
静的 Web サイトを生成します:

npm run generate
ログイン後にコピー
ログイン後にコピー

サイトマップを含む静的 Web サイトを生成します:

npm run generate-sitemap
ログイン後にコピー

画像圧縮
画像圧縮ツールを実行します:

npm run image
ログイン後にコピー

プロジェクトの構造

Rino.js 2 では、直感的なプロジェクト ディレクトリとファイル構造が導入され、自動化とシンプルさが強調されています。
主要ディレクトリ

  • /pages: Web ページのベース HTML ファイル。ファイルとディレクトリの構造は、最終出力を直接反映します。
  • /components: 再利用可能な HTML コンポーネント。次のような構文で使用します。
npm create rino@latest
ログイン後にコピー
ログイン後にコピー
  • /mds: 自動的に HTML に解析されるマークダウン ファイル。
  • /public: 画像や外部アセットなどの静的ファイル。
  • /scripts: JavaScript ライブラリ。エクスポート可能なスクリプトを /scripts/export/.
  • に配置します。
  • /styles: CSS ライブラリ。エクスポート可能なスタイルは /styles/export/.
  • にあります。

JavaScript/TypeScript を使用したテンプレート化

npm run dev
ログイン後にコピー
ログイン後にコピー

マークダウンのサポート

Markdown を HTML ファイルに直接埋め込みます:

npm run generate
ログイン後にコピー
ログイン後にコピー

MIT ライセンスを取得した無料のオープンソース プロジェクト

Rino.js は MIT ライセンスに基づくオープンソース プロジェクトであり、誰でも無料で使用できます。

もっと詳しく知る

  • 公式ウェブサイト - https://rinojs.org/
  • GitHub ディスカッション - https://github.com/orgs/rinojs/Discussions
  • GitHub - https://github.com/rinojs

Rino.js を今すぐ始めて、より速く、よりシンプルに、より直観的に Web サイトを構築する方法を再定義してください。

以上がRino、HTML、CSS、Typescript/JavaScript を備えた簡単な静的 Web サイトビルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート