Lesson 7.3: Creating Your Website

In this lesson, you'll enhance your website with additional features and practice essential file management skills. This hands-on work demonstrates your ability to organize, edit, and manage web content.

Real-World Skills: File management, content organization, and website maintenance are fundamental skills for web developers. This lesson gives you practical experience with these essential tasks.

Enhancing Your Website

Let's add more content and features to your website:

Adding Images

Add images to make your website more visually appealing:

$ cd ~/my-website/images # Download a sample image (or use your own) $ wget https://via.placeholder.com/150x150.png -o logo.png # Or copy an existing image $ cp ~/Pictures/my-photo.jpg ~/my-website/images/

Updating HTML to Include Images

Modify your HTML files to include images:

$ nano ~/my-website/index.html

Add this to your index.html header:


    
    Welcome to My Website
    This is my first website running on Nginx!

Adding CSS for Images

Update your CSS to style the logo:

$ nano ~/my-website/css/style.css

Add this to your CSS file:

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

File Management Operations

Practice essential file management skills:

Copying Files

Create backups and organize your files:

# Create backup directory $ mkdir ~/my-website-backup # Copy all HTML files $ cp *.html ~/my-website-backup/ # Copy entire directory $ cp -r ~/my-website ~/my-website-backup-$(date +%Y%m%d)

Moving and Renaming Files

# Rename a file $ mv contact.html contact-us.html # Move files to different locations $ mv ~/my-website/images/logo.png ~/my-website/assets/ # Organize files by type $ mkdir ~/my-website/assets $ mv ~/my-website/images/* ~/my-website/assets/

Removing Files

# Remove specific file $ rm ~/my-website/old-page.html # Remove directory and contents $ rm -r ~/my-website/temp/ # Remove files by pattern $ rm ~/my-website/*.tmp

Advanced File Operations

Practice more advanced file management techniques:

Finding Files

# Find all HTML files $ find ~/my-website -name "*.html" /home/valente/my-website/index.html /home/valente/my-website/about.html /home/valente/my-website/contact.html # Find files by content $ grep -r "Welcome" ~/my-website/ index.html:

Welcome to My Website

# Find files modified recently $ find ~/my-website -mtime -7

File Permissions Management

# Check current permissions $ ls -la ~/my-website/ # Change permissions for security $ chmod 600 ~/my-website/private.html $ chmod 755 ~/my-website/public/ # Change ownership if needed $ sudo chown www-data:www-data ~/my-website/

Content Updates and Maintenance

Learn how to maintain and update your website content:

Version Control with Git

Use Git to track changes to your website:

$ cd ~/my-website $ git init $ git add . $ git commit -m "Initial website version" $ git log --oneline 1a2b3c4 Initial website version

Creating a Sitemap

Create a sitemap to help search engines:

$ nano ~/my-website/sitemap.xml

Add this content to sitemap.xml:



    
        http://localhost/index.html
        2024-12-10
        weekly
        1.0
    
    
        http://localhost/about.html
        2024-12-10
        monthly
        0.8
    
    
        http://localhost/contact.html
        2024-12-10
        yearly
        0.6

Creating a Robots File

Create a robots.txt file to control search engine access:

$ nano ~/my-website/robots.txt

Add this content to robots.txt:

User-agent: *
Allow: /
Disallow: /private/

Sitemap: http://localhost/sitemap.xml

Website Testing and Validation

Test your website thoroughly:

HTML Validation

# Install HTML validator (optional) $ sudo apt install tidy # Validate HTML $ tidy -qe ~/my-website/index.html

Link Checking

# Check for broken links $ find ~/my-website -name "*.html" -exec grep -H "href=" {} \; # Or use link checker tools $ curl -s -o /dev/null -w "%{http_code}" http://localhost/nonexistent.html

Performance Testing

# Test page load time $ time curl -s http://localhost/ > /dev/null # Check response headers $ curl -I http://localhost/ HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Content-Type: text/html

Backup and Recovery

Implement proper backup strategies:

Automated Backups

# Create backup script $ nano ~/backup-website.sh

Add this backup script content:

#!/bin/bash
# Website backup script
BACKUP_DIR="$HOME/my-website-backups"
WEBSITE_DIR="$HOME/my-website"
DATE=$(date +%Y%m%d_%H%M%S)

# Create backup directory
mkdir -p "$BACKUP_DIR"

# Create compressed backup
tar -czf "$BACKUP_DIR/website_$DATE.tar.gz" -C "$WEBSITE_DIR" .

# Keep only last 7 days of backups
find "$BACKUP_DIR" -name "*.tar.gz" -mtime +7 -delete

echo "Backup completed: website_$DATE.tar.gz"

# Make script executable $ chmod +x ~/backup-website.sh # Run backup $ ~/backup-website.sh # Schedule with cron (optional) $ crontab -e # Add: 0 2 * * * /home/valente/backup-website.sh

Restoring from Backup

# List available backups $ ls -la ~/my-website-backups/ # Restore from backup $ tar -xzf ~/my-website-backups/website_20241210_143022.tar.gz -C ~/my-website-restored/

Practice Exercises

Exercise 1: File Management Practice

Create a new directory structure
Move files to appropriate locations
Create copies of important files
Remove temporary files
Check and fix permissions

Click for solution

$ mkdir ~/my-website/{assets,backup,temp} $ mv ~/my-website/*.html ~/my-website/backup/ $ cp ~/my-website/backup/*.html ~/my-website/ $ rm -r ~/my-website/temp/ $ chmod -R 755 ~/my-website/

Exercise 2: Content Enhancement

Add images to your website
Update CSS to style images
Create a sitemap.xml file
Add a robots.txt file
Test all pages in browser

Click for solution

$ wget https://example.com/image.jpg -O ~/my-website/assets/image.jpg $ nano ~/my-website/css/style.css # Add image styles $ nano ~/my-website/sitemap.xml $ nano ~/my-website/robots.txt $ curl http://localhost/sitemap.xml $ curl http://localhost/robots.txt

Exercise 3: Backup and Recovery

Create backup script
Run automated backup
Test backup restoration
Set up scheduled backups
Verify backup integrity

Click for solution

$ nano ~/backup-website.sh # Create script as shown $ chmod +x ~/backup-website.sh $ ~/backup-website.sh $ tar -tzf ~/my-website-backups/website_latest.tar.gz -C ~/test-restore/ $ ls ~/test-restore/

What's Next?

Excellent! You've created a complete website with proper file management. Next, we'll put all your skills together in comprehensive project exercises.

Continue to Project Exercises

Key Takeaways

Organize website files in logical directory structure
Use proper file permissions for web content
Implement backup strategies for data protection
Create sitemap and robots files for SEO
Test website functionality thoroughly
Use version control for tracking changes