-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path4_project.html
More file actions
203 lines (185 loc) · 8.22 KB
/
Copy path4_project.html
File metadata and controls
203 lines (185 loc) · 8.22 KB
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="Leo Castro Project 1 - Docker Example" />
<meta name="author" content="Leo Castro" />
<title>Project 1 - Leo Castro</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap Icons -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
rel="stylesheet"
/>
<!-- Core Theme CSS (includes Bootstrap) -->
<link href="css/styles.css" rel="stylesheet" />
<!-- Syntax Highlighting Theme -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"
/>
<style>
/* Optional: keep code boxes visually consistent with your cards */
.code-box pre {
background-color: #1e1e1e;
color: #e4e4e4;
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
font-size: 0.9rem;
}
</style>
</head>
<body class="d-flex flex-column h-100 bg-light">
<main class="flex-shrink-0">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container px-5">
<a class="navbar-brand" href="index.html"
><span class="fw-bolder text-primary">Leo Castro</span></a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 small fw-bolder">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container px-5 my-5">
<div class="text-center mb-5">
<h1 class="display-5 fw-bolder mb-0">
<span class="text-gradient d-inline">Static Website with Nginx and Docker</span>
</h1>
<p class="text-muted mt-3">
Having just graduated, I wasn’t quite sure where to start showcasing my work. While taking my Data Science SQL course, I followed @amigoscode tutorials alongside the class and found him to be an
excellent instructor. I had bookedmarked <i>Docker and Kubernetes – Full Course for Beginners </i> a while back and finally had the time to finish watching it. Now was the perfect time to learn
about containerization more and build a personal website. I used a Bootstrap template to streamline the development process. This is more of a general overview of running a setup than an actual
tutorial.
</p>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-12 col-xl-10">
<!-- Docker Project Example Section -->
<section>
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<div class="text-center mb-4">
</div>
<p>
I built and deployed a static webpage using Nginx as the web server. The official Nginx Docker image documentation is a great reference for creating and customizing configurations. Nginx
functions as a reverse proxy and web server that supports HTTP, HTTPS, SMTP, POP3, and IMAP protocols, while also providing caching capabilities. I chose to use a Dockerfile to generate a
lightweight custom image based on Alpine Linux.
</p>
<div class="code-box mb-4">
<pre><code class="language-bash">
# Dockerfile
FROM nginx:alpine.version
COPY static-html-directory /usr/share/nginx/html
</code></pre>
<h4 class="fw-bold">Exposing Port</h4>
<p>
I then exposed my directory contents to an external port and then opened the
site at http://localhost:8080
</p>
<div class="code-box mb-4">
<pre><code class="language-bash">
# create docker image
docker run --name some-nginx -d -p 8080:80 some-content-nginx
</code></pre>
</code></pre>
<h4 class="fw-bold">Commit and Push</h4>
<p>
I used Github Pages to publish my static webpage. After setting up my SSH key, I was able to commit and push changes directly from my local directory to Github. It seems scary, but once you have done it a few times, it becomes a breeze.
</p>
<div class="code-box mb-4">
<pre><code class="language-bash">
# Commit and push changes in current directory to main
git add .
git commit -m “description”
git push -u origin main
</code></pre>
</div>
<p>
The above is a simplistic overview, but in reality it took about a week of troubleshooting to get everything running smoothly. Editing the contents and style took another week to get a basic understanding of HTML and CSS styling. I went back and forth of how to get the Contact Me form working, but ultimately decided to just use formspree.io. I contemplated creating a Next.js or Flask app with SQL, but just opted for a shortcut for now as I just need to get this website up and running. That could be for a future post. I created a .gitignore file for Git to ignore as I continue building projects
</p>
<p>
Overall, this was a great foundational project to start with. I’ve worked with Docker before, but only at a surface level. Being an Arch user, I’m comfortable working from the terminal, but my Neovim workflow improved significantly throughout this project. There were plenty of headaches along the way trying to get everything fully implemented, but that’s the whole point of building projects—you learn the most by troubleshooting when things go wrong.
</p>
<p>
Thanks for reading if you made it this far!
</p>
</div>
</div>
</section>
<!-- Back Button -->
<div class="text-center">
<a
class="btn btn-primary px-4 py-2 fw-semibold"
href="projects.html"
>
← Back to Projects
</a>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white py-4 mt-auto">
<div class="container px-5">
<div
class="row align-items-center justify-content-between flex-column flex-sm-row"
>
<div class="col-auto">
<div class="small m-0">Copyright © Leo Castro 2025</div>
</div>
<div class="col-auto">
<a class="small" href="projects.html">Projects</a>
<span class="mx-1">·</span>
<a class="small" href="index.html">Home</a>
<span class="mx-1">·</span>
<a class="small" href="contact.html">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="js/scripts.js"></script>
</body>
</html>