Table of Contents
Creating a stunning photography portfolio is essential for showcasing your work and attracting clients or followers. Using Hugo, a fast static site generator, combined with Lightbox, a popular JavaScript library for image galleries, makes this process efficient and visually appealing. This guide will walk you through the steps to build a professional portfolio using these tools.
Setting Up Your Hugo Site
First, install Hugo on your computer if you haven’t already. You can download it from the official website. Once installed, create a new site by running:
hugo new site my-portfolio
Navigate into your new site directory:
cd my-portfolio
Choose a theme suitable for portfolios, such as “Ananke” or “Cactus.” Install it by editing the config.toml file and adding the theme name, then run:
hugo server
Adding Your Photos
Create a new content page for your portfolio:
hugo new posts/portfolio.md
Edit the Markdown file to include your images. Place your images in the static/images folder, then reference them in your content:
Example:
Integrating Lightbox for Image Viewing
Download the Lightbox library from its official website or CDN. Include the CSS and JS files in your site’s layouts/_default/baseof.html or head partial.
Add the following inside the
section:<link href="https://cdn.jsdelivr.net/npm/lightbox2/dist/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lightbox2/dist/js/lightbox.min.js"></script>
Next, modify your image links in your Markdown content to include Lightbox attributes. For example:
<a href=”images/photo1.jpg” data-lightbox=”portfolio”></a>
Customizing Your Gallery
You can organize your images into a gallery by grouping links with the same data-lightbox attribute. For example:
<a href=”images/photo2.jpg” data-lightbox=”portfolio”></a>
This will allow users to navigate through your images seamlessly within the Lightbox viewer. Customize the appearance with CSS and Lightbox options as needed.
Publishing Your Portfolio
Once your images are in place and Lightbox is configured, build your site with:
hugo
Then, deploy your static files to your web server or hosting platform. Your portfolio will now be live with a sleek gallery experience powered by Hugo and Lightbox.
Conclusion
Using Hugo for static site generation combined with Lightbox for image viewing creates a fast, beautiful, and easy-to-maintain photography portfolio. Experiment with layouts, styles, and gallery organization to best showcase your work. Happy shooting!