Skip to content

Optimize static site generation: extract CSS, add minification, consolidate workflow #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Optimize static site generation: extract CSS, add minification, consolidate workflow #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
54f9fda
Initial plan
Copilot Oct 31, 2025
059386d
Extract CSS to separate file and streamline workflow
Copilot Oct 31, 2025
b6c2e80
Add minification and dynamic feed count
Copilot Oct 31, 2025
413b455
Optimize CSS by consolidating duplicate styles
Copilot Oct 31, 2025
74c82ad
Address code review feedback - improve robustness
Copilot Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 28 additions & 85 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,98 +33,41 @@ jobs:
# Create the site directory structure
mkdir -p _site/feeds

# Copy index.html if it exists, otherwise create a basic one
if [ -f "index.html" ]; then
cp index.html _site/
else
cat > _site/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Feeds</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feed {
margin: 20px 0;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feed-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 10px;
color: #2c3e50;
}
.feed-url a {
color: #3498db;
text-decoration: none;
}
.updated {
color: #95a5a6;
font-size: 0.9em;
text-align: center;
margin-top: 40px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="header">
<h1>🎯 RSS Feed Collection</h1>
</div>

<div class="feed">
<div class="feed-title">RSS Feeds</div>
<p>RSS feed files will appear here when uploaded.</p>
</div>

<div class="updated">
Last updated: $(date -u '+%Y-%m-%d %H:%M:%S UTC')
</div>
</body>
</html>
EOF
fi
# Copy static files
cp index.html styles.css _site/

# Copy all XML/RSS feed files to the feeds directory
if ls feeds/*.xml 1> /dev/null 2>&1; then
cp feeds/*.xml _site/feeds/
fi

if ls feeds/*.rss 1> /dev/null 2>&1; then
cp feeds/*.rss _site/feeds/
# Copy all feed files and count them in one pass
FEED_FILES=$(find feeds -type f \( -name "*.xml" -o -name "*.rss" -o -name "*.atom" -o -name "*.json" \) 2>/dev/null || true)
if [ -n "$FEED_FILES" ]; then
echo "$FEED_FILES" | xargs -I {} cp {} _site/feeds/
FEED_COUNT=$(echo "$FEED_FILES" | wc -l)
else
FEED_COUNT=0
fi

# Copy any other feed files that might exist
if [ -d "feeds" ]; then
find feeds -type f \( -name "*.xml" -o -name "*.rss" -o -name "*.atom" -o -name "*.json" \) -exec cp {} _site/feeds/ \;
fi
# Update feed count in HTML using placeholder token
sed -i "s/{{FEED_COUNT}}/${FEED_COUNT}/g" _site/index.html

# List what we're deploying
echo "Site contents:"
find _site -type f | sort

- name: Minify CSS and HTML
run: |
# Install minification tools
npm install -g clean-css-cli html-minifier

# Minify CSS and update HTML reference in one step
cleancss -o _site/styles.min.css _site/styles.css
sed -i 's|<link rel="stylesheet" href="styles\.css">|<link rel="stylesheet" href="styles.min.css">|g' _site/index.html

# Minify HTML in place
html-minifier --collapse-whitespace --remove-comments --minify-css true --minify-js true -o _site/index.html _site/index.html

# Clean up unminified CSS and show size savings
rm _site/styles.css
echo "Optimized file sizes:"
ls -lh _site/index.html _site/styles.min.css

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
Expand Down
79 changes: 2 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Feeds</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feed {
margin: 20px 0;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.feed:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.feed-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 10px;
color: #2c3e50;
}
.feed-url {
margin: 10px 0;
}
.feed-url a {
color: #3498db;
text-decoration: none;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
padding: 5px 10px;
background: #ecf0f1;
border-radius: 5px;
word-break: break-all;
}
.feed-url a:hover {
background: #d5dbdb;
}
.feed-description {
color: #7f8c8d;
font-style: italic;
margin-top: 10px;
}
.updated {
color: #95a5a6;
font-size: 0.9em;
text-align: center;
margin-top: 40px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feed-count {
background: #3498db;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8em;
display: inline-block;
margin-bottom: 20px;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>🎯 RSS Feed Collection</h1>
<div class="feed-count">
20 Active Feeds
{{FEED_COUNT}} Active Feeds
</div>
</div>

Expand Down
68 changes: 68 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.header, .feed, .updated {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.feed {
margin: 20px 0;
transition: transform 0.2s ease;
}
.feed:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.feed-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 10px;
color: #2c3e50;
}
.feed-url {
margin: 10px 0;
}
.feed-url a {
color: #3498db;
text-decoration: none;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
padding: 5px 10px;
background: #ecf0f1;
border-radius: 5px;
word-break: break-all;
}
.feed-url a:hover {
background: #d5dbdb;
}
.feed-description {
color: #7f8c8d;
font-style: italic;
margin-top: 10px;
}
.updated {
color: #95a5a6;
font-size: 0.9em;
text-align: center;
margin-top: 40px;
}
.feed-count {
background: #3498db;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8em;
display: inline-block;
margin-bottom: 20px;
}