Personal Blog Building Process

Recording the process of building a personal blog using AtomCode

Prompts

• How to create a personal blog for a developer's self-introduction
• Help me build a personal blog
• Add resume information to update actual skills and experience on the page
• Check and refine the interface according to my needs
• Publish the blog to the public internet for free
• Follow AI prompts to publish the blog to GitHub Pages

Abstract

This article details the entire process of building a developer's personal blog from scratch using AtomCode. The main content includes:

1. Platform Selection: Compared options like GitHub Pages, Vercel, Netlify, and self-built cloud servers, ultimately choosing GitHub Pages as a free, zero-maintenance deployment platform.
2. Tech Stack: Implemented using a pure frontend tech stack (HTML5, CSS3, JavaScript), and utilized CSS variables to achieve theme switching.
3. Building Process: Completed in seven steps, from project initialization, page structure design, style design, interactive features (scroll highlighting, animations, theme switching), to final deployment and launch.
4. Problems and Solutions: Summarized common issues encountered during deployment (such as build failures, network timeouts, theme switching not working, etc.) and their solutions.
5. Result Showcase: Provided the online access address and final renderings of the blog on desktop and mobile.

This article aims to provide developers with a clear, reproducible guide for building a static blog.

1. Platform Selection

Solution Comparison

Solution	Cost	Difficulty	Features
GitHub Pages	Free	⭐⭐	Global CDN acceleration, supports custom domains, no server needed
Vercel	Free	⭐⭐	Automatic deployment, supports Serverless functions
Netlify	Free	⭐⭐	Out-of-the-box features like form handling, authentication
Self-built Cloud Server	Paid	⭐⭐⭐⭐	Fully controllable, but requires maintenance costs

Final Choice: GitHub Pages

Reasons:

1. Completely Free — Repository hosting + page deployment + CDN acceleration are all free
2. Zero Maintenance — Automatic build and deployment after pushing code, no server management needed
3. Supports Custom Domains — Can bind your own domain name
4. Version Control — Git naturally manages code history, easy rollback
5. Pure Static Site — A personal blog is fully sufficient with pure static pages, no backend needed

---

2. Tech Stack

Technology	Purpose
HTML5	Page structure
CSS3	Styling and layout, using CSS variables to implement theme switching
JavaScript (ES6+)	Interaction logic (navigation highlighting, scroll animations, form interaction, theme switching)
Font Awesome 6	Icon library
Git	Version control
GitHub	Code hosting
GitHub Pages	Static site deployment

---

3. Building Process

Step 1: Initialize Project

D:\Users\intq7\Desktop\Huawei\思考\
├── index.html      # Main page
├── style.css       # Stylesheet
├── script.js       # Interaction script
├── intQ7.jpg       # Avatar / Browser tab icon
├── .gitignore      # Git ignore file
├── .nojekyll       # Skip Jekyll build
└── 个人博客搭建过程.md  # This document

Step 2: Create Page Structure

index.html contains the following sections:

• Navigation Bar — Fixed at top, blurred background after scrolling, hamburger menu on mobile
• Hero Section — Avatar, name, title, tagline, social links
• About Me — Skill introduction + animated statistics numbers
• Skill Stack — Progress bars + tag cloud, animations play when scrolled into view
• Project Portfolio — Card display, hover effects
• Work Experience — Timeline layout
• Blog Posts — Blog cards
• Contact Me — Contact info + form
• Footer — Social links

Step 3: Design Styles

• Dark Theme — Eye-friendly, developer style
• CSS Variables — Unified color management, easy theme switching
• Responsive Design — 2~3 columns on desktop, 1 column on mobile
• Animation Effects — Number increment, progress bar filling, card hover lift, smooth scrolling

Step 4: Add Interactions

• Navigation bar highlights current section on scroll
• Mobile hamburger menu toggle
• Number increment animation (IntersectionObserver)
• Skill bar fill animation (triggered on scroll)
• Form submission simulated feedback
• Page load fade-in animation

Step 5: Add Theme Switching

• Light/Dark mode toggle button (top right corner)
• Uses CSS variables + :root.light override
• localStorage persists user preference
• Default light mode

Elements with deepened colors in light mode:

Element	Dark Mode	Light Mode
Hero Title	#a5b4fc Light Purple	#6366f1 Purple
Skill Card Title	#a5b4fc Light Purple	#6366f1 Purple
Contact Me Button	#a5b4fc Light Purple	#6366f1 Purple
Tag Cloud Tags	#a5b4fc Light Purple	#6366f1 Purple
Project Tags	#a5b4fc Light Purple	#6366f1 Purple
Timeline Dates	#a5b4fc Light Purple	#6366f1 Purple

Step 6: Deploy Online

Method 1: Git Push (Recommended)

git init
git add -A
git commit -m "feat: Initialize personal blog"
git remote add origin https://github.com/YourUsername/blogs.git
git branch -M main
git push -u origin main

Method 2: GitHub API Upload (When git push has network issues)

# Use GitHub Contents API to upload files one by one
# Requires a Personal Access Token

Enable GitHub Pages:

1. Repository Settings → Pages
2. Source select main branch, / path
3. Add .nojekyll file to skip Jekyll build
4. Wait a few minutes, visit https://Username.github.io/blogs/

Step 7: Subsequent Maintenance

# After modifying code
git add -A
git commit -m "feat: Describe the modification"
git push

---

4. Pitfalls Encountered and Solutions

Problem	Cause	Solution
GitHub Pages build failure	Default Jekyll build for pure HTML site	Add .nojekyll file
git push timeout	Network environment restrictions	Use GitHub API to upload files
Theme switching not working	JS placed inside DOMContentLoaded, but script at body end means DOM is already ready	Move to top-level code
Light mode colors too faint	--primary-light not clear on light background	Add .light override, use var(--primary)

---

5. Online Address

https://intq7.github.io/blogs/

6. Renderings

Desktop

Mobile