どのように11ティー、マークダウン、TailWindCSS、およびアルパインと個人的なウェブサイトを設定します.js
44503 ワード
だから私は私の再建website 約100時間.
私はいくつかの新しいウェブサイトスタックをテストしていた、これは私が特に楽しむものです.
以下を使用します. 11 TI静的サイトジェネレータ ブログ投稿やプロジェクトなどのコンテンツのマークダウンファイル スタイリングを加える アルパイン.いくつかの相互作用のための 当社のウェブサイトをホストするNetlify 終了すると、あなたの個人的な開発者ポートフォリオとして使用することができますウェブサイトがあります.
あなたの仕事やショーケースにあなたの雇用者やクライアントにそれを表示し、専門知識を確立する.
このチュートリアルでは、Tailwind、HTML、JavaScript、およびNPMの基本的な理解があります.
プロジェクト用の新しいディレクトリを作成し、パッケージを初期化します.JSON
NPMのインストール-保存してください.
ではインデックスを作成しましょう.液体ファイル(液体は、11ティーによってサポートされるテンプレート言語の1つです)
ここでは、異なるページの変数を定義します.我々は、ダブルカーリーブラケットを使用して我々のHTMLでそれらにアクセスすることができます
レイアウト変数は、私たちのページが使用するファイルに11 tyを指すことです.
この方法で、多くのページで同じコードを再利用することができます.
ディレクトリを作成しましょう
別のディレクトリを作成しましょう
フォルダを作成する
クリエイトア
今、私たちのサイトを改善したいのです.パッケージのインストール
今すぐ設定の最後のビットは、アルパインを追加しましょう.js
最初にそれをNPM
内部
クリエイトア
さあ、アルパインの助けを借りてモバイルナビゲーションをしましょう.ジェイマジック
タイトルテキスト、副テキストとイメージURLのためにそれに若干の変数を加えることによって我々の英雄ヘッダーを再利用可能にしましょう.更新
アバウトページを作りましょう.ルートディレクトリでファイルを作成する
プロジェクトのルートディレクトリに新しいディレクトリを作成する
あなたは、あなたが働いたプロジェクトをリストするために同じことをすることができます、しかし、私はあなたに運動としてあなた自身をそれに加えさせます.
まず、Githubにウェブサイトをアップロードしましょう.
githubに新しいrepoを作成し、gitローカルを初期化し、ファイルをアップロードします
メインダッシュボードクリック
我々がちょうど作成したものを選んでください.
次の画面ではすべてをデフォルトにして、
あなたはNetLifyにあなたの193のブログを構築して、配備して、あなたのウェブサイトがアドレスのように利用できるはずですthat .
Githubに変更をプッシュすると、ウェブサイトは自動的に展開されます.
こちらがlink 完成したプロジェクトのGithubレポに.
あなたは私の最新のコンテンツを最新の状態に滞在するには、Twitterでこのガイドが好きなら.
私はいくつかの新しいウェブサイトスタックをテストしていた、これは私が特に楽しむものです.
以下を使用します.
あなたの仕事やショーケースにあなたの雇用者やクライアントにそれを表示し、専門知識を確立する.
このチュートリアルでは、Tailwind、HTML、JavaScript、およびNPMの基本的な理解があります.
始める
プロジェクト用の新しいディレクトリを作成し、パッケージを初期化します.JSON
npm init -y
NPMのインストール-保存してください.
ではインデックスを作成しましょう.液体ファイル(液体は、11ティーによってサポートされるテンプレート言語の1つです)
---
title: "Home Page"
description: "This is our homepage"
layout: layouts/main
---
<h1>{{ title }}</h1>
<p>{{ description }}</p>
ここでは、異なるページの変数を定義します.我々は、ダブルカーリーブラケットを使用して我々のHTMLでそれらにアクセスすることができます
レイアウト変数は、私たちのページが使用するファイルに11 tyを指すことです.
この方法で、多くのページで同じコードを再利用することができます.
テンプレート
ディレクトリを作成しましょう
_includes , これは、レイアウト、およびコンポーネントのコードの再使用可能なブロックを作成できる場所です.別のディレクトリを作成しましょう
layouts そして、我々のHTML Boilerplateのためのファイルの中にmain.liquid--------
title: Default Title
--------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
{% if description %}
<meta name="description" content="{{description}}" />
{% endif %}
<link rel="stylesheet" href="/style.css?v={% version %}" />
</head>
<body>
<div id="content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
{% block content %}
{{ content | safe }}
{% endblock %}
</div>
</div>
</body>
</html>
設定
フォルダを作成する
styles と内部のファイルtailwind.config.jsmodule.exports = {
purge: [
'_site/**/*.html',
],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
styles フォルダtailwind.css@tailwind base;
@tailwind components;
@tailwind utilities;
posts.config.js ファイルmodule.exports = {
plugins: [
require(`tailwindcss`)(`./styles/tailwind.config.js`),
require(`autoprefixer`),
],
}
プロジェクトの設定
クリエイトア
.gitignore ルートディレクトリのファイル_site/
_tmp/
.DS_Store
node_modules/
package-lock.json
.eleventyignore ファイルnode_modules
.eleventy.jsconst now = String(Date.now())
module.exports = function (eleventyConfig) {
eleventyConfig.setUseGitIgnore(false)
eleventyConfig.addWatchTarget('./_tmp/style.css')
eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
eleventyConfig.addShortcode('version', function () {
return now
})
};
package.json ビルドを開始するスクリプトを持つファイル.{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch",
"build": "ELEVENTY_PRODUCTION=true eleventy & NODE_ENV=production postcss styles/tailwind.css --o _site/style.css"
},
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"autoprefixer": "^10.3.2",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.7"
}
}
npm run build
npm run start
http://localhost:8080 ブラウザでこのブラウザを参照してください HTMLの最適化
今、私たちのサイトを改善したいのです.パッケージのインストール
npm install --save-dev html-minifier clean-css-cli
.eleventy.jsconst htmlmin = require('html-minifier')
const now = String(Date.now())
module.exports = function (eleventyConfig) {
eleventyConfig.setUseGitIgnore(false)
eleventyConfig.addWatchTarget('./_tmp/style.css')
eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
eleventyConfig.addShortcode('version', function () {
return now
})
eleventyConfig.addTransform('htmlmin', function (content, outputPath) {
if (
process.env.ELEVENTY_PRODUCTION &&
outputPath &&
outputPath.endsWith('.html')
) {
let minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
});
return minified
}
return content
})
}
package.json{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch",
"build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css"
},
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"autoprefixer": "^10.3.2",
"clean-css-cli": "^5.3.3",
"html-minifier": "^4.0.0",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.7"
}
}
npm run build もう一度、あなたのファイルを参照してください_site ディレクトリを取るアルパイン.js
今すぐ設定の最後のビットは、アルパインを追加しましょう.js
最初にそれをNPM
npm install --save-dev alpinejs
.eleventy.js ファイルeleventyConfig.addPassthroughCopy({
'./node_modules/alpinejs/dist/cdn.js': './js/alpine.js',
})
_includes/layouts/main.liquid , アルパインを輸入することによって<head><script src="/js/alpine.js?v={% version %}"></script>
英雄ヘッダーの追加
内部
_includes dir create aを指定する.components フォルダhero.liquid ファイル内部.<div class="relative">
<div class="absolute inset-0">
<img class="w-full h-full object-cover"
src="https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1502&q=80"
alt="">
<div class="absolute inset-0 bg-gray-400 mix-blend-multiply" aria-hidden="true"></div>
</div>
<div class="relative text-center py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h1 class="text-5xl font-extrabold text-white sm:text-6xl lg:text-7xl">My Personal Website</h1>
<p class="mt-4 text-xl max-w-3xl">Read my web development tutorials, and see projects I worked on.
</p>
</div>
</div>
index.liquid ヘッダーを含むファイル--------
title: Home Page
description: This is our homepage
layout: layouts/main
--------
{% include components/hero %}
npm run start そして、あなたは我々のヒーローヘッダーを見るべきです ナビゲーションバーの追加
クリエイトア
navigation.liquid ファイル名_includes/components ディレクトリ<div class="mt-6 flex justify-between items-center">
<a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
<button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="hidden md:flex md:justify-end md:items-center md:space-x-6">
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
</div>
</div>
モバイルを作る
さあ、アルパインの助けを借りてモバイルナビゲーションをしましょう.ジェイマジック
<style>
[x-cloak] {
display: none;
}
</style>
<div x-cloak x-data="navigation()">
<!-- Mobile navigation -->
<div class="-mt-6 absolute z-50 bg-white h-screen w-screen" x-show="isOpen"
x-transition:enter="transition ease-in-out duration-300"
x-transition:enter-start="opacity-0 transform scale-x-0 -translate-x-1/2"
x-transition:enter-end="opacity-100 transform scale-x-100 translate-x-0"
x-transition:leave="transition ease-in-out duration-300"
x-transition:leave-start="opacity-100 transform scale-x-100 translate-x-0"
x-transition:leave-end="opacity-0 transform scale-x-0 -translate-x-1/2">
<div class="flex justify-between items-center p-6">
<a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
<button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="grid grid-cols-1 gap-4 p-6">
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
</div>
</div>
<!-- Desktop navigation -->
<div class="mt-6 flex justify-between items-center">
<a class="font-extrabold uppercase text-xl" href="/">Web Dev Blog</a>
<button @click="isOpen = !isOpen" class="block md:hidden p-1 rounded-lg bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="hidden md:flex md:justify-end md:items-center md:space-x-6">
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/">Home</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/blog">Blog</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/about">About</a>
<a class="font-semibold uppercase hover:opacity-80 hover:underline" href="/work">Work</a>
</div>
</div>
</div>
<script>
function navigation() {
return {
isOpen: false
}
}
</script>
_includes/layouts/main.liquid<body>
<div id="content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
{% include components/navigation %}
{% block content %}
{{ content | safe }}
{% endblock %}
</div>
</div>
</body>
再利用可能なコンポーネントの作成
タイトルテキスト、副テキストとイメージURLのためにそれに若干の変数を加えることによって我々の英雄ヘッダーを再利用可能にしましょう.更新
_includes/compnoents/hero.liquid <div class="mt-2 relative">
<div class="absolute inset-0">
<img class="w-full h-full object-cover"
src="{{ hero_img }}"
alt="">
<div class="absolute inset-0 bg-gray-400 mix-blend-multiply" aria-hidden="true"></div>
</div>
<div class="relative text-center py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h1 class="text-5xl font-extrabold text-white sm:text-6xl lg:text-7xl">{{ hero_title }}</h1>
<p class="mt-4 text-xl text-gray-50 max-w-3xl">{{ hero_subtitle }}</p>
</div>
</div>
index.liquid--------
title: Home Page
description: This is our homepage
layout: layouts/main
--------
{% include components/hero, hero_title: "My Web Development Blog", hero_subtitle: "Read my web development tutorials,
and see projects I worked
on.", hero_img:
"https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg"
%}
ページの追加
アバウトページを作りましょう.ルートディレクトリでファイルを作成する
about.liquid--------
title: About Page
description: This is the about page
layout: layouts/main
--------
{% include components/hero, hero_title: "About Me", hero_subtitle: "Learn more about me here", hero_img:
"https://images.unsplash.com/photo-1628373791626-fe21d99fbd58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
%}
<p>Here is a short summary about me and what I do.</p>
http://localhost:8080/aboutt あなたのブラウザで コレクションの作成
プロジェクトのルートディレクトリに新しいディレクトリを作成する
blogインサイドクリエイト3blog1.md , blog2.md , index.liquidMarkdownファイルは私たちのブログ記事の内容、およびインデックスをレンダリングするために使用されます.液体はブログの下のすべての記事をリストするでしょうblog1.md--------
title: Example Blog post no. 1
description: This is a basic description of the post
date: 2021-08-21
layout: layouts/blog
tags: blog
--------
This is some placeholder content that will be rendered to html
blog2.md--------
title: Example Blog post no. 1
description: This is a basic description of the post
date: 2021-08-23
layout: layouts/blog
tags: blog
--------
This is another peace of placeholder content that will be rendered to html
blog/index.liquid--------
title: About Page
description: This is the about page
layout: layouts/main
--------
{% include components/hero, hero_title: "Blog", hero_subtitle: "Read my articles", hero_img:
"https://images.unsplash.com/photo-1628607292260-9195108b03b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1502&q=80"
%}
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 ">
{% for article in collections.blog reversed %}
<a href="{{ article.url }}" class="p-4 border rounded shadow hover:bg-gray-100">
<h3 class="text-lg font-bold">{{ article.data.title }}</h3>
<p class="text-gray-700">{{ article.data.description }}</p>
</a>
{% endfor %}
</div>
_includes/layouts/blog.liquid ファイル--------
layout: layouts/main
--------
{% include components/hero, hero_title: title, hero_subtitle: description, hero_img:
"https://images.unsplash.com/photo-1628366757132-6c49770ec9d7"
%}
<div class="mt-6 md:mt-12">
{{ content | safe }}
</div>
http://localhost:8080/blog 投稿の一覧を表示するには あなたは、あなたが働いたプロジェクトをリストするために同じことをすることができます、しかし、私はあなたに運動としてあなた自身をそれに加えさせます.
NetLifyへのウェブサイトの配備
まず、Githubにウェブサイトをアップロードしましょう.
githubに新しいrepoを作成し、gitローカルを初期化し、ファイルをアップロードします
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github/your_username/your_repo.git
git push -u origin main
メインダッシュボードクリック
New site from Git ボタン.アンドアンダーContinuous Deployment クリックGitHub ボタン.あなたのGitHubアカウントを認証し、リポジトリのリストを見るべきです.我々がちょうど作成したものを選んでください.
次の画面ではすべてをデフォルトにして、
Deploy .あなたはNetLifyにあなたの193のブログを構築して、配備して、あなたのウェブサイトがアドレスのように利用できるはずですthat .
Githubに変更をプッシュすると、ウェブサイトは自動的に展開されます.
こちらがlink 完成したプロジェクトのGithubレポに.
あなたは私の最新のコンテンツを最新の状態に滞在するには、Twitterでこのガイドが好きなら.
Reference
この問題について(どのように11ティー、マークダウン、TailWindCSS、およびアルパインと個人的なウェブサイトを設定します.js), 我々は、より多くの情報をここで見つけました https://dev.to/druidmaciek/how-to-set-up-a-personal-website-with-11ty-markdown-tailwindcss-and-alpine-js-2m31テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol