-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject_github.html
More file actions
394 lines (362 loc) · 19 KB
/
Copy pathproject_github.html
File metadata and controls
394 lines (362 loc) · 19 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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<!DOCTYPE HTML>
<html>
<head>
<title>Resume - Jonathan Layman</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="no-sidebar is-preload">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<!-- Logo -->
<h1 id="logo"><a href="index.html">Jonathan Layman</a></h1>
<p>Cyber Security Instructor | Senior Intelligence Analyst | Military Veteran</p>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a class="icon solid fa-home" href="index.html"><span>Home</span></a></li>
<li>
<a href="#" class="icon solid fa-tasks"><span>AWS Cloud Challenge</span></a>
<ul>
<li><a href="Project.html">AWS Cloud Challenge</a></li>
<li><a href="project_vscode.html">1. VS Code Workflow</a></li>
<li><a href="project_awss3hosting.html">2. AWS S3 Hosting</a></li>
<li><a href="project_route53.html">3. Route 53 Domain</a></li>
<li><a href="project_cloudfront.html">4. CloudFront HTTPS</a></li>
<li><a href="project_github.html">5. GitHub CI/CD</a></li>
<li><a href="project_costoptimization.html">6. Cost Optimization</a></li>
<li><a href="project_visitorcounter.html">7. Visitor Counter</a></li>
<li><a href="project_terraform.html">8. IaC with Terraform</a></li>
<li><a href="project_ServerlessContactForm.html">9. Serverless Contact Form</a></li>
<!--<li><a href="project_advSecExtenstion.html">9. Adv. Security Extension</a></li>-->
<!--<li><a href="project_ServerlessContactForm.html">10. Serverless Contact Form</a></li>-->
</ul>
</li>
<!-- Future Links <li><a class="icon solid fa-cog" href="left-sidebar.html"><span>Projects</span></a></li>-->
<!-- Future Links <li><a class="icon solid fa-retweet" href="right-sidebar.html"><span>Right Sidebar</span></a></li>-->
<li><a class="icon solid fa-user-tie" href="resume.html"><span>Resume</span></a></li>
</ul>
</nav>
</div>
</section>
<div id="wrapper">
<!-- Main -->
<div id="main">
<!-- Post -->
<article class="post">
<header>
<div class="title">
<h2>Automating Deployments with GitHub CI/CD</h2>
<p>Part 5 of the AWS Cloud Resume Challenge</p>
<time class="published">January 28, 2026</time>
</div>
</header>
<section class="project">
<p>After deploying my website to Amazon S3 and securing it with CloudFront and HTTPS, the site was publicly accessible and performing well. However, the deployment process itself was still manual. Every time I updated my resume, fixed a typo, or changed a line of CSS, I had to manually upload files through the AWS Console.</p>
<p>While this works for small experiments, it quickly becomes inefficient and introduces unnecessary risk. Manual uploads can easily overwrite the wrong files, forget updates, or create inconsistencies between local code and the deployed version.</p>
<p>To solve this problem, I implemented an automated CI/CD deployment pipeline using GitHub and AWS CodePipeline. This allows any changes pushed to my GitHub repository to automatically deploy to my S3 website hosting bucket.</p>
<p>This approach reflects how modern cloud environments operate. Instead of manually updating infrastructure or applications, deployments are automated through version-controlled pipelines.</p>
<h3>Step 1 - Moving the Website into Version Control</h3>
<p>The first step was placing the website source code under version control using GitHub. I created a repository and uploaded all of the files used to build the site, including:</p>
<ul>
<li>HTML pages</li>
<li>CSS stylesheets</li>
<li>JavaScript files</li>
<li>Images and static assets</li>
</ul>
<p>By storing the project in GitHub, the repository becomes the single source of truth for the website. Every change is tracked through commits, making it easy to review the history of the project and revert changes if necessary.</p>
<p>Version control is also an essential component of CI/CD pipelines because deployment systems need a centralized location from which to pull source code.</p>
<!-- IMAGE 1 -->
<img src="images/P5_Img1_RepoStructure.png" width="640" height="341" alt="GitHub repository showing the website source code and project file structure." />
<em>GitHub repository showing the website source code and project file structure.</em>
<h3>Step 2 - Creating the Deployment Pipeline</h3>
<p>Once the repository was established, the next step was creating an automated deployment pipeline using AWS CodePipeline.</p>
<p>CodePipeline is a fully managed AWS service that automates the process of building, testing, and deploying applications. For this project, I configured a simple pipeline with two stages:</p>
<ul>
<li>Source Stage</li>
<li>Deploy Stage</li>
</ul>
<p>The Source stage connects directly to the GitHub repository. Whenever new code is pushed to the main branch, CodePipeline automatically detects the change and starts a new pipeline execution.</p>
<p>The Deploy stage takes the updated files from the repository and synchronizes them with the S3 bucket hosting the website.</p>
<p>This allows the entire deployment process to run automatically without requiring any manual uploads.</p>
<!-- IMAGE 2 -->
<img src="images/P5_Img2_CodePipeline.png" width="640" height="341" alt="AWS CodePipeline pipeline view showing the Source and Deploy stages connected to the GitHub repository." />
<em>AWS CodePipeline pipeline view showing the Source and Deploy stages connected to the GitHub repository.</em>
<h3>Step 3 - Deploying Updates to the S3 Website Bucket</h3>
<p>During the deploy stage, CodePipeline updates the S3 bucket containing the static website files.</p>
<p>When new code is pushed to GitHub:</p>
<ul>
<li>CodePipeline detects the repository change</li>
<li>The pipeline downloads the latest version of the repository</li>
<li>Updated files are uploaded to the S3 bucket hosting the website</li>
</ul>
<p>This ensures the contents of the S3 bucket always match the latest version of the GitHub repository.</p>
<p>Because the website is delivered through CloudFront, the updated files become available globally once the distribution refreshes its cache.</p>
<p>The entire deployment process now happens automatically whenever changes are pushed to GitHub.</p>
<h3>Step 4 - Testing the Deployment Pipeline</h3>
<p>To confirm that the pipeline was working correctly, I made a small change to the website and pushed the update to the GitHub repository.</p>
<p>Immediately after the commit was pushed, CodePipeline automatically triggered a new pipeline execution. The AWS console allowed me to watch the deployment process in real time.</p>
<p>Once the pipeline completed successfully, the updated files were already deployed to the S3 bucket and served through CloudFront.</p>
<p>Refreshing the website confirmed that the changes were live.</p>
<!-- IMAGE 3 - CodePipeline Executions -->
<img src="images/P5_Img3_PipelineExecutions.png" width="640" alt="AWS CodePipeline executions showing successful automated deployments triggered by GitHub commits." />
<em>CodePipeline execution history showing successful automated deployments triggered by GitHub commits.</em>
<h3>Lessons Learned</h3>
<p>This stage of the project highlighted an important principle in modern cloud development: automation reduces risk and improves consistency.</p>
<p>Before implementing CI/CD, every deployment required manually uploading files through the AWS Console. While this method works for small changes, it introduces opportunities for mistakes and slows down the development process.</p>
<p>Automating deployments through CodePipeline ensures that:</p>
<ul>
<li>The GitHub repository remains the authoritative version of the website</li>
<li>Deployments happen consistently every time code is updated</li>
<li>The risk of human error during manual uploads is eliminated</li>
</ul>
<p>Another important lesson was understanding how AWS services integrate together. By connecting GitHub, CodePipeline, S3, and CloudFront, the website now has a fully automated deployment pipeline similar to what many production environments use.</p>
<h3>The Result</h3>
<p>The website now has a fully automated deployment workflow.</p>
<p>Whenever I push updates to GitHub:</p>
<p><code>GitHub Repository → AWS CodePipeline detects the change → CodePipeline deploys the update to S3 → CloudFront serves the updated website globally</code></p>
<p>This process allows me to update the site quickly and confidently without manually interacting with the AWS console.</p>
<h3>What's Next</h3>
<p>With the deployment process automated, the next step is focusing on cost visibility and monitoring.</p>
<p>Even though most of the services used in this project fall within the AWS Free Tier, monitoring cloud costs early is an important habit for anyone working in cloud engineering.</p>
<p>In the next post, I will configure AWS Budgets and cost alerts to ensure the infrastructure stays within safe spending limits as the project continues to grow.</p>
</br>
<strong>Next Up:</strong> <a href="project_costoptimization.html">Cost Optimization - Setting Up My AWS Safety Net</a>
</section>
</article>
<!-- Post -->
</div>
<!-- Projects --><!-- Projects
<section id="projects">
<div class="container">
<section class="posts">
<article>
<header>
<span class="date">April 24, 2017</span>
<h2><a href="#">Sed magna<br />
ipsum faucibus</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 22, 2017</span>
<h2><a href="#">Primis eget<br />
imperdiet lorem</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic03.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 18, 2017</span>
<h2><a href="#">Ante mattis<br />
interdum dolor</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 14, 2017</span>
<h2><a href="#">Tempus sed<br />
nulla imperdiet</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
</section>
</div>
</section>-->
<!-- Sidebar -->
<section id="sidebar">
<!-- Mini Posts -->
<!-- Sidebar <section>
<div class="mini-posts">
<article class="mini-post">
<header>
<h3><a href="single.html">Future Project #1</a></h3>
<time class="published" datetime="2015-10-20">October 20, 2015</time>
</header>
<a href="single.html" class="image"><img src="images/pic04.jpg" alt="" /></a>
</article>
</section>
Mini Post -->
<!-- UL Posts List -->
<section>
<ul class="posts">
<li><center>AWS Cloud Resume Challenge Projects</center></li>
<li>
<article>
<header>
<h3><a href="project_vscode.html">VS Code Workflow</a></h3>
<time class="published" datetime="2015-10-20">January 28, 2026</time>
</header>
<a href="project_vscode.html" class="image"><img src="images/VSCodeProject.png" alt="VS Code Logo"/></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_awss3hosting.html">AWS S3 Hosting</a></h3>
<time class="published" datetime="2015-10-15">January 30, 2026</time>
</header>
<a href="project_awss3hosting.html" class="image"><img src="images/AWS_S3Logo.png" alt="Modified AWS S3 Logo"/></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_route53.html">Route 53 Domain</a></h3>
<time class="published" datetime="2015-10-10">January 31, 2026</time>
</header>
<a href="project_route53.html" class="image"><img src="images/AWS_Route53Logo.png" alt="AWS Route 53 Logo"/></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_cloudfront.html">CloudFront HTTPS</a></h3>
<time class="published" datetime="2015-10-08">February 4, 2026</time>
</header>
<a href="project_cloudfront.html" class="image"><img src="images/AWS_CloudFrontLogo.png" alt="Amazon CloudFront Logo"/></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_github.html">GitHub CI/CD</a></h3>
<time class="published" datetime="2015-10-06">February 8, 2026</time>
</header>
<a href="project_github.html" class="image"><img src="images/GitHubLogo.png" alt="GitHub Logo"/></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_costoptimization.html">Cost Optimization</a></h3>
<time class="published" datetime="2015-10-06">February 14, 2026</time>
</header>
<a href="project_costoptimization.html" class="image"><img src="images/AWS_CostOpt.png" alt="Coin and Down Arrow" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_visitorcounter.html">Creating a Visitor Counter</a></h3>
<time class="published" datetime="2015-10-06">February 23, 2026</time>
</header>
<a href="project_visitorcounter.html" class="image"><img src="images/VisitorCounter.png" alt="Visitor Counter Logo" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_terraform.html">IaC with Terraform</a></h3>
<time class="published" datetime="2015-10-06">March 7, 2026</time>
</header>
<a href="project_terraform.html" class="image"><img src="images/TerraformLogo.png" alt="Terraform Logo" /></a>
</article>
</li>
<li>
<article>
<header>
<h3><a href="project_ServerlessContactForm.html">Serverless Contact Form</a></h3>
<time class="published" datetime="2015-10-06">March 12, 2026</time>
</header>
<a href="project_ServerlessContactForm.html" class="image"><img src="images/ServerlessContactForm.png" alt="Serverless Contact Form Logo" /></a>
</article>
</li>
</ul>
</section>
</section>
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<header>
<h2>Questions or comments? <strong>Get in touch:</strong></h2>
</header>
<div class="row">
<div class="col-6 col-12-medium">
<section>
<form id="contact-form">
<div class="row gtr-50">
<div class="col-6 col-12-small">
<input id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-6 col-12-small">
<input id="email" name="email" placeholder="Email" type="email" required />
</div>
<div class="col-12">
<textarea id="message" name="message" placeholder="Message" required></textarea>
</div>
<!-- Honeypot spam trap -->
<input type="text" name="company" id="company" style="display:none">
<div class="col-12">
<button type="submit" class="form-button-submit button icon solid fa-envelope">
Send Message
</button>
</div>
<div class="col-12">
<p id="contact-status"></p>
</div>
</div>
</form>
</section>
</div>
<div class="col-6 col-12-medium">
<section>
<p>I'm based in San Antonio, TX and always open to discussing cloud, AI, and cybersecurity projects, roles, or collaborations. Feel free to reach out using the form or the contact details below.</p>
<div class="row">
<div class="col-6 col-12-small">
<ul class="icons">
<li class="icon brands fa-linkedin">
<a href="https://www.linkedin.com/in/jonathanlayman/" target="_blank" rel="noopener noreferrer">
linkedin.com/in/jonathanlayman
</a>
</li>
<!--<li class="icon solid fa-envelope">
<a href=""></a>
</li>-->
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
<div id="copyright" class="container">
<ul class="links">
<li>© All rights reserved.</li><li>Design: Jonathan Layman & <a href="http://html5up.net">HTML5 UP</a></li>
<li>Visitors: <span id="visitor-count">0</span></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/visitor-counter.js"></script>
<script src="assets/js/contact-form.js"></script>
</html>