santaspeen.ru-blog/index.md at c979c0db81ca09c02434b6fa495419d76af6dc75

SantaSpeen/santaspeen.ru-blog

Fork 0

mirror of https://github.com/SantaSpeen/santaspeen.ru-blog.git synced 2025-08-18 00:45:37 +00:00

SantaSpeen a863ce2f9d del mics

2023-12-18 02:19:12 +03:00

15 KiB

Raw Blame History

slug

title

description

image

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если сайт уже есть, то пеерходите сразу к установке блога

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

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

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

РЕГ.РУ (за .ru 119/р в первый год, 999/р последующие года)
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

Запуск

Настройка статических файлов:
- Проверьте и отредактируйте файлы в папке static:
  - static/CNAME: Укажите ваш домен в этом файле.
  - static/robots.txt: При необходимости настройте файл robots.txt.
  - static/img/favicon.ico: Замените иконку на свою.
Настройка переменных окружения:
- Отредактируйте файл .env, указав необходимые параметры.
Настройка конфигурации:
- При необходимости внесите изменения в файл .aligoria_config.json в соответствии с вашими предпочтениями.
Запуск:
- Выполните команду 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
...

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

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: дата публикации блога.
: разделитель для превью.

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

Приведем пример для документации _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;
}

15 KiB Raw Blame History Unescape Escape