mirror of
https://github.com/SantaSpeen/santaspeen.ru-blog.git
synced 2026-05-19 16:10:16 +00:00
375 lines
15 KiB
Markdown
375 lines
15 KiB
Markdown
---
|
|
slug: blog-setup
|
|
title: Установка этого блога к себе на сервер
|
|
description: Описание
|
|
image: ./logo.png
|
|
tags: [blog, javascript, nginx]
|
|
keywords: [docker, linux]
|
|
date: 2023-12-15
|
|
---
|
|
|
|
Сегодня с расскажу как установить этот блог к себе на сайт
|
|
|
|
[](/blog/blog-setup)
|
|
<!--truncate-->
|
|
|
|
## Введение
|
|
|
|
Блог DevOps программиста (меня) – это не просто место для записей о технических деталях, это своеобразная платформа для обмена опытом, решением трудностей и создания сообщества профессионалов в области разработки и операций. Давайте разберемся, почему блог DevOps программиста может стать неотъемлемой частью вашей профессиональной деятельности.
|
|
|
|
### Зачем это вообще нужно?
|
|
|
|
#### 1. Обмен опытом
|
|
|
|
DevOps – это область, где опыт имеет огромное значение. Через блог вы можете делиться своими наработками, лучшими практиками и решениями, с которыми вы сталкиваетесь в ходе своей работы.
|
|
|
|
#### 2. Инструменты и технологии
|
|
|
|
В мире DevOps постоянно появляются новые инструменты и технологии. Блогирование поможет вам оставаться в курсе последних трендов, а также делиться своим опытом использования различных инструментов.
|
|
|
|
#### 3. Сообщество
|
|
|
|
Блог DevOps программиста – это место, где вы можете объединиться с другими специалистами, обсудить актуальные вопросы, получить обратную связь и даже решить технические проблемы вместе.
|
|
|
|
### Кому нужен блог?
|
|
|
|
#### 1. Стартапы и компании
|
|
|
|
DevOps является ключевым элементом успешного развертывания и управления IT-инфраструктурой. Ваш блог может быть полезным ресурсом для стартапов и компаний, которые стремятся оптимизировать свои процессы.
|
|
|
|
#### 2. Новички в сфере DevOps
|
|
|
|
Для тех, кто только начинает свой путь в DevOps, ваш блог станет ценным ресурсом для обучения и понимания основных принципов и практик.
|
|
|
|
#### 3. Специалисты по технологиям и разработке
|
|
|
|
Блог DevOps программиста может привлечь внимание специалистов в области технологий и разработки, помогая им лучше понять взаимосвязь между разработкой и операциями.
|
|
|
|
По мере продвижения в этом блоге мы рассмотрим шаги по созданию и установке вашего собственного блога DevOps программиста на вашем веб-сайте.
|
|
|
|
## Настройка сайта
|
|
- <p style={{fontSize: '12px', margin: "0"}}>Если сайт уже есть, то пеерходите сразу к <a href="#установка-блога">установке блога</a></p>
|
|
|
|
### Покупка домена
|
|
|
|
Первым шагом к созданию собственного блога является приобретение уникального доменного имени.\
|
|
Выберите короткое, запоминающееся и отражающее суть вашего блога имя. После выбора, зарегистрируйте домен у одного из регистраторов доменных имен.\
|
|
Лично я выбрал свой ник в качестве домена.
|
|
|
|
На данные момент популярны такие сервисы для регистрации доменов в РФ:
|
|
1. [РЕГ.РУ](https://reg.ru) (за `.ru` 119/р в первый год, 999/р последующие года)
|
|
2. [RU-CENTER (NIC)](https://nic.ru) (за `.ru` 189/р в первый год, 999/р последующие года)
|
|
|
|
**Для регистрации обязателен паспорт**
|
|
|
|
### Настройка DNS
|
|
|
|
После приобретения домена переходите к настройке DNS. Найдите бесплатный DNS-сервер и настройте записи, указывающие на IP-адрес вашего хостинга. Это обеспечит корректное направление запросов к вашему сайту.\
|
|
Или можно привязать к сайт [CloudFlare](https://dash.cloudflare.com/), в целом бесплатно + SSL + есть защита от аттак\
|
|
**Так же подразумевается, что хост с белым IP уже есть.**
|
|
|
|
### Настройка WEB сервера
|
|
|
|
Теперь приступим к настройке вашего веб-сервера. В данном случае, рассмотрим пример с использованием Nginx и получением SSL-сертификата с помощью Certbot.
|
|
|
|
Установка Nginx:
|
|
|
|
```bash
|
|
sudo apt update
|
|
sudo apt install nginx snap
|
|
```
|
|
|
|
Настройка Nginx для сайта:
|
|
В файле конфигурации Nginx (`/etc/nginx/sites-available/default`) добавьте следующие строки:
|
|
|
|
```nginx
|
|
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-сертификата:
|
|
|
|
```bash
|
|
sudo snap install --classic certbot
|
|
sudo ln -s /snap/bin/certbot /usr/bin/certbot
|
|
```
|
|
|
|
С помощью этой комнды автоматически будет настроено SSL шифрование трафика\
|
|
`certbot` спросит все нужные ему данные: домен, почту и т.д.
|
|
```bash
|
|
sudo certbot --nginx
|
|
```
|
|
|
|
:::
|
|
|
|
Теперь, после всего что мы сделали, У нас будет доступ по https: https://santaspeen.ru/
|
|
|
|
|
|
## Установка блога
|
|
|
|
:::tip
|
|
Настройку / Написание текста / Проверку - советую делать на компе, а затем после `npm build` загружать на хостинг.
|
|
:::
|
|
|
|
### Загрузка
|
|
|
|
Давайте начнем с загрузки необходимых файлов для вашего блога. Вы можете воспользоваться командой git clone для получения исходного кода блога:
|
|
|
|
```bash
|
|
git clone https://github.com/SantaSpeen/santaspeen.ru-blog.git -b v1-ready
|
|
```
|
|
|
|
### Установка зависимостей
|
|
|
|
Убедитесь, что вы используете Node.js версии 20. Вы можете загрузить и установить ее с официального сайта Node.js: [Node20](https://nodejs.org/download/release/latest-v20.x/)
|
|
Перейдите в директорию вашего блога и выполните команду `npm install`, чтобы установить все необходимые зависимости:
|
|
|
|
```bash
|
|
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` для запуска дебаг сервер блогом (при редактировании файлов, содержимое сразу будет обновлено и на сайте).
|
|
|
|
## Настройка блога
|
|
|
|
### Общая структура
|
|
|
|
Вот так сейчас выглядит структура файлов блога и доков:
|
|
|
|
```plain
|
|
...
|
|
| -- 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`:
|
|
|
|
```plain
|
|
| -- blog
|
|
| ` -- _template
|
|
| | -- index.md
|
|
| ` -- logo.png
|
|
```
|
|
|
|
##### Пример заголовка блога (`blog/_template/index.md`):
|
|
|
|
```md
|
|
---
|
|
slug: template
|
|
title: Заголовок блога
|
|
description: Описание блога
|
|
image: ./logo.png
|
|
tags: [docker, linux, networks]
|
|
keywords: [docker, linux]
|
|
date: 2023-11-29
|
|
---
|
|
|
|
Описание для предварительного просмотра на главной странице
|
|
|
|
[](/blog/_template)
|
|
<!--truncate-->
|
|
|
|
Этот текст будет только в блоге, его не видно в превью
|
|
```
|
|
|
|
- `slug`: уникальный идентификатор блога.
|
|
- `title`: заголовок блога.
|
|
- `description`: описание блога.
|
|
- `image`: путь к логотипу блога.
|
|
- `tags`: теги блога.
|
|
- `keywords`: ключевые слова для поисковых систем.
|
|
- `date`: дата публикации блога.
|
|
- `<!--truncate-->`: разделитель для превью.
|
|
|
|
### Структура документации
|
|
|
|
Приведем пример для документации `_template`:
|
|
|
|
```plain
|
|
| -- docs
|
|
| | -- _template
|
|
| | | -- _category_.json
|
|
| | | -- doc1.md
|
|
| | ` -- doc2.md
|
|
| ` -- intro.md
|
|
```
|
|
|
|
##### Содержимое `_category_.json` в `docs/_template/_category_.json`:
|
|
|
|
```json
|
|
{
|
|
"label": "Template",
|
|
"position": 1,
|
|
"link": {
|
|
"type": "generated-index",
|
|
"description": "Описание шаблона"
|
|
}
|
|
}
|
|
```
|
|
|
|
- `label`: название категории.
|
|
- `position`: позиция в навигации.
|
|
- `link.type`: тип ссылки (здесь генерируется индекс).
|
|
- `link.description`: описание ссылки.
|
|
|
|
##### Пример заголовка документа (`docs/_template/doc1.md`):
|
|
|
|
```md
|
|
---
|
|
sidebar_position: 1
|
|
title: Заголовок документа 1
|
|
---
|
|
|
|
Текст документа
|
|
```
|
|
|
|
- `sidebar_position`: позиция в боковой панели.
|
|
- `title`: заголовок документа.
|
|
|
|
Аналогично, для `doc2.md` будет другой `sidebar_position` и `title`.
|
|
|
|
При настройке блога и документации учтите указанные параметры для создания структуры и корректного отображения контента.
|
|
|
|
### Настройка стилей
|
|
|
|
Стили лежать по пути `/src/css/custom.css`
|
|
|
|
Я преднастроил их, и выглядят они сейчас вот так:
|
|
|
|
```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;
|
|
}
|
|
|
|
```
|