portfolio starter
1.0.0
これは、レベルで構築された軽量のポートフォリオStarterkitです。それは、デザイナー、イラストレーター、建築家、および自分の仕事と活動を共有することに興味がある他の個人を対象としています。
意図したユーザーは、コーディングの方法を知らないかもしれませんが、ウェブサイトの背後にある技術に興味があり、Markdownで書いて喜んで、このドキュメントを喜んでフォローします。
Portfolio-starter.sb-ph.comにアクセスしてチェックしてください。このリポジトリのコンテンツとコードは、デモサイトを駆動します。
「ノーコード」は少し誤称です。コンテンツファイルは技術的にコードで記述されていますが、Markdownと呼ばれる非常に読みやすい構文です（詳細については後で詳しく説明します）。 「ノーコード」とは、コマンドライン、Gitに触れたり、コンピューターでコードエディターを開いたりする必要がないことです。
GitHubは、コードを保存するプラットフォームです。あなたのウェブサイトのコードとコンテンツはGithubでライブをします。すでにアカウントがある場合は、先に進んでログインしてください。そうでない場合は、アカウントにサインアップしてください。無料の個別アカウントで十分です。
NetlifyとZEITは、このような静的なWebサイトを持つ人々に寛大な無料のティアを提供するプロバイダーをホストしています。 Netlifyは、おそらく以下の手順では少し簡単であり、より多くのユーザーが使用しているようですが、どちらも堅実なプラットフォームです。これらのプラットフォームのいずれかを既に備えたアカウントがある場合は、ログインしてください。そうでない場合は、1つにサインアップしてください。
下のボタンのいずれかをクリックすると、このリポジトリ（つまり、独自のGitHubアカウントに住んでいる重複バージョンを作成します）をクリックしてから、この新しいWebサイトを静的ホスティングに展開します。
先に進む前に、リポジトリの名前を決定します。サイトの名前に似たものでなければなりませんが、小文字、数字、ダッシュのみを含める必要があります。たとえば、このリポジトリの名前はportfolio-starterです。
Netlifyアカウントがある場合は、このボタンをクリックして、Netlifyの簡単な手順に従ってNetlifyとGitHubを接続します。
ZEITアカウントがある場合は、下のボタンをクリックしてから、Zeitの指示に従ってください。
Zeitの指示では、GitHubに今すぐZeitをインストールする方法を説明し、リポジトリを作成して変更を展開できるようにします。 Zeitを今すぐインストールするときに、すべてのリポジトリに許可を与えます。 Zeitは、次のように設定でEleventyを使用していることを自動検出する必要があります（開発コマンドについて心配する必要はありません）：
ビルドコマンド： npx @11ty/eleventy outputディレクトリ： _site
NetlifyまたはZEITの上記の指示に従って終了したら、Webサイトのダッシュボードにリダイレクトされます。これにより、デフォルトのサブドメインとサイトに関するその他の重要な情報が表示されます。また、サービスが接続されていることをあなたに知らせるためのいくつかのメールを受け取ることができます。
ZEITを使用すると、セットアップ時にリポジトリの可視性を選択できます。一方、Netlifyは、公開リポジトリを自動的に作成します。リポジトリの可視性を調整する場合は、GitHubドキュメントを参照してください。
コマンドラインなしでコンテンツを編集または追加するには、GitHubのインターフェイスを使用して、リポジトリ内の/contentフォルダー内のファイルをナビゲートする必要があります。 /contentフォルダーの構造とその中の各ファイル、特にWebサイトのタイトルとURLを含むグローバルデータファイルの詳細については、コンテンツリファレンスを参照してください。
既存のファイルを編集または削除するには、githubで関連するファイルを開き、ページの内容の上の右上隅にある編集ボタン（ペンシルアイコンのあるボタン）または削除ボタン（ビンのボタン）をクリックする必要があります。
新しいページを追加する場合は、追加するものに応じて、 posts 、 projects 、またはpagesフォルダーに移動する必要があります。ページの上部近くの[新しいファイルの作成]ボタンをクリックします。これにより、ファイル名とファイルの内容を追加できる新しいエディターページが開きます。すべてのテキストコンテンツはマークダウンで記述されるため、ファイル名はmd （つまりmy-post-name.md ）で終了する必要があります。
メディアを追加する場合は、 mediaフォルダーに移動し、ページの上部近くの[ファイルのアップロード]ボタンをクリックする必要があります。これにより、1つ以上のファイルをアップロードする領域が提供されます。ファイルの種類とサイズのヒントについては、メディアガイダンスを参照してください。
GitHubで作成された編集または追加を保存するには、ページのベースにあるGitHubのインターフェイスを使用して変更をコミットする必要があります。前のステップでnetlifyまたはzeitを接続した場合、コミットはGithubに変更を自動的に展開するように指示します。コミットとは何かについては、Github用語集をご覧ください。 GitHubで編集または追加を直接コミットすると、事前に満たされ、 masterブランチ（デフォルト設定）に直接コミットするデフォルトのコミットメッセージを使用できます。
コマンドラインのセットアップ手順では、コマンドラインに精通していること、コンピューターにnode.jsのバージョン8以降がインストールされていること、およびgithubアカウントがあることを想定しています。
git clone https://github.com/sb-ph/portfolio-starter.git my-websiteを実行することにより、名前付きプロジェクトフォルダーにローカルにクローンリポジトリをクローンし、 cd my-websiteを実行して新しいプロジェクトフォルダーに変更します。 npm install実行して、Eleventyを含む依存関係をインストールします。
rm -rf .gitを実行してGIT履歴を削除して新たなスタートを削除し、 git initを実行して新しいgitリポジトリを初期化します。すべてのファイルをコミットして新しいmasterブランチを作成し、コマンドラインを使用してプロジェクトをGitHubに追加します。
Gitignored /_siteディレクトリにWebサイトを構築するには、 npx @11ty/eleventyを実行します。ローカル開発またはコンテンツの編集のためにサーバーをスピンアップするには、 npx @11ty/eleventy --serveを実行します。これにより、サイトがhttp：// localhost：8080で利用可能になり、変更が行われるとサイトが自動的にリロードされます。
netlifyまたはzeitを使用する場合は、ドキュメントに従って、継続的な展開のためにリポジトリをホスティングアカウントに接続します。別のホスティングプロバイダーを使用する場合は、ビルドを生成した後、 /_siteディレクトリに静的ファイルを見つけることができます。
コンテンツをローカルに編集するには、 npx @11ty/eleventy --serveを実行してサーバーをスピンアップし、 /content Directory内のMarkdownおよびJSONファイルを調整します。サイトが継続的な展開に接続されている場合は、適切なブランチ（おそらくmaster ）に変更を犯していることを確認してください。
netlifyとzeitは、ウェブサイトを展開するときにデフォルトのサブドメインを自動的に提供するため、これはオプションのステップです。独自のドメインを使用したい場合は、指示に従ってこれをセットアップする必要があります。 ZEITのカスタムドメインの詳細を読むか、Netlifyのカスタムドメインの詳細をご覧ください。
これらのガイドはどちらも、ドメインのドメイン名システム（DNS）をセットアップする方法について説明します。 DNSは繊細である可能性があることに注意してください。ドメインのDNSレコードは、あなたのウェブサイトを見つける場所をブラウザに伝え、メールサーバーに電子メールを送信する方法を伝えます。何かを変更する前に、必ず既存のDNSレコードを書き留めてください。
カスタムドメインのセットアッププロセスの一部として名前サーバーをリポートし、既にメールにドメインを使用している場合は、名前アーバーをリポートする前に、MXレコードおよび新しいホスティングプロバイダーに電子メールに関連するその他のレコードを追加する必要があります。そうしないと、メールがダウンする可能性があります。
ポートフォリオスターターの古いバージョンを使用していて、新しいバージョンに更新したい場合は、 /contentフォルダーを除くすべてのフォルダーとファイルを置き換えることで、これを手動で行うことをお勧めします。更新や大きな変更を加える前に、ウェブサイトをバックアップする必要があります。リポジトリのホームページにアクセスして、グリーンの「クローンまたはダウンロード」ボタンをクリックして、リポジトリ全体のジップファイルをダウンロードしてから、どこかに安全に保存します。
すべてのコンテンツは/contentフォルダーにあります。デフォルトでは、ポートフォリオスターターは、デモサイトで使用されているコンテンツで満たされています。
コンテンツには、グローバルデータ、各ページのマークダウンファイル、およびメディアが含まれます。これらの各ファイルを特定の方法でフォーマットおよび整理して、サイトがエラーなしで展開し、予想どおりに見えるようにすることが重要です。
サイトタイトルやURLなどの特定のメタデータは、Webサイト全体で使用されます。このグローバルデータはすべて、 /content/_data/global.json global.jsonファイルに含まれています。
このファイルの詳細は、Webサイトが最初に設定されたときに設定され、Webサイトが移動されたりドメインが変更されない限り、再度触れられない可能性があります。これは、 global.jsonファイルの例です。
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
}これは、データを構成するために使用されるテキスト形式であるJSONで記述する必要がある唯一のコンテンツです。 JSON構文は非常に厳しいです。すべてのキー（つまりtitle ）とすべての文字列（つまり、 My website ）は二重引用符で囲まれており、すべてのプロパティ（つまり"title": "My website" ）は、最後のプロパティを除くコンマで分離されます。すべてのJSONオブジェクトは、カーリーブラケットに囲まれています{} 。このファイルの誤った構文はエラーになります。つまり、変更は展開されません。
これらはより詳細なプロパティです。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
author | JSONオブジェクト | - | ウェブサイトの著者の名前とメールアドレスを含むJSONオブジェクト |
footer | マークダウン | 短いクレジット | マークダウンで書かれたフッターテキスト |
lang * | 文章 | en | あなたのウェブサイト言語を宣言するIANA言語タグ |
title * | 文章 | - | あなたのウェブサイトのタイトル |
url * | URL | - | あなたのウェブサイトURL |
フッターには、デフォルトで短いクレジットが含まれています。自分に最適なテキストに自由に置き換えてください。これには、著作権通知、コロフォン、連絡先の詳細、またはその他の顕著な情報が含まれる場合があります。フッターはラインブレークをサポートしていません。
投稿、プロジェクト、ページ、ホームページ、404エラーページ、ブログ、およびRSSフィードを含むすべてのメインコンテンツページは、マークダウンで記述されています。 Markdownを使用すると、有効なHTMLに変換できる、読みやすく、書きやすい簡単なプレーンテキスト形式を使用して書き込むことができます。リスト、リンク、見出しなどを含むフォーマットオプションの完全なリストについては、MarkDown-IT Webサイトにアクセスしてください。また、このREADMEファイルのソースを確認することもできます。マークダウンでも書かれています！
すべてのマークダウンファイルは.md拡張機能で終了し、このStarterKitはファイル名の残りの部分を使用してページスラグ（ページのURLの最終部分）を生成します。
アンダースコア_が先行するフォルダーまたはファイルは公開されません。そのため、Underscoreを使用して/content/posts/_testing-a-draft.mdなどのドラフトを作成できます。ただし、リポジトリが公開されている場合、ドラフトはGitHubの他の人に見えることを覚えておくことが重要です。
各マークダウンファイルは、YAML FrontMatterで始まります。 YAMLは、人間の読み取り可能なテキストを構造化されたデータとしてフォーマットできるようにするプレーンテキスト構文です。 FrontMatterは、ファイルの上部にあるテキストで、どちらの側にも3つのダッシュでフェンスで囲まれています。
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
YAML FrontMatterには、ページ固有のメタデータを定義する一連のプロパティ（コロンで区切られたキーと値）が含まれています。このドキュメントに示すように、常にキーを正確に記述する必要があります。たとえば、 layoutの代わりにLayoutを作成すると、エラーが発生します。
これらは、すべてのページのFrontMatterで使用する必要がある基本的なYAMLプロパティです。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
description | 文章 | - | ページの内容の短い説明 |
eleventyNavigation | Yaml | - | 以下で説明するYAMLオブジェクト |
image | 文章 | - | ソーシャルメディアカードに使用する必要がある画像のファイル名 |
layout * | 文章 | - | ページレイアウト |
permalink | 文章 | 様々な | ページパーマリンク |
title * | 文章 | - | ページタイトル |
すべてのマークダウンファイルでページタイトルとレイアウトが必要です。ページレイアウトは、コンテンツの表示方法を決定します。新しいページを作成するときは、 project 、 post 、またはpageレイアウトを使用する必要があります。
descriptionプロパティは、ソーシャルメディアカードに使用され、検索エンジンの結果に表示されるため、すべてのページに強くお勧めします。 50〜160文字である必要があり、異なるページで複製されることはありません。
ソーシャルメディアにimageを使用する場合は、適切な画像サイズに関するガイダンスについては、ソーシャルメディアプラットフォームが提供するドキュメントを参照してください。経験則として、幅1200pxの幅1200pxのJPGがほとんどのプラットフォームで適切であるはずです。
permalinkプロパティを使用すると、ページにURLを設定したり、完全にオフにしたりできます。パーマリンクは常に自動的に生成されるため、このプロパティを使用する必要はほとんどありません。
eleventyNavigationプロパティは少し複雑です。それは、メニューに何を入れるかをEleventy Navigation Pluginに伝えます。これは、about page /content/pages/about.mdで使用されているプロパティの例です。
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
keyサブプロパティは、「About」というテキストを使用して、このページをナビゲーションに追加するようにEleventyに指示します。 order Sub-Propertyは、Navigationで最初に来るべきであることをEleventyに伝えています。
ナビゲーションに外部リンクを追加することもできます。たとえば、GitHubへのリンクなどです。次のFrontMatterを使用した例については、 /content/pages/github.md pages/github.mdページを参照してください。
ナビゲーションに外部リンクを追加する場合は、以下のFrontMatterで新しいMarkDownファイル（ /content/external.mdなど）を作成できます。
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
keyサブプロパティは、「github」というテキスト（ ↗は北東矢印のHTMLコード）でこのページをナビゲーションに追加するようにEleventyに指示します。 orderサブプロパティは3に設定されているため、メニューの最後になり、 urlサブプロパティは目的のURLに設定されます。 permalinkプロパティは虚偽に設定されているため、これが当社のWebサイトに対応するページを公開しないようにします。
ページは/content/pagesフォルダーにあります。
ページのlayout 、FrontMatterのpageに設定する必要があります。ページは、上記の基本プロパティのみをサポートしています。
投稿は/content/postsフォルダーにあります。
投稿のlayout FrontMatterにpostように設定する必要があります。投稿は、基本的なプロパティとdateプロパティをサポートしています。これは、投稿のフロントマッターの例です。
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
dateプロパティは、投稿の公開日、したがってブログとRSSの順序を決定します。
HTMLコメント<!--more-->マークダウンコンテンツ内で、次のような投稿の抜粋を生成できます。
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. moreを使用すると、コメントの前のテキストのみがブログに表示され、この抜粋の後に「続きを読む」リンクが表示されます。
プロジェクトは/content/projectsフォルダーにあります。
プロジェクトのlayout 、FrontMatterでprojectように設定する必要があります。プロジェクトは、 dateStart 、 dateEnd 、 mediaプロパティだけでなく、基本的なプロパティをサポートしています。これは、プロジェクトページのFrontMatterの例です。
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
そして、これらはプロジェクト固有のプロパティです。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | ソート目的に使用されるプロジェクトの終了日 |
dateStart | YYYY-MM-DD | - | プロジェクトの開始日 |
media | Yaml | - | 以下で説明するメディアブロックのYAMLリスト |
メディアプロパティは、画像ブロックとビデオブロックを含むことができる厳密に形成されたYAMLリストです。画像とビデオの両方に適用されるプロパティを以下に示します。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
caption | マークダウン | - | あなたのメディアを説明するキャプション |
filename * | 文章 | - | あなたのメディアのファイル名 |
height | 整数 | - | ピクセルのメディアの高さ |
width | 整数 | - | ピクセルのメディアの幅 |
size | 文章 | lg | メディアを表示する必要があるサイズ。 sm 、 md 、またはlg |
type * | 文章 | - | imageまたはvideo |
画像ブロックは、次の追加プロパティをサポートしています。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
alt * | 文章 | - | あなたの画像のaltテキスト |
featured | ブール | 間違い | このプロジェクトを表すために画像を使用する必要があるかどうか |
featuredプロパティは、ホームページでこのプロジェクトを表すために使用する画像を使用するために使用されます。複数の画像が注目されている場合、最初の画像が使用されます。
ビデオブロックにより、次の追加プロパティが可能になります。ビデオオートプレイは、特定のブラウザとデバイスでのみサポートされていることに注意してください。
| 鍵 | 形式 | デフォルト | 説明 |
|---|---|---|---|
controls | ブール | 間違い | ビデオコントロールを表示するかどうか |
loop | ブール | 間違い | ビデオがループするかどうか |
autoplay | ブール | 間違い | ビデオが自動的に再生されるかどうか |
muted | ブール | 間違い | ビデオをミュートすべきかどうか |
ホームページは/content/index.mdファイルです。
ホームページのlayout 、フロントマッターでhomeに設定する必要があります。ホームページはほとんどの基本的なプロパティをサポートしていますが、 permalinkプロパティを使用してはなりません。
追加のentriesプロパティを使用すると、ホームページに表示するプロジェクトを正確に指定できます。 entriesプロパティが記入されていない場合、ホームページはすべてのプロジェクトを最新の最初のプロジェクトで自動的に表示します。
これは、使用中のentriesプロパティの例です。
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
各プロジェクトの最初のfeatured画像が表示されます。画像がfeaturedいない場合、最初の画像が表示されます。
ブログページは/content/posts.mdファイルです。
ブログページのlayout 、FrontMatterのpostsに設定する必要があります。ブログページは、基本的なプロパティをサポートしています。 Frontmatterの下に書かれたマークダウンは表示されません。
404エラーページは/content/404.mdファイルです。
404エラーページのlayout 、FrontMatterでerrorを設定する必要があります。エラーページは、 layoutとtitle基本プロパティのみをサポートします。 permalinkプロパティを使用してはなりません。
RSSページは/content/rss.mdファイルです。
RSSページのlayout 、FrontMatterでfeedように設定する必要があります。 RSSページは、 layoutとtitle基本プロパティのみをサポートしています。 permalinkプロパティを使用してはなりません。
RSSフィードは/feed.xmlに自動的に公開されるため、 https://yoursite.com/feed.xml 。ナビゲーションにRSSリンクを追加する場合は、外部リンクを追加するための基本的なプロパティガイダンスを参照してください。
すべてのメディアは/content/mediaフォルダーに保存されています。
メディアファイルは、GitHubリポジトリとホスティングのスペースを保存するために、できるだけ小さくする必要があります。 Githubのリポジトリ制限の詳細をご覧ください。より小さなメディアファイルは、読者のためにより速くロードされます。
小さな画像は幅約800pxでなければならず、中程度の画像は幅約1400pxで、大きな画像は幅約3000pxでなければなりません。平らな色の広い領域を持つ画像は、PNGSとして最適に機能する場合があります。写真などの詳細を備えた画像は、JPGSとして保存する必要があります。
ページに追加する画像が多いほど、そのページが読み込まれるのが長くなります。 1つのページに追加する画像の数を賢明にしてください。
上記のように、これはいじくり回しを歓迎する意図的に基本的なコードベースです。
CSSファイルをGitHubで直接編集することにより、CSSの変更などの小さなカスタマイズをコマンドラインなしで実行できます。より広範なカスタマイズは、コマンドラインでローカルに開発することで最適に行われます。 /_includesのnunjucksレイアウトまたはスニペットを変更することに興味がある場合は、110のドキュメントを参照してください。
これらは、このサイトを変更および拡張するためのいくつかの提案です。
/_includes/layouts/base.njkレイアウトを編集して、より複雑なフッターを作成するclientやcategoryなどのプロジェクト属性を追加しますimgixなどのコンテンツ配信ネットワーク（CDN）で動作して、メディアがGitHubでライブしないようにあなたが私たちの助けにいくつかの修正をすることに興味があるなら、ただ連絡してください、そして私たちは議論します！
