ryosuke gatsby blog

Личное портфолио и блог Ryosuke

Личное портфолио и блог, созданный с помощью Framework Gatsbyjs для создания статического веб -сайта React Powered. Это молния, SEO и PWA, дружелюбная, и развертывается непосредственно на CDN, как страницы GitHub или NetLify.

Это альтернатива JavaScript для статических решений генератора сайтов, написанных в Go или Ruby. Он также больше разбивается, чем блог Gatsby Starter с такими функциями, как архивы блога, обработка изображений, оптимизация SEO и еще несколько.

Структура

• Дом
• Проекты
• • Архив страниц
• Блог
• • Архив страниц
• Теги
• • Архив метки
• О

Публиковать формат / поля

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• Раздел может быть blog или project .
• Теги должны быть массивом
• Содержание тела может включать в себя разметку или HTML.

Плагины

Кодепен

Чтобы встроить модули Codepen, просто скопируйте встроенный код и удалите сценарий JS, который импортируется.

Twitter

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

Манифест

Настройка в gatsby-config.js .

RSS Feed

Настройка в gatsby-config.js .

Разработка

Работая на Gatsbyjs, SSG, который создает статические приложения React.

1. npm install
2. npm run develop

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

GitHub Pages

Мы локально создаем файлы, а затем развертываем сценарий NPM, который обновляет конкретную ветвь GIT Repo, называемую gh-pages .

Чтобы включить это, просто инициализируйте git Repo в проекте, совершите свои изменения и добавьте свое репозиторие в качестве удаленного репо. Обязательно помешайте удаленное как origin , в противном случае развертывание Gatsby не узнает, к какому репо.

Развернуть сайт в origin Remote Repo:

npm run deploy

Создание или редактирование контента

1. git pull от удаленного происхождения, чтобы убедиться, что у вас есть последние сообщения и объединить любые конфликты.
2. Добавьте новую папку в src/content/projects или src/content/blog названный в честь вашего сообщения. Это будет преобразовано в слизняком статьи-вам не нужно «пострадать от Kebab», но помните об этом формате.
3. Создайте файл разметки в папке. Обязательно используйте предыдущие файлы в качестве шаблона, чтобы включить все соответствующие поля (перечисленные выше).
4. Заполните сообщение, обязательно включите изображение обложки (см. Следующий шаг для обработки изображений)
5. Для любых изображений включите их в ту же папку, что и уценка сообщения и ссылка локально, используя <img src="./my-image.jpg" /> .
6. Запустите npm run deploy в Project Root для развертывания на страницах GitHub.

NetLify

Этот сайт также способен развернуть на NetLify. Просто войдите в систему, чтобы NetLify, создать новое приложение и укажите на это хранилище. Следуйте шагам, убедитесь, что NetLify запускает gatsby build и указывает на /public Directory. Это также позволяет вам использовать CMS NetLify, поскольку ему требуется сервер для поддержки OAuth2 и хостинга на NetLify, позволяет переоценивать в каждом редактировании (а не создавать от вашей личной машины и развертываться оттуда).

Кредиты

• Gatsbyjs
• Reactjs
• Иконки от Давиде Пачилио