portfolio starter
1.0.0
Это легкий портфолио Starterkit, построенный с минимами. Он ориентирован на дизайнеров, иллюстраторов, архитекторов и любых других людей, которые заинтересованы в том, чтобы делиться своей работой и деятельностью.
Предполагаемый пользователь может не знать, как кодировать, но заинтересован в технологии, стоящей за своим веб -сайтом, готов написать в Markdown и с радостью следит вместе с этой документацией.
Посетите портфолио starter.sb-ph.com, чтобы проверить это. Контент и код в этом репозитории управляют демонстрационным сайтом.
«Не-код»-это немного неправильно. Ваши файлы контента технически написаны в коде, но это очень читаемый синтаксис, называемый Markdown (подробнее об этом позже). Под «без кода» мы не придется касаться командной строки, GIT или открывать редактор кода на вашем компьютере.
GitHub - это платформа, которая хранит код. Код вашего сайта и контент будут жить на GitHub. Если у вас уже есть учетная запись, идите вперед и войдите в систему. Если нет, подпишитесь на учетную запись. Бесплатной индивидуальной учетной записи достаточно.
NetLify и Zeit - это провайдеры, которые предлагают щедрые бесплатные уровни для людей со статическими веб -сайтами, такими как этот. NetLify, пожалуй, немного более просто для следующих шагов и, по -видимому, используется более десятидесяти пользователей, но они обе солидные платформы. Если у вас уже есть учетная запись с любой из этих платформ, войдите в систему. Если вы этого не сделаете, подпишитесь на одну.
Нажав на одну из приведенных ниже кнопок, вы будете клонировать этот репозиторий (то есть создать дубликатную версию, которая живет в вашей собственной учетной записи GitHub), а затем разверните этот новый веб -сайт для вашего статического хостинга.
Прежде чем продолжить, определите имя для вашего репозитория. Это должно быть что -то, что похоже на имя вашего сайта, но он должен включать только строчные буквы, цифры и тире. Например, название этого репозитория является portfolio-starter .
Если у вас есть учетная запись NetLify , нажмите эту кнопку и следуйте простым инструкциям NetLify, чтобы подключить NetLify и GitHub:
Если у вас есть учетная запись Zeit , нажмите кнопку ниже, а затем следуйте инструкциям Zeit:
Инструкции Zeit проведут вас через то, как установить Zeit сейчас для GitHub, чтобы он мог создать для вас репозиторий и может развернуть ваши изменения. Дайте разрешение на все репозитории при установке Zeit сейчас. ZEIT должен автоматически определять, что вы используете один издесяти с настройками следующим образом (вам не нужно беспокоиться о команде разработки):
Команда сборки: npx @11ty/eleventy output Directory: _site
Когда вы закончите следовать приведенным выше инструкциям для NetLify или ZEIT , вы будете перенаправлены на панель панели веб -сайта. Это отображает ваш субдомен по умолчанию и другую важную информацию о вашем сайте. Вы также получите некоторые электронные письма, сообщающие вам, что услуги подключены.
Zeit позволяет выбрать видимость вашего репозитория при его настроении. NetLify, с другой стороны, автоматически создает общественный репозиторий. Смотрите документацию GitHub, если вы хотите настроить видимость вашего репозитория.
Чтобы редактировать или добавить контент без командной строки, вам необходимо использовать интерфейс GitHub для навигации по файлам в папке /content в вашем репозитории. См. Ссылку на контент, чтобы узнать больше о структуре папки /content и каждого из файлов в нем, особенно о глобальном файле данных, который включает в себя заголовок и URL -адрес вашего веб -сайта.
Чтобы отредактировать или удалить существующий файл, необходимо открыть соответствующий файл в GitHub, а затем нажать либо кнопку «Редактировать» (кнопка с значком карандаша), либо кнопку «Удалить» (кнопку с бункером) в верхнем правом углу над содержимым страницы.
Если вы хотите добавить новую страницу, вам необходимо перейти к папке « posts , projects или pages в зависимости от того, что вы хотите добавить», а затем нажать кнопку «Создать новый файл» рядом с верхней частью страницы. Это откроет новую страницу редактора, где вы можете добавить свое имя файла и содержимое файла. Поскольку весь текстовый контент записан в Markdown, имя файла должно закончиться в md (то есть my-post-name.md ).
Если вы хотите добавить носитель, вы должны перейти в папку media , а затем нажать кнопку «Загрузить файлы» рядом с верхней частью страницы. Это даст вам область для загрузки одного или нескольких файлов. См. Руководство для медиа для советов по типам и размерам файлов.
Чтобы сохранить изменения или дополнения, сделанные в GitHub, вы должны совершить свои изменения, используя интерфейс GitHub в основе страницы. Если вы подключили NetLify или Zeit на предыдущем шаге, коммит также сообщит GitHub автоматически развертывать ваши изменения. Для получения дополнительной информации о том, что такое коммит, посмотрите на глоссарий Github. Когда вы совершаете редактирование или добавление непосредственно в GitHub, вы можете использовать сообщение о коммитке по умолчанию, которое предварительно заполнено и должно быть непосредственно совершать master филиал (настройка по умолчанию).
Инструкции по настройке командной строки предполагают, что у вас есть знакомство с командной строкой, что на вашем компьютере установлена версия 8 или выше Node.js, и что у вас есть учетная запись Github.
Репозиторий клона локально в именованную папку Project, запустив git clone https://github.com/sb-ph/portfolio-starter.git my-website , а затем переключитесь на новую папку проекта, запустив cd my-website . Запустите npm install , чтобы установить зависимости, в том числе один издесяти.
Запустите rm -rf .git чтобы удалить историю GIT для нового старта, а затем запустите git init , чтобы инициализировать новое репо. Заверните все свои файлы, чтобы создать новую master филиал, а затем добавьте свой проект в GitHub, используя командную строку.
Чтобы построить веб -сайт в каталог Gitignored /_site , запустите npx @11ty/eleventy . Чтобы развернуть сервер для локальной разработки или редактирования контента, запустите npx @11ty/eleventy --serve . Это сделает ваш сайт доступным по адресу http: // localhost: 8080, и сайт автоматически перезагрузит при каких -либо изменениях.
Если вы хотите использовать NetLify или ZEIT, следуйте их документации, чтобы подключить ваш репозиторий к вашей учетной записи хостинга для непрерывного развертывания. Если вы хотите использовать другого хостингового поставщика, вы можете найти свои статические файлы в каталоге /_site после создания сборки.
Чтобы редактировать контент локально, разверните сервер, запустив npx @11ty/eleventy --serve , а затем настройте файлы Markdown и JSON в каталоге /content . Если ваш сайт подключен к непрерывному развертыванию, убедитесь, что вы совершаете свои изменения в правильном филиале (вероятно, master ), иначе они не будут развернуты.
NetLify и Zeit предоставляют вам субдомен по умолчанию автоматически при развертывании своего веб -сайта, так что это необязательный шаг. Если вы хотите использовать свой собственный домен, вы должны следовать их инструкциям, чтобы настроить это. Узнайте больше о пользовательских доменах на ZEIT или прочитайте больше о пользовательских доменах в NetLify.
Оба эти руководства проведут вас через то, как настроить систему доменных имен вашего домена (DNS). Обратите внимание, что DNS может быть деликатным. DNS записывает для вашего домена браузерам, где найти свой веб -сайт, и сообщить серверам электронной почты, как направлять вам электронные письма. Обязательно запишите любые существующие записи DNS, прежде чем что -либо изменить.
Если вы перенаправляете Shereservers в рамках процесса настройки пользовательского домена и уже используете свой домен для электронной почты, вы должны добавить свои записи MX и любые другие записи, связанные с электронной почтой вашему новому провайдеру хостинга, прежде чем вы будете повторять Sherervers. Если вы этого не сделаете, ваша электронная почта может упасть.
Если вы находитесь в более старой версии стартера портфеля и хотите обновить его до более новой версии, мы рекомендуем сделать это вручную, заменив все папки и файлы, кроме папки /content . Вы должны резко подтвердить свой веб -сайт, прежде чем внести какие -либо обновления или серьезные изменения. Посетите свою домашнюю страницу репозитория и нажмите кнопку «Клоуна или скачивание», чтобы загрузить застегнутый файл всего репозитория, а затем храните ее где -то безопасное.
Весь контент живет в папке /content . По умолчанию стартер портфеля заполнен контентом, используемым на демонстрационном сайте.
Контент включает в себя глобальные данные, файлы разметки для каждой страницы и мультимедиа. Важно отформатировать и организовать каждый из этих файлов определенным образом, чтобы ваш сайт развернулся без ошибок и выглядел, как и ожидалось.
Определенные метаданные, такие как заголовок сайта и URL -адрес, используются по всему веб -сайту. Все эти глобальные данные содержатся в файле /content/_data/global.json .
Детали в этом файле должны быть установлены, когда веб -сайт сначала настроен, а затем, скорее всего, не будут затронуты снова, если веб -сайт не будет перемещен или не изменяется домен. Это пример файла 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 | Языковой тег Яны, который объявляет язык вашего сайта |
title * | текст | - | Название вашего сайта |
url * | URL | - | Ваш сайт URL |
Нижний колонтитул включает в себя короткий кредит по умолчанию. Не стесняйтесь заменить его любым текстом, который работает лучше всего для вас. Это может включать в себя уведомление об авторском праве, колофон, контактные данные или другую важную информацию. Нижний нижний колонтитул не поддерживает разрывы линии.
Все основные страницы контента, включая сообщения, проекты, страницы, домашнюю страницу, 404 страницы ошибок, блог и RSS -канал, написаны на Markdown. Markdown позволяет писать, используя простой для чтения, простой в записи формат простого текста, который может быть преобразован в действительный HTML. Посетите веб-сайт Markdown-IT для полного списка параметров форматирования, включая списки, ссылки, заголовки и многое другое. Вы также можете взглянуть на источник для этого файла Readme; Это написано тоже в Markdown!
Все файлы Markdown заканчиваются в расширении .md , и этот Starterkit использует остальную часть имени файла, чтобы сгенерировать слизняк страницы (окончательная часть URL -адреса страницы).
Любые папки или файлы, которым предшествуют подчеркивание _ не будут опубликованы. Из-за этого вы можете использовать подчеркивание для создания черновиков, таких как /content/posts/_testing-a-draft.md . Тем не менее , очень важно помнить, что ваш черновик будет видим другим в GitHub, если ваш репозиторий будет общедоступным.
Каждый файл разметки начинается с FrontMatter YAML. YAML-это простой текстовый синтаксис, который позволяет форматировать человеку текст в виде структурированных данных. Передняя мешка - это текст в верхней части файла, который огорожен тремя тисками с обеих сторон, как так:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
Передняя машина YAML включает в себя серию свойств-клейки и значения, разделенные толстой кишкой-которые определяют специфичные для страницы метаданные. Ключи всегда должны быть написаны точно так же, как показано в этой документации. Например, написание Layout вместо layout приведет к ошибке.
Это основные свойства YAML, которые следует использовать в передней части на каждой странице.
| Ключ | Формат | По умолчанию | Описание |
|---|---|---|---|
description | текст | - | Краткое описание содержимого страницы |
eleventyNavigation | Ямл | - | Объект YAML, описанный ниже |
image | текст | - | Имя файла изображения, которое следует использовать для карт в социальных сетях |
layout * | текст | - | Макет страницы |
permalink | текст | различный | Постоянная ссылка |
title * | текст | - | Название страницы |
Название и макет страницы требуются в каждом файле разметки. Макет страницы определяет, как отображается контент. При создании новых страниц вы должны использовать project , post или макеты page .
Свойство description настоятельно рекомендуется для всех страниц, так как оно используется для карт в социальных сетях и отображается в результатах поиска. Это должно быть от 50 до 160 символов, и это никогда не должно быть дублировано на разных страницах.
При использовании image для социальных сетей обратитесь к документации, предоставленной платформами социальных сетей для руководства по соответствующему размеру изображения. Как правило, ландшафтный формат шириной 1200 пикселей должен быть подходящим на большинстве платформ.
Свойство permalink позволяет установить URL -адрес для страницы или полностью отключить его. Постоянные ссылки всегда генерируются автоматически, поэтому вам редко нужно использовать это свойство.
Собственность eleventyNavigation немного сложнее. Он сообщает мигам навигационному плагину, что поместить в меню. Это пример свойства, используемого на ae ae age /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
key подпрофессионал подсказывается на одиннадцать, чтобы добавить эту страницу в навигацию с текстом «О». Субпропертику order сообщает, что он должен быть первым в навигации.
Вы также можете добавить внешние ссылки на навигацию, например, ссылку на свой GitHub. Смотрите страницу /content/pages/github.md для примера со следующим фронтальным мастерством:
Если вы хотите добавить внешнюю ссылку на навигацию, вы можете создать новый файл Markdown (например, /content/external.md ) с приведенной ниже передней панели:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
key подпрофессионал сообщает, что навигацию навигации сообщает, что эта страница с текстом «GitHub» ( ↗ -это код HTML для стрелки на северо-востоке). Подпрофессионат « order » установлен на 3, так что она последним в меню, а подпрофессионат url устанавливается на желаемый URL. Свойство permalink установлено на ложь, чтобы это не публиковало соответствующую страницу на нашем веб -сайте.
Страницы встречаются в папке /content/pages .
layout страницы должен быть установлен на page в передней части. Страницы поддерживают только основные свойства, перечисленные выше.
Сообщения найдены в папке /content/posts .
layout поста должна быть установлена для post в переднем крае. Сообщения поддерживают основные свойства, а также свойство date . Это пример переднего мельницы поста:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
Собственность date определяет дату публикации поста и, следовательно, заказ в блоге и RSS.
Вы можете использовать HTML Comment <!--more--> В вашем контенте разметки, чтобы сгенерировать выдержки для ваших сообщений, как SO:
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 проекта должен быть настроен на project на переднем крае. Проекты поддерживают основные свойства, а также свойства dateStart , dateEnd и media . Это пример передней части для страницы проекта.
---
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, описанный ниже |
Свойство Media-это строго форматированный список YAML, который может содержать изображения и видео блоки. Свойства, которые применяются как к изображениям, так и к видео, описаны ниже.
| Ключ | Формат | По умолчанию | Описание |
|---|---|---|---|
caption | отметка | - | Подпись, описывающая ваши средства массовой информации |
filename * | текст | - | Имя файла ваших СМИ |
height | целое число | - | Высота ваших средств массовой информации в пикселях |
width | целое число | - | Ширина ваших средств массовой информации в пикселях |
size | текст | lg | Размер, который должен отображаться медиа; sm , md или lg |
type * | текст | - | image или video |
Блоки изображения поддерживают следующие дополнительные свойства:
| Ключ | Формат | По умолчанию | Описание |
|---|---|---|---|
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 страницы блога должен быть установлен на posts в передней части. Страница блога поддерживает основные свойства. Удар, написанная под передней панелью, не отображается.
Страница ошибки 404 - это файл /content/404.md .
layout страницы ошибки 404 должен быть установлен на error в передней части. Страница ошибки поддерживает только базовые свойства layout и title . Свойство permalink не должно использоваться.
Страница RSS - это файл /content/rss.md .
layout RSS должна быть установлена для feed в переднем крае. Страница RSS поддерживает только базовые свойства layout и title . Свойство permalink не должно использоваться.
RSS -канал автоматически опубликован в /feed.xml , например, https://yoursite.com/feed.xml . Если вы хотите добавить ссылку RSS в свою навигацию, см. Руководство по базовым свойствам, чтобы добавить внешнюю ссылку.
Все носители хранятся в папке /content/media .
СМИ ФАЙЛЫ должны быть максимально небольшими, чтобы сохранить место в вашем хранилище GitHub и вашего хостинга. Узнайте больше о пределах репозитория GitHub. Меньшие медиа -файлы также будут загружаться быстрее для ваших читателей.
Небольшие изображения должны быть шириной около 800 пикселей, средние изображения должны иметь ширину около 1400 пикселей, а большие изображения должны иметь ширину около 3000 пикселей. Изображения с большими областями плоского цвета могут работать лучше всего как PNG. Изображения с более подробной информацией, такие как фотография, должны быть сохранены как JPG.
Чем больше изображений вы добавляете на страницу, тем дольше потребуется для загрузки этой страницы. Будьте осторожны с тем, сколько изображений вы добавляете на любую страницу.
Как упоминалось выше, это намеренно базовая кодовая база, которая приветствует возиву.
Меньшие настройки, такие как изменение CSS, могут быть выполнены без командной строки путем редактирования файла CSS непосредственно в GitHub. Более обширные настройки лучше всего выполнять путем локального развития с командной строкой. Обратитесь к десятилетней документации, если вы заинтересованы в изменении макетов Nunjucks или фрагментов в /_includes .
Это несколько предложений по изменению и расширению этого сайта:
/_includes/layouts/base.njk base.njk, чтобы создать более сложный нижний колонтитулclient или categoryimgix , чтобы ваши медиа не жили на GitHubЕсли вы заинтересованы в нашей помощи в создании некоторых изменений, просто свяжитесь с нами, и мы обсудим!
