Как создать свой собственный Taplink с помощью Python и GitHub Pages
Я случайно наткнулся на статью автора Lucas Neves Pereira под названием «Build your own LinkTree with Go and GitHub Pages». В статье описано, как создать подобие LinkTree (аналог Taplink) на языке Go и GitHub Pages. Я, как любитель языка Python, решил реализовать проект на этом языке.
king-tri-ton.github.io/pythonpagelink
Шаг 1: Подготовка файловой структуры проекта
Первым делом создадим файловую структуру для нашего проекта. Мы организуем наш проект таким образом, чтобы он был легко поддерживаемым и удобным для развертывания на GitHub Pages.
Файловая структура:
/ (root)
|-- /docs
| |-- index.html
| |-- /assets
| |-- (файлы стилей, скриптов, иконок и т.д.)
|-- config.yml
|-- generate_site.py
|-- /themes
/docs: В этой папке будут храниться сгенерированные HTML-файлы и все необходимые ассеты (изображения, стили, скрипты). Эта папка будет использоваться для развертывания сайта на GitHub Pages.
config.yml: Файл конфигурации, который содержит все данные для персонализации сайта.
generate_site.py: Скрипт на Python, который будет генерировать сайт на основе данных из config.yml.
/themes: Папка с темами для сайта. В нашем случае, здесь хранится единственная тема custom, которая включает в себя шаблон HTML, стили, скрипты и изображения.
Шаг 2: Настройка файла конфигурации (config.yml)
Файл config.yml содержит данные о пользователе и ссылки, которые будут отображаться на сайте. Вот его содержимое:
name: "King Triton"
picture: "assets/img/picture.jpg"
bio: "Programmer python and php/laravel"
meta:
lang: "en"
description: "Programmer python and php/laravel"
title: "King Triton"
author: "King Triton"
siteUrl: "https://king-tri-ton.github.io/pythonpagelink/"
links:
- name: "Github"
url: "https://github.com/king-tri-ton"
- name: "Dev.to"
url: "https://dev.to/king_triton"
- name: "Patreon"
url: "https://www.patreon.com/king_triton"
- name: "Telegram"
url: "https://t.me/king_triton"
- name: "Instagram"
url: "https://www.instagram.com/king_tri_ton"
theme: "custom"
name: Имя пользователя, которое будет отображаться на сайте.
picture: Путь к изображению пользователя.
bio: Краткая биография пользователя.
meta: Метаинформация сайта (язык, описание, заголовок, автор, URL сайта).
links: Список ссылок, которые будут отображаться на сайте. Каждый элемент содержит название и URL.
theme: Тема сайта, которую следует использовать.
Шаг 3: Разработка Python-скрипта для генерации сайта (generate_site.py)
Далее мы напишем скрипт на Python, который будет использовать шаблон из темы, данные из config.yml и генерировать готовый HTML-файл.
import os
import shutil
from jinja2 import Environment, FileSystemLoader
import yaml
# Загрузка конфигурации
with open('config.yml', 'r') as config_file:
config = yaml.safe_load(config_file)
# Создание выходной директории
output_dir = 'docs'
os.makedirs(output_dir, exist_ok=True)
# Настройка Jinja2
env = Environment(loader=FileSystemLoader('themes/custom'))
template = env.get_template('index.html')
# Генерация HTML файла
output_html = template.render(config=config)
with open(os.path.join(output_dir, 'index.html'), 'w') as fh:
fh.write(output_html)
# Копирование папки assets в выходной каталог
assets_source = os.path.join('themes', config['theme'], 'assets')
assets_dest = os.path.join(output_dir, 'assets')
if os.path.exists(assets_source):
shutil.copytree(assets_source, assets_dest, dirs_exist_ok=True)
print("Site generated successfully.")
Загрузка конфигурации: Скрипт загружает данные из файла config.yml.
Создание выходной директории: Папка docs создается автоматически, если она не существует.
Настройка Jinja2: Используется Jinja2 для загрузки шаблона HTML и рендеринга контента.
Генерация HTML-файла: Скрипт генерирует файл index.html с использованием данных из конфигурации и сохраняет его в папке docs.
Копирование ассетов: Все ассеты (CSS, изображения, скрипты) копируются в папку docs/assets.
Шаг 4: Создание темы и ассетов
Теперь создадим тему, которая будет использоваться для нашего сайта. В папке themes/custom/ должны находиться следующие файлы:
themes/custom/index.html
Это основной HTML-шаблон сайта. Он использует переменные из файла конфигурации.
{{ config.meta.title }}
{{ config.name }}
{{ config.bio }}
{% for link in config.links %}
{{ link.name }}
{% endfor %}
themes/custom/assets/styles.css
Файл CSS для стилизации страницы.
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Variables */
:root {
--max-width: 600px;
--font-family: 'Inter', sans-serif;
--padding: 1rem;
--header-margin-bottom: 1rem;
--line-height: 2;
--font-size: 16px;
--primary-color-light: #ffffff;
--background-color-light: #f0f0f0;
--text-color-light: #333;
--link-color-light: #1a73e8;
--bio-color-light: #666;
--primary-color-dark: #1e1e1e;
--background-color-dark: #121212;
--text-color-dark: #e0e0e0;
--link-color-dark: #8ab4f8;
--bio-color-dark: #aaa;
}
/* Light Theme */
@media (prefers-color-scheme: light) {
:root {
--primary-color: var(--primary-color-light);
--background-color: var(--background-color-light);
--text-color: var(--text-color-light);
--link-color: var(--link-color-light);
--bio-color: var(--bio-color-light);
}
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
--primary-color: var(--primary-color-dark);
--background-color: var(--background-color-dark);
--text-color: var(--text-color-dark);
--link-color: var(--link-color-dark);
--bio-color: var(--bio-color-dark);
}
}
/* Global Styles */
html {
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
}
body {
max-width: var(--max-width);
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color);
color: var(--text-color);
padding: var(--padding);
}
/* Header Styles */
header {
padding: var(--padding) 0;
margin-bottom: var(--header-margin-bottom);
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 0.5rem;
}
.bio {
font-size: 14px;
color: var(--bio-color);
margin-bottom: 1rem;
}
/* Main Content Styles */
main {
width: 100%;
flex: 1;
}
.links {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
overflow-y: auto;
max-height: 400px;
}
.link-item {
display: block;
padding: 16px 20px;
text-decoration: none;
color: var(--link-color);
background: var(--primary-color);
border-radius: 12px;
border: 1px solid var(--link-color);
transition: background-color 0.25s, color 0.25s;
}
.link-item:hover,
.link-item:focus {
background-color: var(--link-color);
color: var(--primary-color);
}
.link-item p {
line-height: 1.5;
font-weight: 500;
}
/* Footer Styles */
footer {
width: 100%;
text-align: center;
padding: 1rem 0;
font-size: 14px;
gap: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
}
::-webkit-scrollbar-thumb:hover {
background: transparent;
}
themes/custom/assets/js/script.js
Файл JavaScript для базовых функциональностей.
console.log("scripts loaded");
const yearDate = new Date().getFullYear().toString();
document.querySelector(".year").innerText = yearDate;
themes/custom/assets/img/picture.jpg
Фотография, которая будет использоваться в качестве аватара.
Шаг 5: Генерация сайта
После того как все файлы созданы, запустите скрипт generate_site.py, чтобы сгенерировать сайт:
python generate_site.py
Сайт будет сгенерирован в папке docs.
Шаг 6: Развертывание на GitHub Pages
Развертывание на GitHub Pages
Создайте новый репозиторий на GitHub.
Загрузите все файлы, включая папку docs, в репозиторий.
Перейдите в раздел Settings репозитория.
В разделе Pages выберите ветку master и папку /docs как источник.
Сохраните изменения и подождите, пока GitHub Pages развернет ваш сайт.
Теперь ваш сайт будет доступен по адресу https://[username].github.io/[repository-name]/
Вот и все! Теперь у вас есть собственный сайт в стиле Taplink, созданный на Python и развернутый на GitHub Pages. Вы можешь посмотреть мой готовый результат по адресу https://king-tri-ton.github.io/pythonpagelink/.
Благодарю за внимание!