Below is a concise, ordered list of the key steps I took to get the site to its current state.
- Chose the project scope (Tech Education Blog Hackathon) and purchased the domain
whoissean.dev(Porkbun) with HTTPS. - Created a GitHub repository and selected Jekyll as the tech stack (GitHub Pages friendly).
- Installed Ruby, Jekyll (a Ruby Gem), and Bundler (Ruby package manager) locally; scaffolded a new Jekyll site.
- Set initial configuration in
_config.yml(title, url, plugins, description, GitHub repo info). - Ran the dev server locally (
bundle exec jekyll serve) to verify the baseline theme (Minima). - Overrode the theme with custom templates:
_layouts/default.html,_layouts/home.html,_layouts/post.html_includes/header.html,_includes/footer.html
- Implemented accessibility-first structure: semantic landmarks, skip-link to
#content, single<h1>per page. - Built a minimalist dark theme in
assets/main.scss(CSS variables, typography scale, code/blockquote/table styles). - Added responsive helpers (container/grid), centered the site title, and centered the nav links.
- Added
assets/main.jsfor smooth scrolling and reserved hooks for a mobile menu toggle. - Ensured the footer sticks to the bottom on short pages via flex layout.
- Deployed to GitHub Pages (main branch, root) with custom domain and HTTPS enforced.
- Debugged a GitHub Pages Sass build error by wrapping mixed units with
calc()inclamp()(rem + vw). - Verified Pages build logs via Actions; hard-refreshed the live site to bypass CDN/browser cache.
- Standardized the About page to inherit site chrome by adding
_layouts/page.html(extendsdefault). - Surfaced
site.descriptionin both header (tagline) and footer; kept(% seo %)for meta. - Added post-level action buttons (Back, Prev/Next, Share on X) under each post.
- Enabled comments on all posts with Giscus (GitHub Discussions); embedded widget in
post.html. - Created and published a personalized welcome post (replacing the default Jekyll welcome).
- Drafted the required “Agentic CLI Tools + MCP” post with outline and sections to fill.
- Added documentation updates across repo files (README, workflow, strategy, hackathon progress).
- Planned media (screenshots and short clips) under
assets/imagesandassets/videoswith responsive embeds. - Confirmed initial mobile responsiveness (tested on phone) and basic JS behavior.
- Set up header/footer/domain links and repo metadata for easier navigation and maintenance.
- Integrated Google Analytics (GA4) with tracking ID
G-3PF44HG20Gin_config.ymlanddefault.html. - Created
robots.txtand verifiedjekyll-sitemapgeneratessitemap.xmlautomatically. - Added images and videos to the Agentic CLI Tools + MCP post (Jekyll structure screenshot, code diff example, terminal output video).
- Proofread and refined the mandatory post content for grammar, clarity, and logical flow.
- Resized images to 50% width and left-aligned them with smaller, italicized captions.
- Replaced large video embeds with clickable thumbnail placeholders (35% width) that open videos in fullscreen modals on click.
- Added video thumbnail modal system with JavaScript: clickable thumbnails, fullscreen overlay, close button, Escape key support.
- Added section header “Here is an example of the Cursor chat agent in action” above video thumbnail.
Next targets
- Optional: implement a visible mobile menu toggle for small screens.
- Final Lighthouse performance check and optimization.
Notes / reproducibility
- Edit only source files (
_layouts,_includes,_posts,assets);_site/is generated. - Pushing to
maintriggers a GitHub Pages rebuild; allow ~1–3 minutes and hard-refresh. - Media usage: images as PNG/WebP (resized to 50% width, left-aligned); videos as MP4 (embedded as clickable thumbnails that open in fullscreen modals).
- Video thumbnails: Use
.video-thumbnail-containerdiv withdata-video-srcattribute; JavaScript handles modal display on click.