Сайт-визитка: главная, архитектура, проекты
- Главная: фото, факты, соцсети, форма связи, анимации - Архитектура: карточки проектов и отдельные страницы (Тихий двор, павильон, «Лофт») - Проекты: Aman's World (скриншоты, описание) и хоумлаб - Меню из config.json, шаблон новых страниц, черновики training/work/fixed - Чистый HTML/CSS/JS без сборки, шрифты и картинки локально Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
# Сайт-визитка
|
||||
|
||||
Одна страница на чистом HTML + CSS + JS, без сборки и бэкенда.
|
||||
|
||||
```
|
||||
web/index.html главная страница
|
||||
web/arch/ список проектов, у каждого своя страница: web/arch/<проект>/
|
||||
web/projects/ список проектов, у каждого своя страница: web/projects/<проект>/ (сейчас Aman's World)
|
||||
web/training|work|fixed/ заготовки будущих страниц (черновики)
|
||||
templates/page.html шаблон новой страницы
|
||||
web/config.json всё содержимое: имя, статус, описание, теги, почта, соцсети, фото
|
||||
web/css, js, fonts стили, скрипт, шрифты (локально)
|
||||
web/og/home.png превью для соцсетей 1200x630
|
||||
web/404.html страница 404
|
||||
```
|
||||
|
||||
## Что править
|
||||
Только `web/config.json`. Всё, где `username`, `example.com` и `TODO`, заменить своим.
|
||||
Скриншоты игры лежат в `web/img/proj/`. Картинки архитектуры лежат в `web/img/arch/` в трёх размерах: `имя.webp`, `имя-md.webp`, `имя-sm.webp` (телефонам отдаются лёгкие).
|
||||
Новый проект в архитектуре: скопируйте любую страницу `web/arch/<проект>/index.html`, замените текст и картинки, добавьте карточку в `web/arch/index.html` и адрес в `sitemap.xml`.
|
||||
Фото: положите файл в `web/img/` и впишите путь в `photo` (например `"/img/me.webp"`, квадрат от 192 px).
|
||||
Если `photo` пустое, показываются инициалы.
|
||||
|
||||
## Страницы
|
||||
Опубликованы `web/arch/` и `web/projects/` (в обеих карточки ведут на страницы проектов). Заготовки (черновики) лежат в `web/training/` (Тренировки), `web/work/` (Работа), `web/fixed/` (Фикс). Сейчас это черновики: их нет в меню, а поисковикам они закрыты (`noindex`).
|
||||
|
||||
Опубликовать готовую страницу:
|
||||
1. Заполните текст в `web/<имя>/index.html` (абзацы, заголовки `h2`, ссылки оформятся сами).
|
||||
2. В `web/config.json` в `pages` у нужной записи уберите `"draft": true`: она появится в меню на всех страницах.
|
||||
3. В самой странице удалите строку `<meta name="robots" content="noindex">`.
|
||||
4. Добавьте адрес в `web/sitemap.xml`.
|
||||
|
||||
Новая страница с нуля: скопируйте `templates/page.html` в `web/<имя>/index.html`, правьте так же, а в `pages` добавьте `{ "label": "Название", "url": "/<имя>/" }`.
|
||||
Пока в `pages` нет опубликованных страниц, на главной меню не показывается.
|
||||
|
||||
## Запуск локально
|
||||
```bash
|
||||
python3 -m http.server 8787 --directory web # открыть http://localhost:8787
|
||||
```
|
||||
|
||||
## Выкладка
|
||||
Это просто статика: скопируйте папку `web/` на сервер и раздайте любым веб-сервером.
|
||||
Пример для Caddy (HTTPS получится сам):
|
||||
```
|
||||
my.domain {
|
||||
root * /srv/visit-site/web
|
||||
encode zstd gzip
|
||||
file_server
|
||||
handle_errors {
|
||||
rewrite * /404.html
|
||||
file_server
|
||||
}
|
||||
header {
|
||||
Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; frame-ancestors 'none'"
|
||||
X-Content-Type-Options "nosniff"
|
||||
Referrer-Policy "strict-origin-when-cross-origin"
|
||||
-Server
|
||||
}
|
||||
}
|
||||
```
|
||||
Потом подставьте домен в превью и поисковые файлы:
|
||||
```bash
|
||||
sed -i 's|https://example.com|https://my.domain|g' web/index.html web/robots.txt web/sitemap.xml
|
||||
```
|
||||
Если сервер стоит дома, лучше публиковать через Cloudflare Tunnel или держать его в отдельной сети, а не рядом с остальными устройствами.
|
||||
|
||||
## Проверено
|
||||
Ширина 360 px без горизонтального скролла, вес страницы около 38 КБ вместе со шрифтами, Lighthouse (mobile и desktop) см. ниже в сообщении.
|
||||
Reference in New Issue
Block a user