Chapter 3 Clone Template & Start Customizing



Chapter introduction image
Image credit: Pexels



Time to get your actual website! We’ll clone the proven academic template and start customizing it immediately.

3.1 Step 1: Get the Template (5 minutes)

3.1.1 Clone the Academic CV Template

Open your terminal and run:

# Create a websites folder
mkdir ~/websites
cd ~/websites

# Clone the academic template
git clone https://github.com/HugoBlox/theme-academic-cv.git my-academic-site

# Go into your new site
cd my-academic-site

# Remove the original git history
rm -rf .git

# Make it your own repository
git init

3.1.2 Launch Your Site

# Start the development server
hugo server

# Open http://localhost:1313 in your browser

Congratulations! You have a professional academic website running locally.

3.2 Step 2: Add Your Information (10 minutes)

Keep hugo server running and make changes. Your browser will update automatically.

3.2.1 Update Your Profile

Edit content/authors/admin/_index.md in your text editor:

---
title: Dr. Your Name

role: Professor of Computer Science

organizations:
  - name: Your University
    url: "https://your-university.edu/"

bio: My research interests include artificial intelligence, machine learning, and computational biology.

interests:
  - Artificial Intelligence
  - Machine Learning
  - Your Research Area

education:
  courses:
    - course: PhD in Computer Science
      institution: Your University
      year: 2015
    - course: MS in Computer Science
      institution: Another University
      year: 2010

social:
  - icon: envelope
    icon_pack: fas
    link: 'mailto:you@university.edu'
  - icon: twitter
    icon_pack: fab
    link: https://twitter.com/yourusername
  - icon: google-scholar
    icon_pack: ai
    link: https://scholar.google.com/citations?user=YOUR-ID
  - icon: github
    icon_pack: fab
    link: https://github.com/yourusername
  - icon: orcid
    icon_pack: fab
    link: https://orcid.org/0000-0000-0000-0000

highlight_name: true
---

Write a brief bio about yourself here. This appears on your homepage.

Your research focus, current position, and key achievements. Keep it concise but informative.

Save the file → Check your browser → See instant changes!

3.2.2 Add Your Photo

  1. Save your professional headshot as content/authors/admin/avatar.jpg
  2. Recommended: 500x500 pixels, under 1MB
  3. Refresh browser to see your photo

3.2.3 Update Site Settings

Edit config/_default/config.yaml:

title: 'Dr. Your Name - Academic Website'
baseURL: 'https://your-name.netlify.app'  # We'll set this up later

3.3 Step 3: Explore and Customize

Your site has these main sections. Explore them by clicking around:

Main Sections:

  • Home: Your bio and highlights
  • Publications: Research papers (example content now)
  • Projects: Research projects
  • Teaching: Course information
  • Contact: Your contact details

3.3.1 Quick Wins

Remove demo content: Delete any example files in:

  • content/publication/ (keep the _index.md file)
  • content/project/ (keep the _index.md file)

Add your CV:

  1. Save your CV as static/uploads/cv.pdf
  2. It’s now available at http://localhost:1313/uploads/cv.pdf

3.3.2 Customize Homepage Widgets

Edit content/_index.md to show/hide sections:

# To hide a section, add: 
demo: false

# To show a section, remove the demo line or set:
demo: true

3.4 Step 4: Essential File Structure

Here’s what you’re working with:

my-academic-site/
├── content/
│   ├── authors/admin/           # Your profile
│   ├── publication/             # Your papers
│   ├── project/                 # Your research
│   └── _index.md               # Homepage layout
├── static/uploads/              # CV, PDFs, files
├── config/_default/             # Site settings
└── hugo.toml                   # Main config

Key principle:

  • Content goes in content/
  • Files (PDFs, images) go in static/
  • Settings go in config/

3.5 Step 5: Keep Experimenting

With hugo server running:

  1. Edit any file → Save → Check browser
  2. Try different settings in your profile
  3. Add content to different sections
  4. Upload files to static/uploads/

3.5.1 Common Workflow:

# Start server (always)
hugo server

# Edit files in your text editor
# Save changes
# Check browser (auto-refreshes)
# Repeat

3.5.2 Stop Server:

Press Ctrl+C in terminal when done.

3.6 What You Have Now

✅ Professional academic website running locally
✅ Your information and photo
✅ Understanding of basic structure
✅ Live preview with instant updates

3.7 Next Steps

Your website looks great locally. Now let’s:

  1. Save your work to GitHub
  2. Deploy it to the internet
  3. Get a custom domain

Keep hugo server running as you work - it’s your best friend for seeing changes instantly!

💡 Pro Tip: The academic template is already perfectly configured. Focus on content, not settings!

🎯 Goal: You now have a working academic website that updates in real-time as you edit!