htmlgoddessダウンロード - htmlgoddessソースコードのダウンロード

htmlgoddess

その他のカテゴリー

1.0.0

ダウンロード

html女神

1999 年のような Web サイトを作成するためのミニマリストフレームワーク。

要件

インターネット、テキストエディター、および Web ブラウザーを備えたコンピューター
npm

はじめる

ターミナルを開く
npm install -g @htmlgoddess/cli
これにより、コマンドラインユーティリティがインストールされます。
htmlgoddess create path/to/your/new/site
プロンプトに従えば、すぐに起動して実行できるようになります。

やるべきこと

リファクタリング: テストを分離します。
追加:「ホスト」コマンド。
add:stylechoose コマンドを使用して、ユーザーが作成後にテーマを変更できるようにします。
特技：スペルチェッカー。
特技: コミット時にトリガーする自動 commitize フック。
特技: 校正コマンド。
特技：「ドメイン」コマンド。
特技：ダウンロード可能な実行可能ファイル。
リファクタリング: CNAME をホスティング用の yaml 設定に交換します。
タスク: カバレッジ
「docs」を構成可能な変数に変換する
タスク: ウォッチャーがメモリをリークしていないことを確認します。
バグ: cli.action はテスト中もコンソールに出力します。
特技：GUI

HTMLのことは何も知りません

それで大丈夫です。まずはこのビデオをご覧ください。

コマンドラインメニュー

npm start実行すると、次のオプションが表示されます。

仕組み

「src」フォルダー内のファイルは、「docs」フォルダー内の静的 HTML ファイルにコンパイル (印刷) されます。
src/templatesフォルダーにはテンプレートが含まれています。これらはコンテンツフォルダーとともにコンパイルされ、静的 HTML ページが生成されます。
src/contentフォルダーにはサイトコンテンツが含まれており、HTML コードのチャンクである HTML ファイルに保存されます。
npm run print実行すると (またはターミナルメニューから印刷を選択すると)、コンテンツとテンプレートが静的 HTML ファイルにコンパイルされ、docs フォルダーが再作成されます。 (注: ドキュメント内のすべてが上書きされるため、コンテンツは src ディレクトリにのみ保存してください。)
メニューから「serve」コマンドを実行すると、サイトをローカルでテストできます。
サイトをデプロイする準備ができたら、 npm run save && npm run publish実行するだけです
その後、Apache、git Page、nginx など、Web サーバーに「docs」を指定できます。
プレーンな HTML 要素をターゲットとするスタイルシートを追加すると、機能するはずです :)

テンプレート

<head />や<main />など、テンプレート内の自己終了タグは、同じ名前に一致するテンプレートファイルを検索します。 main/index.htmlのようなインデックス html を持つディレクトリ、または単にmain.htmlファイルのいずれか
- タグは標準の HTML である必要はありません。テンプレートフォルダーにテンプレート foo.html を作成する場合、 <foo />タグを含めることができ、foo の内容が置き換えられます。
- テンプレートのコンパイルは再帰的であるため、テンプレート内でテンプレートを使用できますが、ネストされたテンプレートは、親テンプレート内に含まれるか、親テンプレートに隣接するファイルである必要があります。それ以外の場合は単に無視されます。
<content/>タグは特別で、ファイルと同じ名前のテンプレート (dir 付き) またはメインテンプレート ('templates/index.html) を取り込みます。
コンテンツディレクトリに必要なページを作成するとき。そこに関連するディレクトリは、同じパスでサイトに表示されます。この構造により、フォルダーと URL を自己組織化できます。

制約

JSなし
基本的な href などを除いて属性はありません。
授業はありません。これにより、バニラ CSS をターゲットとするスタイルシートを追加できるようになります。
SASS/SCSS/LESSはありません。単純な HTML 要素ではこれは必要ありません。
React、Angular、またはその他のものはありません。
そうでなくても、必要なものは何でもハッキングできます。

哲学

HTML は、シンプルで、一般の人がインターネット上で何かを作成したり利用したりできるように設計されました。現在のウェブは非常に素晴らしいものになっていますが、同時にかなり複雑になっており、多くの人が取り残されています。この CMS は基本に立ち返り、人々に自由かつ簡単に自分自身を表現する方法を提供します。

このフレームワークは、既存のテクノロジーと標準をできる限り活用しようとします。
HTML は、独自のテンプレートタグやその他の特別な構文の代わりに (HTML の女神の命令に従って) すべてに使用されます。テンプレートシステムは、自己終了 HTML タグを検索し、関連するテンプレートまたはコンテンツに置き換えます。
ファイルシステムは、テンプレートの検索/命名と URL ルーティングの両方に利用されます。
Git は、コンテンツおよびテンプレート内の HTML ファイルとともに、CMS の実際のデータベースとして機能します。
サイトは「docs」フォルダーに「出力」され、その後 Git に「公開」され、そこで Github ページをセットアップできます。これは Web サーバーに依存しないため、実際に docs フォルダー内のファイルを取得して、必要な場所に配置し、Web サーバーにポイントすることができます。
タグはクラスや属性を必要としないことを目的としています。これにより、新しいテーマをシームレスにドロップインできます。バニラ HTML は、スタイルを適用するためのインターフェイスと考えることができます。
JavaScript の使用を妨げるものはフレームワークに何もありませんが、不要であるべきではないため、JavaScript の使用は推奨されません。
私が今書いたことはすべて無視して、好きなことをしてください。それはインターネットです！

よくある問題

依存関係が奇妙に動作します:
Lerna は、依存関係を相互リンクするために内部でいくつかの処理を実行します。新しいモジュールをインストールして動作が停止した場合は、ルートからlerna bootstrapを試してください。
テストディレクトリがクリーンアップされません。テストが失敗すると、テストディレクトリのクリーンアップが妨げられる可能性があります。その場合は、 npm run clean-test-dir実行すると、手動で削除されます。