Как просто и бесплатно создать сайт

Сейчас создать сайт довольно просто, однако не все про это знают, а большинство руководств по поднятию сайта написаны для людей, которые уже довольно ловко управляются с компьютерами. У меня есть друзья, которые хотели бы иметь свой сайт, но не знают, как это сделать. Это пособие я прежде всего пишу именно для них, но надеюсь оно окажется полезно и ещё кому-то.

А что мы вообще хотим сделать?

Сайт, наподобие этого. Конкретней, нам потребуется:

• компьютер, работающий как сервер, то есть который будет хранить наш сайт и раздавать его людям (у меня — маленький компьютер, стоящий под табуреткой);
• доменное имя, по которому люди будут на сайт попадать (aversey.com в случае этого сайта);
• собственно сам сайт, то есть набор HTML-файлов, соответствующих страницам сайта (на одну из таких вы смотрите, а подробней устройство сайта описано тут).

Последний пункт не так прост, как кажется. Представьте, что вы действительно храните сайт просто как набор HTML-файлов, каждый из них отвечает за свою страницу. А теперь представьте, что сайт у вас уже давно, и вы написали 100 страниц. И тут — о ужас! — вы замечаете, что в общей части всех страниц, например в панели управления наверху, опечатка. Тогда вам придётся пройтись по всем 100 файлам и заменить в каждом из них опечатку. Проще говоря, нам нужна какая-то система, которая избавит нас от копирования, то есть будет собирать сайт из отдельных кусочков.

Поэтому последний пункт превращается в два подпункта: настройка системы генерации сайта и наполнение сайта контентом.

Добываем бесплатный сервер и домен

GitHub предоставляет и то, и другое бесплатно для своих пользователей, чем мы и воспользуемся.

Вам надо там зарегистрироваться или же войти если у вас уже есть аккаунт. Ваш сайт будет доступен по адресу ваше_имя_пользователя.github.io, так что выбирайте с умом. Если имеющиеся имя пользователя вас не устраивает, можно его сменить — перейдя по ссылке, нажмите “Change username” вверху.

Определившись с именем сайта, осталось только его создать. Перейдя по ссылке, нажмите зелёную кнопку “Use this template”, а в выпавшем меню “Create a new repository”. В качестве имени репозитория напишите ваше_имя_пользователя.github.io – важно что бы репозиторий назывался именно так, с вашим именем пользователя в начале и .github.io в конце. После этого нажмите зелёную кнопку “Create repository” внизу.

Вот и всё. С этого момента у вас есть свой сайт! Перейдите по ваше_имя_пользователя.github.io и увидите его. Осталось только его настроить и наполнить, что бы сделать истинно своим.

Настраиваем генерацию сайта

Редактировать свой сайт вы можете прямо из браузера, через веб-интерфейс GitHub. Перейдите на страницу вашего репозитория и нажмите на файл hugo.yml. Нажмите справа на значок карандаша, и отредактируйте этот файл. Исправьте в нём адрес вашего сайта, ваше имя, содержимое главной страницы сайта и ссылки на ваши соцсети.

Ещё перейдите в content/posts и измените _index.md, если вы хотите другое описание на странице со всеми постами. По умолчанию там написано “Мои заметки и статьи про жизнь и прочее.”

Удалите папки content/posts/telega и content/posts/sample. Для этого откройте их и справа нажмите на кнопку с тремя точками, там будет красный “Delete directory”.

Иконка сайта

Если определились с изображением, которое хотите использовать в качестве иконки сайта, загрузите его сюда. Скачайте zip-архив и распакуйте его содержимое в папку с именем “static”. После этого загрузите эту папку в корень вашего сайта. Для этого нажмите на кнопку “Add file” и выберите “Upload files” на главной странице вашего репозитория. После этого перетащите папку “static” в появившееся окно.

Нажмите на зелёную кнопку “Commit changes”. Вот и всё, иконка появится на сайте.

Наполнение сайта

Поздравляю! Вы справились. Всё что осталось — это научиться и начать пользоваться вашим сайтом. А именно, осталось понять, как писать и загружать ваши статьи.

Создание статьи

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

Скачайте и установите MarkText, откройте его и перейдите в настройки.

Там установите галочку у “Prefer relative assets folder”, и смените имя папки с assets на ..

Теперь мы готовы к созданию статей!

Перед тем как начинать писать статью, сохраните пустой файл в MarkText. Создайте новую папку в которую вы сохраните статью, и в ней создайте файл с именем index.md (это важно — имя должно быть именно таким). Имя папки при этом будет соответствовать адресу статьи на сайте (ссылка на статью будет выглядеть как ваше_имя_пользователя.github.io/posts/ИМЯ_ПАПКИ).

Теперь вам надо в самом начале этого файла написать метаданные статьи. Можете скопировать и вставить этот текст, заменив заголовок и дату на реальные:

---
title: Заголовок
date: 2024-03-22
---

После этого вы можете начать писать свою статью! Если вы выделите участок текста, появится меню, позволяющее настроить его формат:

А если вы нажмёте на значок параграфа справа, то сможете сменить тип блока — например на заголовок, цитату, код и так далее:

Изображения можно вставлять из буфера обмена, при этом они автоматически загрузятся в папку статьи.

Загрузка статьи

Когда вы закончите создание статьи, аналогично загрузке иконки, в GitHub вашего репозитория перейдите в папку content/posts и нажмите на кнопку “Add file” и выберите “Upload files”. После этого перетащите папку с вашей статьёй в появившееся окно. Через небольшое время ваша статья появится на сайте.

На этом всё, для начала. Этого вам хватит что бы вести свой сайт. Если вы хотите большего — например, более удобное управление файлами сайта, или настроить его внешний вид в больших деталях — то это вполне возможно. Поищите существующие руководства по следующим ключевым словам: для управления файлами сайта — git, а для настройки внешнего вида — Markdown (это язык в котором записываются статьи), PaperMod (это конкретный шаблон, который используется в этом руководстве), Hugo (генератор сайта) и HTML/CSS (языки, используемые для описания страниц и их внешнего вида).

В любом случае — удачи!