Загрузка devblog - Загрузка исходного кода devblog

devblog

Другие категории

1.0.0

Скачать

Блог разработчиков

DevBlog — это полностью настраиваемый шаблон блога, предназначенный для разработчиков (или кого-либо еще), желающих заняться ведением блогов. Он готов к развертыванию (с легкостью) или может быть отредактирован и расширен по вашему усмотрению. Блог полностью статически генерируется с помощью GatsbyJS, поставляется с подсветкой синтаксиса (с помощью PrismJS) и, среди прочего, имеет встроенный рендеринг на стороне сервера.

Чтобы просмотреть живую демонстрацию, нажмите здесь.

Функции

Полностью отзывчивый
Минималистичный
Настраивается через файл config.js
Легко развернуть
Статически генерируется с помощью файлов уценки.
Серверный рендеринг
Подсветка синтаксиса с помощью PrismJS

Содержание

Настройка и конфигурация
- Настраивать
- Конфигурация
Создание новых сообщений
Развертывание
Журнал изменений
Лицензия

Настройка и конфигурация

Настраивать

1. Установите интерфейс командной строки Gatsby.

Первый шаг — установить локально CLI GatsbyJS. Это можно сделать, выполнив команду npm install --global gatsby-cli

2. Создайте новый сайт Гэтсби, используя этот репозиторий.

При создании нового сайта Gatsby CLI позволяет вам указать стартер, в этом случае просто укажите URL-адрес этого репозитория. Это можно сделать, выполнив команду gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog

3. Отредактируйте или используйте шаблон по мере необходимости.

Теперь, когда все настроено, вы можете просто использовать блог или вносить изменения по мере необходимости. Например, запустите gatsby develop , чтобы запустить среду разработки с горячей перезагрузкой, доступную по адресу localhost:8000, или запустите gatsby build , чтобы создать оптимизированную производственную сборку. Полный список команд CLI для Gatsby можно найти в их документации.

Альтернативная установка

В качестве альтернативы, если вы хотите просто разветвить этот репозиторий или клонировать его, вам просто нужно запустить npm install , а затем gatsby develop после этого, и все будет готово.

Конфигурация

Базовую настройку можно выполнить через файл config.js в корне репозитория проекта. С помощью этого файла вы можете изменить основной цвет блога, добавить автора и описание блога и многое другое. По умолчанию установлены следующие значения:

 export default {
  title : 'Dev Blog' , // Required
  author : 'Ryan Fitzgerald' , // Required
  description : 'Full-stack Web Developer' ,
  primaryColor : '#3498db' , // Required
  showHeaderImage : true ,
  showShareButtons : true ,
  postsPerPage : 5 , // Required
  social : {
    website : 'https://ryanfitzgerald.ca' ,
    github : 'https://github.com/ryanfitzgerald' ,
    twitter : 'https://twitter.com/ryanafitzgerald' ,
    linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
  }
} ;

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

Понимание переменных конфигурации

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

Переменная	Описание использования
заголовок	Название блога. В первую очередь используется для заголовка страницы.
автор	Автор блога. Используется для имени заголовка и заголовка страницы.
описание	Описание автора. Используется для заголовка под автором.
основной цвет	Основной цвет блога.
шоухедеризображение	Флаг, показывать или нет изображение заголовка.
показатьПоделитьсяКнопки	Установите флажок, чтобы показывать кнопки «Поделиться» в социальных сетях в каждом сообщении блога или нет.
сообщений на странице	Количество сообщений на странице главной страницы блога. Это используется для нумерации страниц.
социальный	Профили автора блога в социальных сетях. В настоящее время поддерживаются только персональный веб-сайт, GitHub, Twitter и LinkedIn.

Изменение основного изображения заголовка

Чтобы изменить изображение заголовка по умолчанию, просто переопределите файл main.jpg в папке /src .

Изменение значка

Чтобы изменить значок по умолчанию, просто переопределите файл favicon.ico в папке /src .

Создание новых сообщений

Все сообщения блога можно найти в /src/pages , и они создаются статически после запуска команды gatsby build . Чтобы создать новое сообщение, просто создайте новую папку в /src/pages с именем желаемого URL-адреса. Например, если вы хотите, чтобы URL-адрес отображался как myblog.com/hello-world вы должны создать папку как hello-world . После создания папки просто создайте в ней файл index.md .

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

 ---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---

This top portion is the beginning of the post and will show up as the excerpt on the homepage.

<!-- end -->

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

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

Развертывание

Когда вы будете готовы развернуть блог и запустить его, у вас появится несколько вариантов.

Ручное развертывание

Для развертывания блога вручную просто необходимо запустить gatsby build , чтобы создать производственную сборку. После этого вы можете использовать любой сервер, к которому вы обычно используете приложение React, например дроплет Digital Ocean или экземпляр AWS. Все, что требуется, — это какой-то способ обслуживания статических файлов.

Если вы не знакомы с развертыванием приложений React, есть ряд других вариантов.

Страницы GitHub

Чтобы выполнить развертывание на страницах GitHub, вам необходимо сначала установить префикс пути в gatsby-config.js . По умолчанию используется pathPrefix: '/devblog' однако его следует изменить на любое выбранное вами имя репозитория. Например, если у вас есть блог, расположенный по адресу https://github.com/YOURUSERNAME/myblog , и вы хотите, чтобы он был развернут на https: https://YOURUSERNAME.github.io/myblog myblog, вам следует установить префикс пути на pathPrefix: '/myblog' .

Затем просто запустите npm run deploy , и ваш блог будет развернут.

В качестве альтернативы, если вы хотите развернуть его на https://YOURUSERNAME.github.io (т. е. на сайте вашего пользователя/организации, а не на сайте проекта), потребуется внести пару дополнительных изменений. В официальной документации Гэтсби они хорошо изложены здесь.

Нетлифай

Одним из самых простых способов развертывания блога является использование Netlify. Для развертывания в Netlify просто нажмите кнопку ниже и следуйте инструкциям.

Другой

Описанные выше параметры — не единственные доступные вам варианты развертывания блога. Официальная документация Гэтсби подробно описывает ряд других вариантов. Чтобы узнать больше о вариантах развертывания, нажмите здесь.