VPS для портфолио: солидный сайт, который под вашим контролем

Портфолио — это ваша витрина: дизайнер, разработчик, фотограф, копирайтер показывают работы и получают заказы. Бесплатные конструкторы навязывают рекламу и чужой домен, а свой VPS даёт солидный вид, полный контроль и обновление одной командой. Разберём, как поднять портфолио — от статики до деплоя из Git.

Почему портфолио стоит держать на VPS

Портфолио продаёт вас как специалиста, поэтому детали важны: свой домен без приставок вроде .wixsite.com, отсутствие чужой рекламы, аккуратный HTTPS-замок и быстрая загрузка. Бесплатные платформы всё это либо ограничивают, либо берут за это деньги — и всё равно оставляют вас в своей экосистеме.

Свой VPS снимает ограничения: любой стек (чистая статика, генератор сайтов, лёгкий бэкенд для формы заказа), свои заголовки, свой домен, свои редиректы. Плюс это само по себе аргумент в резюме — «поднял и обслуживаю собственный сервер» звучит убедительнее конструктора. А ещё портфолио на своём домене не исчезнет, если бесплатный сервис однажды закроется или сменит правила: вы владеете и доменом, и содержимым, и площадкой целиком.

Портфолио — лёгкая нагрузка: младшего VPS с 1 vCPU и 1 ГБ RAM хватает с запасом. NVMe и канал в UK/US/RU на MAATRIX дают быструю загрузку и для российской, и для зарубежной аудитории, а оплата картой РФ, СБП или криптой снимает вопрос доступа к зарубежному серверу.

Вариант 1: чистая статика

Если портфолио — это набор HTML/CSS/JS страниц (сверстанных руками или экспортированных из редактора), нужен только nginx, отдающий файлы. Поставьте его и создайте каталог сайта:

sudo apt update && sudo apt install -y nginx
sudo mkdir -p /var/www/portfolio
sudo chown -R $USER:$USER /var/www/portfolio

Залейте файлы сайта с локальной машины через rsync:

rsync -avz ./dist/ root@ваш-vps-ip:/var/www/portfolio/

Вариант 2: генератор сайтов (Hugo)

Для портфолио с блогом и разделами удобны статические генераторы — Hugo собирает сайт из шаблонов и Markdown в готовую статику, которую тоже отдаёт nginx. Установка и сборка:

sudo apt install -y hugo
hugo new site portfolio && cd portfolio
# добавляете тему и контент, затем:
hugo --minify

Команда hugo --minify кладёт готовый сайт в папку public/ — её и указываете корнем в nginx. Обновление контента сводится к правке Markdown и повторной сборке.

Настраиваем nginx

Конфиг /etc/nginx/sites-available/portfolio для статики с кэшированием ассетов:

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/portfolio;
    index index.html;
    location / { try_files $uri $uri/ =404; }
    location ~* \.(css|js|jpg|png|svg|woff2)$ {
        expires 30d;
    }
}

Активируйте сайт и перезапустите сервер:

sudo ln -s /etc/nginx/sites-available/portfolio /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Домен, HTTPS и деплой из Git

Направьте домен на IP сервера и выпустите бесплатный сертификат:

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

Чтобы обновлять портфолио без ручной заливки, держите исходники в Git-репозитории и деплойте одной командой на сервере. Клонируйте репозиторий и настройте pull:

cd /var/www
git clone https://github.com/username/portfolio.git
cd portfolio && git pull && hugo --minify

Теперь цикл обновления — правка локально, git push, а на сервере git pull и пересборка. Это удобно завернуть в короткий скрипт deploy.sh.

Финальные штрихи и частые ошибки

• Форма «Написать мне» — для статики подключите внешний обработчик или прямые контакты (почта, Telegram).
• Большие изображения работ — сожмите и отдавайте в WebP, иначе портфолио грузится медленно.
• Нет редиректа на https — certbot настраивает его сам, проверьте, что он включён.
• Забыли www — добавьте оба варианта домена в server_name и в сертификат.

Портфолио редко меняется, но терять его обидно: держите исходники в Git, а сервер под ежедневными бэкапами. У MAATRIX снапшоты VM делаются автоматически, так что даже при сбое сайт восстанавливается в пару кликов.

Частые вопросы