SantaSpeen/santaspeen.ru-blog
1
0
Fork 0
mirror of https://github.com/SantaSpeen/santaspeen.ru-blog.git synced 2026-05-19 16:10:16 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
ecd30024026ef5b6833575109735369e72c5d5f6
santaspeen.ru-blog/blog/blog-setup/index.md
T
max 8bf2583be8 fix text
2023-12-20 22:00:01 +03:00

15 KiB
Raw Blame History

slug, title, description, image, tags, keywords, date
slug title description image tags keywords date
blog-setup Установка этого блога к себе на сервер Описание ./logo.png
blog
javascript
nginx
docker
linux
2023-12-15

Сегодня с расскажу как установить этот блог к себе на сайт

logo

Введение

Блог DevOps программиста (меня) – это не просто место для записей о технических деталях, это своеобразная платформа для обмена опытом, решением трудностей и создания сообщества профессионалов в области разработки и операций. Давайте разберемся, почему блог DevOps программиста может стать неотъемлемой частью вашей профессиональной деятельности.

Зачем это вообще нужно?

1. Обмен опытом

DevOps – это область, где опыт имеет огромное значение. Через блог вы можете делиться своими наработками, лучшими практиками и решениями, с которыми вы сталкиваетесь в ходе своей работы.

2. Инструменты и технологии

В мире DevOps постоянно появляются новые инструменты и технологии. Блогирование поможет вам оставаться в курсе последних трендов, а также делиться своим опытом использования различных инструментов.

3. Сообщество

Блог DevOps программиста – это место, где вы можете объединиться с другими специалистами, обсудить актуальные вопросы, получить обратную связь и даже решить технические проблемы вместе.

Кому нужен блог?

1. Стартапы и компании

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

2. Новички в сфере DevOps

Для тех, кто только начинает свой путь в DevOps, ваш блог станет ценным ресурсом для обучения и понимания основных принципов и практик.

3. Специалисты по технологиям и разработке

Блог DevOps программиста может привлечь внимание специалистов в области технологий и разработки, помогая им лучше понять взаимосвязь между разработкой и операциями.

По мере продвижения в этом блоге мы рассмотрим шаги по созданию и установке вашего собственного блога DevOps программиста на вашем веб-сайте.

Настройка сайта

Покупка домена

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

На данные момент популярны такие сервисы для регистрации доменов в РФ:

  1. РЕГ.РУ (за .ru 119/р в первый год, 999/р последующие года)
  2. RU-CENTER (NIC) (за .ru 189/р в первый год, 999/р последующие года)

Для регистрации обязателен паспорт

Настройка DNS

После приобретения домена переходите к настройке DNS. Найдите бесплатный DNS-сервер и настройте записи, указывающие на IP-адрес вашего хостинга. Это обеспечит корректное направление запросов к вашему сайту.
Или можно привязать к сайт CloudFlare, в целом бесплатно + SSL + есть защита от аттак
Так же подразумевается, что хост с белым IP уже есть.

Настройка WEB сервера

Теперь приступим к настройке вашего веб-сервера. В данном случае, рассмотрим пример с использованием Nginx и получением SSL-сертификата с помощью Certbot.

Установка Nginx:

sudo apt update
sudo apt install nginx snap

Настройка Nginx для сайта: В файле конфигурации Nginx (/etc/nginx/sites-available/default) добавьте следующие строки:

server {
    listen 80;
    server_name santaspeen.ru;

    root /var/www/blog/;
    index index.html;

    location / {
        add_header Cache-Control no-cache;
        expires 0;
        try_files $uri $uri/ /index.html;
    }

    # Media: images, icons, video, audio, HTC
    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
    }

    # Javascript and CSS files
    location ~* \.(?:css|js)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public";
        try_files $uri =404;
    }

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
        try_files $uri =404;
    }
}

Не забудьте изменить santaspeen.ru и /var/www/blog/ под свои данные.

:::tip Если не использовать cloudflare, то SSL аертификаты нужно получить на хосте
Установим Certbot для получения SSL-сертификата:

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

С помощью этой комнды автоматически будет настроено SSL шифрование трафика
certbot спросит все нужные ему данные: домен, почту и т.д.

sudo certbot --nginx

:::

Теперь, после всего что мы сделали, У нас будет доступ по https: https://santaspeen.ru/

Установка блога

:::tip Настройку / Написание текста / Проверку - советую делать на компе, а затем после npm build загружать на хостинг. :::

Загрузка

Давайте начнем с загрузки необходимых файлов для вашего блога. Вы можете воспользоваться командой git clone для получения исходного кода блога:

git clone https://github.com/SantaSpeen/santaspeen.ru-blog.git -b v1-ready

Установка зависимостей

Убедитесь, что вы используете Node.js версии 20. Вы можете загрузить и установить ее с официального сайта Node.js: Node20 Перейдите в директорию вашего блога и выполните команду npm install, чтобы установить все необходимые зависимости:

cd santaspeen.ru-blog
npm install

Запуск

  1. Настройка статических файлов:

    • Проверьте и отредактируйте файлы в папке static:
      • static/CNAME: Укажите ваш домен в этом файле.
      • static/robots.txt: При необходимости настройте файл robots.txt.
      • static/img/favicon.ico: Замените иконку на свою.

  2. Настройка переменных окружения:

    • Отредактируйте файл .env, указав необходимые параметры.

  3. Настройка конфигурации:

    • При необходимости внесите изменения в файл .aligoria_config.json в соответствии с вашими предпочтениями.

  4. Запуск:

    • Выполните команду npm start для запуска дебаг сервер с блогом (при редактировании файлов, содержимое сразу будет обновлено и на сайте).

Настройка блога

Общая структура

Вот так сейчас выглядит структура файлов блога и доков:

...
| -- blog
|   | -- _template
|   |   | -- index.md
|   |   | -- logo-template.psd
|   |   ` -- logo.png
|   ` -- blog-setup
|       | -- index.md
|       ` -- logo.png
| -- docs
|   | -- _template
|   |   | -- _category_.json
|   |   | -- doc1.md
|   |   ` -- doc2.md
|   ` -- intro.md
...

Основные файлы

  • .env: Тут хранятся данные нужные для запуска блога.
  • blog/_template/index.md: Главная страница блога.
  • blog/_template/logo.png: Логотип блога.
  • docs/_template/_category_.json: Файл категории для организации документации.
  • docs/_template/doc1.md и docs/_template/doc2.md: Примеры документации.
  • docs/intro.md: Введение в документацию.

Cтруктура блогов

Приведем пример для блога _template:

| -- blog
|   ` -- _template
|       | -- index.md
|       ` -- logo.png
Пример заголовка блога (blog/_template/index.md):
---
slug: template
title: Заголовок блога
description: Описание блога
image: ./logo.png
tags: [docker, linux, networks]
keywords: [docker, linux]
date: 2023-11-29
---

Описание для предварительного просмотра на главной странице

[![Логотип блога](./logo.png)](/blog/_template)
<!--truncate-->

Этот текст будет только в блоге, его не видно в превью
  • slug: уникальный идентификатор блога.
  • title: заголовок блога.
  • description: описание блога.
  • image: путь к логотипу блога.
  • tags: теги блога.
  • keywords: ключевые слова для поисковых систем.
  • date: дата публикации блога.
  • <!--truncate-->: разделитель для превью.

Структура документации

Приведем пример для документации _template:

| -- docs
|   | -- _template
|   |   | -- _category_.json
|   |   | -- doc1.md
|   |   ` -- doc2.md
|   ` -- intro.md
Содержимое _category_.json в docs/_template/_category_.json:
{
  "label": "Template",
  "position": 1,
  "link": {
    "type": "generated-index",
    "description": "Описание шаблона"
  }
}
  • label: название категории.
  • position: позиция в навигации.
  • link.type: тип ссылки (здесь генерируется индекс).
  • link.description: описание ссылки.
Пример заголовка документа (docs/_template/doc1.md):
---
sidebar_position: 1
title: Заголовок документа 1
---

Текст документа
  • sidebar_position: позиция в боковой панели.
  • title: заголовок документа.

Аналогично, для doc2.md будет другой sidebar_position и title.

При настройке блога и документации учтите указанные параметры для создания структуры и корректного отображения контента.

Настройка стилей

Стили лежать по пути /src/css/custom.css

Я преднастроил их, и выглядят они сейчас вот так:

/* src/css/custom.css */
:root {
  --footer-padding: 0.5em;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='light'] {
  --ifm-color-primary: #7c538bfd;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #424242;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --footer-background-color: #ececec;
  --footer-color: #000;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] {
  --ifm-color-primary: #c4c0c5fd;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --footer-background-color: #242526;
  --footer-color: #ebedf0;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

.footer {
  --ifm-footer-background-color: var(--footer-background-color);
  --ifm-footer-color: var(--footer-color);
  padding: var(--footer-padding) 
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
}

[data-theme='light'] .header-github-link {
  background: url("/img/github.svg") 0 center / 25px 25px no-repeat;
}

[data-theme='dark'] .header-github-link {
  background: url("/img/githubL.svg") 0 center / 25px 25px no-repeat;
}

.markdown li a, .markdown p a {
  text-decoration: underline dotted;
}
Reference in New Issue View Git Blame Copy Permalink