- テンプレも細かい設定も要らねえ、tailwindとscssがサクッと使えて、ヘッダーとかフッターを共通化出来ればそれで充分なんだ！！サーバーのレンタルもしたくねえ！！github pageに勝手に公開してくれ！！！
みたいな時に使って下さい。30秒で上の構成をスタート出来て、github pageで公開するのも自動で出来ます
$ git clone [email protected]:ookam/static_homepage.git
$ cd /static_homepage
$ yarn install
$ yarn start
node + yarnがインストールされていればこれだけで動きます。超簡単
/package.jsonを開いて下のリポジトリ指定を自分のものに修正して下さい
"name": "static_homepage",
"version": "0.0.1",
"repository": "[email protected]:ookam/static_homepage.git",
設定ファイルと書いてあるものは詳しい人以外は触らないようにしましょう
- /srcの中だけ編集する
- 既存のファイルを消さない
これだけ守っておけばプロダクトを壊す事はほぼ無いです
ファイルの構成は以下のようになっています。編集する際は常に「似たような他のファイルを見て、真似して書く」ようにしましょう
/
├ dist/ => 🚨出力用のディレクトリ、勝手に出力されるけど無視して良い（一切触らない）
├ node_modules/ => 🚨yarn したら勝手に作られるけど無視して良い（一切触らない）
├ src/ => 🚨入力用のディレクトリ（初心者はここだけ触りましょう）
│ ├ packs/ => 🚨javascript, cssを置く場所
│ │ ├ javascripts.js => 🚨jsを読み込む設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
│ │ ├ javascripts/ => 🚨jsファイルの配置ディレクトリ
│ │ │ ├ index.js => 🚨jsを読み込む設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
│ │ │ └ ***.js => ✏️自由に追加できる
│ │ ├ stylesheets.js => 🚨cssを読み込む設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
│ │ └ stylesheets/ => 🚨cssファイルの配置ディレクトリ
│ │ ├ index.js => 🚨cssを読み込む設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
│ │ ├ tailwind.scss => 🚨tailwindを読み込む設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
│ │ └ ***.css => ✏️自由に追加できる
│ ├ public/ => 🚨font, imageなどを設置する場所
│ │ └ images/ => 🚨画像ファイルの配置ディレクトリ
│ │ └ fish.svg => ✏️サンプルなので消してOK
│ └ app/
│ ├ _data
│ │ └ default_meta_tags.json => ✏️サイトのデフォルトのメタタグ、あなたのサイトに合った設定をしよう
│ ├ _includes => 🚨viewsから読み込むパーツ類の設置ディレクトリ
│ │ ├ components/ => 🚨パーツの設置ディレクトリ
│ │ │ ├ sample_component.js => ✏️サンプルなので消してOK
│ │ │ └ ***_component.js => ✏️自由に追加できる
│ │ └ layouts/ => 🚨レイアウトの設置ディレクトリ
│ │ ├ default_layout.js => ✏️基本的に触らない
│ │ └ default_layout/ => 🚨デフォルトレイアウトの設置ディレクトリ
│ │ ├ _header.njk => ✏️サイト全体で表示したいヘッダー
│ │ ├ _footer.njk => ✏️サイト全体で表示したいフッター
│ │ ├ _include_cdn.njk => ✏️サイトで使うファイルでcdnから読むものを書く
│ │ └ _footer.njk => ✏️メタタグを書く（触ることはほぼ無い）
│ └ views
│ ├ index.njk => ✏️サイトのトップページ、自由に編集しよう
│ ├ sample.jk => ✏️サンプルなので消してOK
│ └ ***.njk => ✏️自由に追加できる
│
├ .vscode/ => 🚨エディタの設定（分からない人は触ってはいけない / たまに触る）
├ .github/ => 🚨githubとの連携（分からない人は触ってはいけない / 触ることはほぼ無い）
│
├ package.json => 🚨✏️スクリプト周りの基幹ファイル（分からない人は触ってはいけない / 結構触る）
├ eleventy.js => 🚨11tyの基幹ファイル（分からない人は触ってはいけない / 結構触る）
│
├ package.json => 🚨スクリプト周りの基幹ファイル（分からない人は触ってはいけない / 結構触る）
├ eleventy.js => 🚨11tyの基幹ファイル（分からない人は触ってはいけない / 結構触る）
│
├ .lintstagedrc => 🚨huskyと連携してlintを回す設定（分からない人は触ってはいけない / 触ることはほぼ無い）
├ .htmlhintrc => 🚨htmlhintの設定（分からない人は触ってはいけない / 触ることはほぼ無い）
├ .gitignore => 🚨ブランチに含めないものを設定する（分からない人は触ってはいけない / たまに触る）
├ babel.config.js => 🚨babel設定ファイル（分からない人は触ってはいけない / 触ることはほぼ無い）
├ postcss.config.js => 🚨PostCSSの設定（分からない人は触ってはいけない / 触ることはほぼ無い）
├ tailwind.config.js => 🚨tailwindの設定（分からない人は触ってはいけない / たまに触る）
├ stylelint.config.js => 🚨stylelintの設定（分からない人は触ってはいけない / 触ることはほぼ無い）
├ webpack.config.js => 🚨webpackの設定（分からない人は触ってはいけない / 触ることはほぼ無い）
└ .yarn.lock => 🚨自動生成ファイル（一切触らない）
- mainリポジトリにpush or pull request
- github actionsにより自動でgh-pages branchが作成されるのを待つ
- （初回のみ）github上の設定からgithubページをgh-pagesブランチで使うという設定を行う
- 自動で公開 https://ookam.github.io/static_homepage/ （反映に5分くらいかかる時がある）
誰でもissue / pull requestを送って下さい
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent