When people visit a personal website, they usually only see the final pages and content. But behind that, there is a full workflow that keeps everything organized, versioned, and automatically deployed.
In this post, I want to document the exact framework behind this site in a way that is easy to follow for non-developers and beginner builders.
1) Where the code is hosted (GitHub)
The source code of this website is maintained in a GitHub repository and follows a standard Git workflow:
- Content updates (new blog posts/projects) are done in Markdown files.
- Layout and reusable components are in Hugo template files.
- Static assets (CSS, JavaScript, images, icons) are stored in the static and assets folders.
In practice, GitHub acts as the single source of truth. Every change is tracked with commit history, which makes it easy to:
- see what changed,
- revert mistakes,
- and collaborate or sync between machines.
2) How changes are pushed through Netlify
Netlify is connected to the GitHub repository and handles deployments automatically.
Typical flow:
- I make edits locally (content, layout, styling, scripts).
- I commit and push changes to GitHub.
- Netlify detects the new commit.
- Netlify runs the build command defined in
netlify.toml. - Netlify publishes the generated static files.
For this site, the build setup is explicit:
- Publish directory:
public - Main build command:
hugo --gc --minify - Additional contexts are configured for production, deploy previews, and branch deploys.
This gives a clean CI/CD process with minimal manual work.
3) Built as a static site using Hugo
This site uses Hugo as the static site generator.
At a high level:
content/contains Markdown content (blogs/projects).layouts/contains template files and partials.static/contains files served directly (CSS/JS/images/icons).config.yamldefines site-wide configuration and parameters.
When running Hugo, all templates and Markdown files are compiled into static HTML/CSS/JS output in the public/ directory.
That means:
- no application server is needed to render pages,
- hosting is fast and cost-efficient,
- and deployment is simple because it is just static files.
4) Domain hosted on GoDaddy
The site’s public domain is configured as https://www.michaelcyu.com/.
Operationally, domain and hosting are split:
- GoDaddy manages domain registration and DNS records.
- Netlify handles hosting, deployment, and HTTPS certificate provisioning.
So the DNS layer points traffic from the custom domain to Netlify’s hosted site, while Netlify serves the generated Hugo output.
5) Extra services in this website stack
Beyond the core framework, a few supporting services are configured:
- Giscus comments integrated with GitHub Discussions.
- Google Analytics configured via Hugo settings.
- Theme and section partials for reusable UI components.
This keeps the stack lightweight while still supporting interaction and measurement.
6) End-to-end architecture (simple view)
You can think of the full system as:
Local edits → GitHub repo → Netlify auto build → public static output → GoDaddy domain DNS → Live website
Final thoughts
What I like most about this framework is its balance:
- simple enough to maintain,
- scalable for future content,
- and transparent enough that I always know where content, code, deployment, and DNS responsibilities live.
If you are starting a personal site, this model is a practical and beginner-friendly setup that still follows professional deployment practices.