Рубрики
Без рубрики

Как построить статический блог HTML через 10 минут с Squido

Статические веб-сайты, построенные с помощью архитектуры JamStack, предлагают способ создания современного сайта с … Теги с JavaScript, WebDev, начинающими, учебниками.

Статические сайты, построенные с использованием Джамстак Архитектура предлагает способ создания современного веб-сайта с невероятной производительностью, дешево для проведения и простого в обслуживании. Вы можете увидеть возможные преимущества статических сайтов HTML здесь Отказ

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

Есть много статических генераторов веб-сайтов, но не так просто использовать, как показано на упаковке по умолчанию, как Squido Отказ

Начиная

Вещи, которые вам понадобится:

Откройте свой терминал и установите Squido Глобально:

# npm i -g https://github.com/mrvautin/squido.git

Скорость вещей, клонируя пример блога Git Resository:

# git clone https://github.com/mrvautin/squido-blog-example my-blog

Строительство

Введите свой новый каталог блога:

# cd my-blog

Создайте свой блог: Примечание. Команда Service создает локальный веб-сервер для просмотра вашего нового блога. -b Флаг должен построить, -w это следить за изменениями и восстановлением, если необходимо, и -C Флаг – это очистить старые файлы.

# squido serve -b -w -c

Теперь вы можете просмотреть свой блог, открыв следующий URL в браузере:

http://localhost:4965

Тебе следует увидеть:

Если вы открываете свой новый каталог блога в текстовом редакторе, вы должны увидеть:

  • построить: Это сгенерированный каталог, который будет содержать ваш блог HTML-файлы
  • Источник: Фактические исходные файлы, используемые для генерации вашего блога
  • Содержание: Содержит файлы JavaScript, CSS и Image для вашего блога
  • Макеты: Содержит файл макета, который имеет базовую структуру
  • Сообщений: Содержит файлы Markdown, которые содержат фактическое содержание ваших блога/страниц
  • 404.hbs , index.hbs , Page.hbs , post.hbs , tag.hbs : Все ли файлы шаблонов, используемые для управления макетом этих страниц
  • config.js: Содержит конфиг вашего блога, включая имя, описание, URL, Pagination и более

Давайте очистим старый Лорем Ipsum Пример отметки файлов из /Source/Posts Папка, выбрав, щелкнув правой кнопкой мыши и Удалить :

Затем создайте новый файл под названием Hello-World.markdown в /Source/Posts Папка со следующим текстом:

---
title: "Hello world"
permalink: hello-world
description: "Hello world"
date: '2021-06-16 19:17:00'
tags: 
  - hello
  - world
---

## Hello world

Ваш блог автоматически восстановит и освежает ваш браузер будет выглядеть так:

Теперь вы можете редактировать шаблоны с помощью собственного макета, измените логотип, добавьте цвета CSS позже.

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

Вернуться в свой терминал, инициализируйте свой локальный репозиторий Git:

# git init

Создать новый Github Репозиторий, чтобы сделать развертывание вашего блога еще проще: посетите Github Отказ

Вернитесь в свой терминал и свяжите свой новый Github репозиторий к вашему местному. Во-первых, запустите статус Git:

# git status

Вы увидите это:

Это показывает все наши делеции и наши новые Hello-World.markdown файл.

Добавьте изменения:

# git add .

Создайте свой первый коммит:

# git commit -m "Init"

Измените ветку в основной:

# git branch -M main

Добавьте ваш удаленный Github Репозиторий:

# git remote add origin git@github.com:/my-blog.git

Нажмите свои изменения:

# git push -u origin main

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

NetLify Есть специальный статический хост веб-сайта, который позволит вам бесплатно провести свой блог в течение нескольких минут. Нет никакого управления сервером или сложной настройки.

После того, как вы создали NetLify Учетная запись нажмите Новый сайт из Git кнопка:

Выберите Github от Непрерывное развертывание раздел. Авторизуйтесь Github и выберите свой My-Blog Репозиторий. Измените каталог публикации на /строить . Нажмите Продвинутый и установить новую переменную Node_env. к производство . Наконец, нажмите Развертывание сайта кнопка.

Результат должен выглядеть так:

Вам придется подождать несколько секунд до минуты для вашего блога для развертывания. Затем вы можете просмотреть свой блог, нажав на ссылку:

Вы можете закончить здесь. Однако, нажав Доменные настройки Вы можете настроить свой собственный пользовательский домен, который вы приобрели у реестра домена.

Нажмите Добавить пользовательский домен и выполните шаги для настройки записей DNS, чтобы указать на новое NetLify блог

Есть и другие Варианты развертывания на Squido документация . Есть также другие помощи и гиды Настройка Ваш блог на Squido Документация Отказ

Оригинал: “https://dev.to/mrvautin/how-to-build-a-static-html-blog-in-10-minutes-with-squido-2m0n”

Читайте ещё по теме: