Hostinger-reg-GitHub step 2
📦 General
✨ The Prompt Phrase
After creating the website in Hostinger, navigate to the Advanced section and select the Git tab. Create a new SSH key (not an existing one), copy it, and prepare to paste it into GitHub for deployment.
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIT Repository Management</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f0f1;
padding: 20px;
}
.breadcrumb {
background: white;
padding: 12px 20px;
margin-bottom: 20px;
border-radius: 4px;
font-size: 14px;
color: #666;
}
.breadcrumb strong {
color: #333;
margin-right: 10px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.card {
background: white;
border-radius: 8px;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.card-header .icon {
color: #666;
font-size: 20px;
}
.card-header h2 {
font-size: 18px;
font-weight: 600;
color: #333;
}
.card-description {
color: #666;
font-size: 14px;
margin-bottom: 20px;
line-height: 1.5;
}
.ssh-key-container {
margin-bottom: 20px;
}
.ssh-label {
font-size: 13px;
color: #333;
margin-bottom: 8px;
display: block;
}
.ssh-textarea {
width: 100%;
min-height: 140px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 12px;
line-height: 1.6;
resize: vertical;
background: #fafafa;
color: #333;
}
.button-group {
display: flex;
gap: 12px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.btn-copy {
background: white;
color: #6366f1;
border: 1px solid #e0e0e0;
}
.btn-copy:hover {
background: #f5f5f5;
}
.btn-remove {
background: #dc2626;
color: white;
}
.btn-remove:hover {
background: #b91c1c;
}
.btn-create {
background: #6366f1;
color: white;
padding: 12px 28px;
}
.btn-create:hover {
background: #5558e3;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
color: #333;
transition: border-color 0.2s;
}
.form-input:focus {
outline: none;
border-color: #6366f1;
}
.form-hint {
font-size: 12px;
color: #888;
margin-top: 6px;
}
.warning-text {
color: #666;
font-size: 13px;
line-height: 1.6;
margin-bottom: 15px;
}
.icon-copy::before {
content: "📋";
}
.icon-trash::before {
content: "🗑️";
}
</style>
</head>
<body>
<div class="breadcrumb">
<strong>GIT</strong> 🏠 - Websites - glpromptmanager.com - Advanced - GIT
</div>
<div class="container">
<!-- Private Git Repository Card -->
<div class="card">
<div class="card-header">
<span class="icon">⚙️</span>
<h2>Private Git Repository</h2>
</div>
<p class="card-description">
Add this SSH key to your Github, Bitbucket or any other service to deploy private repositories
</p>
<div class="ssh-key-container">
<label class="ssh-label">ssh-rsa</label>
<textarea class="ssh-textarea" readonly>AAAAB3NzaC1yc2EAAAADAQABAAABgQCoHO47L5bGpYiw7RArJPROmJ3qiHtLZfsKvgSfrrHZvCp3855RyXt78ECN4Dbu+21GdyBKaorxBLinEpyeO+ITIvuGQha+yTrDx2jy8vgHIEKdsb2+UwWIHcYTOxWgDSkykeaA7M4CYlaD69zRBYOhk3pQ1bTASilJedQ9YDytEkhdVT09QDits6l0Wob8ySONaRtm1OOXtqsFDgq22dDAfQaO/F6JthAODEmNft31OrDj6XqA2xtM1KSrzE/KEuJJRkNxeMQrPwneFZ6byjocSCq1IHN7X4qgdg6CGMJKpOb5XSonvscKGO+QJH7VG2i1Kw6G4SQ8G1l3zhqgSOPoo/QxyLHhjRGMDoMzC/rymw7mjy5keFMzKOBqtKvas/aOVFbIZ5Bs9QbQNjKJhNixHrWmmb4TdGDWoOZ9SQM/Ed3ROqO2bohQ7uUhGKIARqKfYEfWcBWPNuQLtFoidrOB+yV41Hd7ZCfUsnpWn3bSdALcbnmaBDPAs+MRUR7ze8E= u419999707@fr-int-web1788.main-hosting.eu</textarea>
</div>
<div class="button-group">
<button class="btn btn-copy">
<span class="icon-copy"></span>
Copy
</button>
<button class="btn btn-remove">
<span class="icon-trash"></span>
Remove SSH Key
</button>
</div>
</div>
<!-- Create a New Repository Card -->
<div class="card">
<div class="card-header">
<span class="icon">⚙️</span>
<h2>Create a New Repository</h2>
</div>
<p class="card-description">
Deploy application directly from public Git repository. Enter your public repository http URL, branch name and install path. Install path can be left empty, application will be deployed directly to public_html directory.
</p>
<p class="warning-text">
Install path directory must not contain any files or folders, otherwise deployment will fail.
</p>
<form>
<div class="form-group">
<label class="form-label">Repository</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Examples: For public repositories: https://github.com/WordPress/WordPress.git and for private repositories: git@github.com:WordPress/WordPress.git</p>
</div>
<div class="form-group">
<label class="form-label">Branch</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Usually this is the master branch</p>
</div>
<div class="form-group">
<label class="form-label">Directory (optional)</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Leave blank to deploy directly to public_html. Folder must be empty.</p>
</div>
<button type="submit" class="btn btn-create">Create</button>
</form>
</div>
</div>
<script>
// Copy button functionality
document.querySelector('.btn-copy').addEventListener('click', function() {
const textarea = document.querySelector('.ssh-textarea');
textarea.select();
document.execCommand('copy');
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = '<span class="icon-copy"></span> Copied!';
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
});
// Form submission
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Repository creation initiated!');
});
</script>
</body>
</html>
Live Preview