Когда я только начинал заниматься веб-разработкой, мне, как и всем остальным, хотелось иметь онлайн-портфолио и супер крутой блог, работающий на сайтах, подобных WordPress. Но углубившись в это и потратив некоторое время на веб-разработку, я узнал об этой замечательной функции GitHub, GitHub-Pages,, где вы можете размещать и обслуживать любое количество статических сайтов для « бесплатно »с названиями сайтов, например username.github.io/project-name. Так почему бы не использовать эту бесплатную функцию и не разместить Личное портфолио, а также блог, построенный на HarpJS конструкторе статических сайтов, построенном на Node, который предварительно обрабатывает блог / все, что угодно только в HTML / CSS / JS.

Совет: лучше использовать онлайн-среду IDE Cloud9 для выделенного рабочего места и тестирования .

Начиная

Для начала вам нужно установить Git, NodeJS, HarpJS. Знакомство с Git полезно, но не обязательно.

Затем перейдите в GitHub, создайте бесплатную учетную запись и исследуйте сайт.

Готово с этим?

Теперь откройте командную строку. Если вы не знакомы, ничего страшного: это нужно только умеренно. Теперь попрактикуйтесь в базовом синтаксисе Git и MarkDown (вам нужно написать на нем свой блог).

Basic and Essential Git commands
git init    
// initialises am empty git repository
git remote -v    
//lists out the connected URLs to Github repos
git remote add origin <url>    
//adds a url to existing repo on local machine
git remote set-url origin <url> 
// sets/ modifies the url of existing repo on local machine
git clone <url>             
//create a working copy of a local repository by running the command
git add -A 
//adds or stores the changes
git commit -am "<message>"   
//commit or finalise the changes
git push origin master       
//sync the change with remote-url

GitHub-страницы и хостинг

GitHub Pages позволяет вам превращать репозитории GitHub в веб-сайты, на которых демонстрируется ваше портфолио, ваши проекты, их документация или что-то еще, чем вы хотите поделиться со всем миром. В чем преимущество? Вам не нужно обновлять свой сайт каждый раз, когда вы изменяете его исходный код. GitHub делает это автоматически. «Все просто работает». Посмотрите их видео, чтобы узнать, что именно он делает и почему мне это очень нравится.

Итак, теперь вы знакомы со страницами Git, GitHub, MarkDown, GitHub. Пришло время погрузиться в дело.

Идите вперед и создайте новый репозиторий в GitHub с именем username.github.io, где username - ваше имя пользователя на GitHub. Репозиторий должен быть открытым для публикации. Добавьте лицензию по своему выбору (необязательно).

Клонируйте репозиторий в вашу локальную систему

git clone https://github.com/username/username.github.io

Давайте протестируем это сейчас, запустите следующие команды в командной строке или в терминале.

cd username.github.io
echo "Hello World" > index.html
git add --all
git commit -m "Initial commit"
git push -u origin master

Готово. Так просто. Теперь подождите 5–10 минут. Запустите браузер и перейдите в http://<username>.github.io

Ура, ваш личный сайт теперь работает в прямом эфире.

Правила и передовой опыт

При публикации вашего сайта на GitHub-Pages необходимо соблюдать определенные правила.

  • Файл index.html должен находиться в корне вашего репозитория.
  • Ваш репозиторий должен быть общедоступным (уже сделано!)
  • Вы можете публиковать только статические сайты на GitHub-Pages. (Статические и динамические сайты)

При создании вашего сайта другим разработчикам будет удобно исследовать ваш репозиторий, если у вас хорошая файловая структура. Ниже упоминается одна старая добрая конвенция.

▾ /
  ▪ styles/
  ▪ scripts/
  ▪ images/
  ▪ index.html

Убедитесь, что ваш проект находится на разных стадиях разработки. Если вас не устраивает окончательный результат, вы можете вернуться к предыдущим коммитам и снова начать сборку.

Следующий ?

Ничего, для портфолио. Теперь вы хорошо знакомы. Начните мозговой штурм и создайте отличное портфолио, чтобы продемонстрировать себя и свои проекты в Интернете.

Вот - мой пример.

Портфолио Заключение

Поздравляю! Вы закончили работу со своим Портфолио ( при условии, что вы выполнили все задачи :) и пришли сюда) . Попробуйте сделать его видимым и доступным из Интернета, связать с ним другие учетные записи социальных сетей. Используйте инструменты отладки Facebook, чтобы выбросить свой сайт и изучить его предложения.

Чтобы изменить или обновить его позже, в любое время, вам нужно только изменить его репозиторий, и изменения скоро вступят в силу.

Следующий ?

Блог с HarpJS

Я почти уверен, что вам будет интересно, что это за HarpJS и как он помогает нам в хостинге нашего блога. Позвольте мне сначала прояснить эти вещи, HarpJS - это генератор статических сайтов, который автоматически предварительно обрабатывает код и передает его браузеру в виде HTML, CSS и JavaScript. Теперь вы можете сосредоточиться на написании / ведении блога, а не на спорах.

(Если вам интересно, почему статические сайты вместо wordpress и аналогичных платформ, узнайте об этом здесь)

Зайдите на Github и создайте новый репозиторий с названием вашего блога, ваша последняя болото будет размещено на <username>.github.io/<blogName>. Затем перейдите в настройки, выберите свою master ветку в качестве сайта github-pages.

Я предполагаю, что вы уже установили HarpJS, как предложено в разделе Начало работы. Итак, без дальнейших подробностей, давайте приступим к созданию нашего материала. Создайте и cd в пустую папку, в которой вы хотите создать и инициализировать новый блог. (Используйте Git для управления версиями с удаленным ранее созданным репозиторием remote-url).

harp init my-harp-blog

Будет создана папка с именем my-harp-blog, которая выглядит следующим образом.

▾ /
  ▪ _layout.jade
  ▪ 404.jade
  ▪ index.jade
  ▪ main.less

Теперь запустите свой сервер локально, чтобы протестировать его локально, используя

harp server my-harp-blog

И перейдите на localhost: 9000, чтобы просмотреть простейшую версию своего блога.

Markdown, Layouts и Partials

Просто просмотрите документацию, на которую есть гиперссылки в заголовке абзаца выше, чтобы получить представление о том, что они из себя представляют и что они делают.

Каждый файл Markdown в корневом каталоге добавляет новую страницу в блог. Идите вперед и создайте страницу Обо мне с содержимым, написанным в markdown, с именем файла как aboutme.md.

# About Me
Hi, I am Diwakar. I love build cool stuff that helps the world. I am currently an I.T. Undergrad Sophomore in India.

Теперь сохраните ваш файл и перейдите наlocalhost:9000/aboutme запущенный сервер. Ага, ваши изменения там работают.

(Harp выполняет горячую перезагрузку / перезагрузку в реальном времени, поэтому вам не нужно перезапускать сервер при каждом внесении изменений.)

Макеты используются для создания повторяющихся структур, будь то верхний и нижний колонтитулы или что-то более сложное. Файл _layout содержит эту разметку. По соглашению, Harp не обслуживает файлы и папки с подчеркиванием перед их именем. По сути, этот _layout.jade становится оболочкой для файлов, которые обслуживаются.

Содержимое ваших about.md, 404.jade и index.jade переносится в макет, где бы вы ни использовали переменную yield:

Теперь перейдите к _layout.jade и создайте шаблон для домашней страницы своего блога. Вот пример:

doctype
html
  head
    link(rel="stylesheet", href="/main.css")
  body
    != yield

(Используемый язык - jade, вы также можете использовать HTML, Jade кажется более ясным и легким, когда вы познакомитесь, и к тому же надежнее.)

Обратите внимание, что имеется ссылка на main.css, хотя на самом деле этого файла нет в папке; main.less есть. Поскольку в Harp встроена предварительная обработка, нет необходимости хранить скомпилированные файлы, загромождая ваше приложение. Обновите и сохраните файл LESS, и ваши изменения уже будут в браузере.

Добавление статей

Возможно, вы захотите, чтобы в вашем блоге действительно было несколько статей. Напишите несколько сообщений. Я могу подождать.

Теперь я хочу получить доступ к моей первой статье на localhost:9000/articles/another-article, поэтому я создам папку с именем articles. Папки предназначены для людей, как и URL-адреса; сделайте структуру каталогов зеркальным отражением нужного вам URL-адреса.

▾ /
  ▪ _layout.jade
  ▪ 404.jade
  ▪ index.jade
  ▪ main.less
  ▾ articles/
    ▪ _data.json
    ▪ a-simple-article.md
    ▪ another-article.md

В добавленных мною статьях нет ничего неожиданного, это всего лишь Markdown. Информация о статьях, помимо самих статей, хранится в файле _data.json.

Гибкие метаданные

Хранение метаданных внутри _data.json, а не в каждом отдельном .md файле, хорошо работает по ряду причин:

  1. Файл может содержать любое количество метаданных, и он все равно не мешает вам писать.
  2. Таким же образом можно добавить метаданные для сообщений, изображений, видео или чего-либо еще.
  3. Это _data.json по-прежнему может легко использоваться разными файлами.
  4. Порядок информации может исходить из _data.json, вместо того, чтобы требовать чего-либо от имени файла.

Добавляя заголовок, дату или любую другую информацию в _data.json файл внутри самой статьи, вы можете получить максимальную отдачу от использования Markdown и просто беспокоиться о написании.

Для этого блога я решил пока просто добавить заголовок в свой _data.json файл:

{
  "a-good-article": {
    "title": "A Good Article"
  },
  "a-complicated-article": {
    "title": "Another Article"
  }
}

Используя Jade, можно перебирать эти метаданные, перечисляя все статьи. Я добавил следующее в index.jade.

ul
  each article, slug in public.articles._data
    li
      a(href="/articles/#{ slug }") #{ article.title }

Как и следовало ожидать, теперь на главной странице есть список статей.

В этом блоге все еще отсутствует способ навигации. Было бы неплохо иметь навигацию в нижнем колонтитуле, а также в заголовке нашего макета, чтобы она присутствовала, когда кто-то достигает конца статьи. partial функция Harp делает это возможным без многократного написания одной и той же разметки.

Частичные

partial() переносит один файл в другой. Вы можете использовать любой текстовый файл в своем приложении в качестве частичного. Обычно вам нужно добавлять фрагменты кода, а не целые страницы, но вы можете использовать partial() и для того, и для другого.

Как и в случае с файлом _layout, добавление символа подчеркивания в начало имени файла предотвращает создание собственной страницы, что отлично подходит для фрагментов кода. Это соглашение верно и для папок: назовите папку с подчеркиванием в начале, и ничего внутри не будет обслуживаться напрямую. Папки с подчеркиванием в начале - отличное место для хранения частичных файлов. Для этого я создал новую папку с названием _shared.

Внутри _shared/ находится новый файл с именем nav.jade.

nav
  a(href="/") Home
  a(href="/about") About

Теперь, в _layout.jade, я использую этот файл с partial():

doctype
html
  head
    link(rel="stylesheet", href="/main.css")
  body
    != partial("_shared/nav")
    != yield
    footer
      != partial("_shared/nav")

Теперь навигация может перемещаться вверху и внизу сообщений блога без необходимости дублирования разметки. Это простой пример, но вы, вероятно, можете себе представить, насколько полезными будут частичные данные, когда части вашего блога можно будет повторно использовать где угодно.

Вздох !!!

Собираюсь жить

Когда начальная версия вашего блога будет готова, самое время разместить ее в Интернете. Любую Harp можно скомпилировать в простые файлы HTML, CSS и JavaScript и опубликовать где угодно.

harp compile

Эта команда генерирует все необходимые HTML, CSS и JavaScript в папке www в каталоге вашего блога. Теперь скопируйте содержимое www и поместите его в другую папку, чтобы она содержала

  • index.html из www в корне
  • каталог блога арфы внутри него

Вот пример просмотра каталога

▾ /
  ▪ 404.html
  ▪ LICENSE
  ▪ about.html
  ▾ articles/
    ▪  --// all articles as html pages
  ▪ index.html
  ▪ main.css
  ▾ my-harp-blog/
    ▪  --// your harp blog

Вот репо моего блога в качестве примера.

Когда вы закончите с этим, перейдите в папку articles в корневом каталоге и отредактируйте все свойства href HTML, как показано ниже.

<li role="presentation"><a href="/">Home</a></li>
//edit this to
<li role="presentation"><a href="/blog/">Home</a></li>
//another example:
<link rel="stylesheet" href="/main.css">
//edit this to
<link rel="stylesheet" href="/blog/main.css">
Do this only for resources hosted by you, do not change the href of the ones hosted by CDNs

Это потому, что все наши ресурсы для блога представлены на /blog/, а не на /. А теперь есть идеи, что присутствует в /? Ресурсы вашего портфолио !!!

Теперь переместите вас в репозиторий github, который будет размещен на Github-Pages. Направляйтесь на username.github.io/blogname

(Чтобы изменить свой блог позже, вам сначала нужно изменить папку harp-blog, затем скомпилировать ее, перенести сплющенный HTML, CSS, JS в корневой каталог, отредактировать href файлов html в корневой папке, нажать его )

Вот и все. Это обертка. Вы сделали !!!

Не забудьте прокомментировать ниже свой опыт, любые сомнения или предложения.

Спасибо, что добрались до этого места. Удачного кодирования!