-
Notifications
You must be signed in to change notification settings - Fork 0
/
deploy.html
90 lines (84 loc) · 4.96 KB
/
deploy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deploying Changes</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://js.sentry-cdn.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:;">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/icon.svg">
</head>
<body>
<header>
<h1>🚀 Deploying Changes</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="edit.html">How to Edit</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="deploy">
<h2>🌐 How to Deploy Your Portfolio</h2>
<p>Deploying your portfolio website is a crucial step to make it live on the internet. Follow the steps below to successfully deploy your website. 💼</p>
<h3>🔧 Steps to Deploy</h3>
<ul>
<li><strong>Step 1: Prepare your files</strong> 🗂️
<p>Ensure all your HTML, CSS, JavaScript, and asset files (like images and fonts) are correctly organized in your project directory.</p>
</li>
<li><strong>Step 2: Choose a hosting platform</strong> 🌍
<p>There are several free and paid hosting platforms available. For beginners, we recommend using <a href="https://pages.github.com/" target="_blank">GitHub Pages</a> or <a href="https://www.netlify.com/" target="_blank">Netlify</a>.</p>
</li>
<li><strong>Step 3: Deploy with GitHub Pages</strong> 🚀
<p>If you choose GitHub Pages, follow these steps:</p>
<ol>
<li>Initialize a git repository in your project folder using <code>git init</code>.</li>
<li>Add your files to the repository with <code>git add .</code>.</li>
<li>Commit your changes with <code>git commit -m "Initial commit"</code>.</li>
<li>Push your changes to a GitHub repository using <code>git push origin main</code>.</li>
<li>Go to the repository settings on GitHub and enable GitHub Pages from the <code>main</code> branch.</li>
</ol>
</li>
<li><strong>Step 4: Deploy with Netlify</strong> 🚀
<p>If you choose Netlify, follow these steps:</p>
<ol>
<li>Sign in to Netlify and create a new site from Git.</li>
<li>Connect your GitHub repository to Netlify.</li>
<li>Configure the build settings and deploy the site.</li>
</ol>
</li>
<li><strong>Step 5: Verify your deployment</strong> ✔️
<p>Once deployed, verify that your site is live by navigating to the provided URL. Ensure all links and assets are loading correctly.</p>
</li>
</ul>
<h3>💡 Tips and Tricks</h3>
<ul>
<li><strong>Use version control</strong> 🗃️: Regularly commit your changes to keep track of your progress and easily roll back if needed.</li>
<li><strong>Automate deployments</strong> 🤖: Use CI/CD tools like GitHub Actions or Netlify’s built-in CI/CD to automate your deployment process.</li>
<li><strong>Monitor your site</strong> 🔍: Use tools like Google Analytics and Sentry (as mentioned earlier) to monitor site performance and errors.</li>
</ul>
<h3>📚 Additional Resources</h3>
<p>Here are some useful resources to help you deploy and maintain your portfolio:</p>
<ul>
<li><a href="https://docs.github.com/en/pages" target="_blank">GitHub Pages Documentation</a></li>
<li><a href="https://docs.netlify.com/" target="_blank">Netlify Documentation</a></li>
<li><a href="https://vercel.com/docs" target="_blank">Vercel Documentation</a></li>
<li><a href="https://www.digitalocean.com/docs/" target="_blank">DigitalOcean Documentation</a></li>
</ul>
<p>Happy deploying! 🚀 If you have any questions or need further assistance, feel free to reach out.</p>
</section>
<div class="custom-cursor"></div>
<script src="scripts.js"></script>
<script
src="https://js.sentry-cdn.com/0511d1eb23a5b7d982a0ad221c754fa7.min.js"
crossorigin="anonymous"
></script>
</body>
</html>