Создайте личный блог и публикуйте его на страницах Github бесплатно.

За последние несколько лет писал ряд технических блогов на Medium, LogRockets и Twillio. Недавно я решил создать личный сайт, чтобы собрать все статьи в одном месте.

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

Требование

Как и в любой работе с программным обеспечением, первое, что нужно сделать, это определить требования. Вот что я хочу заархивировать с новым сайтом:

  • Легко импортировать мои предыдущие статьи и публиковать на сайте
  • Простота установки и настройки
  • Возможность настройки сайта с различными темами
  • Может искать содержимое

Следующий шаг – определить, как это реализовать.

Как это построить

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

Были рассмотрены два варианта: использование CMS (например, Drupal, Joomla) или использование генератора статических сайтов. Вариант CMS более мощный и гибкий, но требует обслуживания, а также ресурсов сервера для размещения. Напротив, генератор статических сайтов может генерировать HTML из уценки, а статические страницы HML работают быстро и могут быть развернуты где угодно. Итак, победитель переходит к генератору статических сайтов.

В мире генераторов статических сайтов я оказался избалованным выбором. Некоторые популярные имена в этой области включают Jekyll, Hugo, Gatsby, Poet, Nuxt.js, Pelican, Metalsmith и Hexo, причем постоянно появляются новые. После некоторого поиска в Google и чтения я смог сузить свои варианты до Hexo и Hugo.

Хексо против Хьюго

И Hexo, и Hugo — популярные фреймворки, и у каждого есть свой набор функций и возможностей. Hexo — это генератор статических сайтов на основе Node.js, известный своей популярностью и широким выбором тем. Hugo — это генератор статических сайтов на основе Go, известный своей скоростью и гибкостью.

Оба поддерживают Markdown и предоставляют ряд тем и плагинов для расширения его функциональности.

Выбрать между двумя сложно, поэтому я решил попробовать оба.

Во-первых, давайте настроим Hexo.

// install hexo cli
npm install -g hexo-cli
// verify hexo version
hexo -v
// create a folder, then initilize a blog site
hexo init
npm install
// test the default
hexo s

После запуска сервера вы должны увидеть следующее сообщение.

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

Теперь давайте настроим Хьюго.

brew install hugo //install hugo

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server

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

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

Обе платформы поддерживают уценку, что упростило преобразование моих предыдущих статей в формат уценки для использования на любой из платформ. Кроме того, и Hexo, и Hugo были просты в установке и настройке. Я обнаружил, что у Hexo больше доступных тем, что сделало его идеальным выбором для меня. Вероятно, это связано с популярностью Hexo, который также предоставляет доступ к более широкому спектру ресурсов при устранении неполадок. Обе платформы предлагают функции поиска по темам/плагинам.

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

Hexo переопределить тему

Я попробовал несколько разных шестнадцатеричных тем и остановился на теме переопределить.

Выполните следующую команду, чтобы применить переопределить тему

// cd to your blog folder
npm install hexo-theme-redefine@latest
// open the _config.yml and update the following line
theme: redefine

Чтобы изменить конфигурацию темы, скопируйте файл /node_modules/hexo-theme-redefine/_config.yml в корневой каталог и переименуйте его в _config.redefine.yml. Обратите внимание, что _config.redefine.yml переопределит конфигурацию в корневом каталоге _config.yml/. Подробности каждой настройки конфигурации можно найти здесь.

Я использую инструмент medium-exporter, чтобы экспортировать свои предыдущие статьи в уценку. Хотя он и называется средним экспортером, этот инструмент работает и для других блог-сайтов.

Вот пример использования для экспорта статей в уценку

mediumexporter [your article url] > [article file name].md

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

Примерно через полдня работы вот как это выглядит.

Последним шагом является публикация блога на хостинге. Поскольку я еще не приобрел свое доменное имя, я начну с GitHub Pages.

Развернуть на странице Github

Для развертывания на страницах GitHub необходимо создать новый репозиторий с именем, совпадающим с вашим идентификатором GitHub. Для меня это sunnyy02.github.io. Стоит отметить, что домен вашей страницы GitHub будет таким же: https://sunnyy02.github.io.

Затем перейдите к файлу конфигурации Hexo _config.yml и обновите раздел deploy:

deploy:
  type: git
  repo: https://github.com/sunnyy02/sunnyy02.github.io.git
  branch: master

Нам также необходимо установить hexo-deployer-git для развертывания сгенерированных HTML-страниц во вновь созданном репозитории git.

npm install hexo-deployer-git --save

Наконец, мы можем начать развертывание.

hexo d

Теперь, если мы вернемся к репозиторию Github и перейдем к «Настройка» > «Страницы». «Сборка и развертывание» должны выглядеть так, как показано ниже.

После первоначального развертывания может пройти до 10 минут, прежде чем изменения вступят в силу. Если это занимает больше времени, вы можете попробовать следующий обходной путь:

  • В разделе «Build and Deployment» измените имя ветки с «master» на «none» и сохраните изменения.
  • Переключите ветку «none» обратно в ветку «master» и снова сохраните ее.

Это должно снова вызвать развертывание. И вы должны увидеть следующее после успешного завершения.

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

Заключение

И Hexo, и Hugo — отличные генераторы статических сайтов со своими уникальными сильными и слабыми сторонами. Я доволен своим решением до сих пор. Но любой из них будет хорошим выбором.

Поддержание сайта блога — настоящая проблема, а не его создание. Я надеюсь, что смогу продолжать обновлять этот сайт, даже если это будет только для меня.

Добро пожаловать на мой сайт-блог здесь.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.