Hugo

Hugo projects designed, developed and maintained by me

Ok. Here is a list of websites I created during the past 3 years. I am publishing it over here to show that Hugo is a tool that can be reliably used for various types of web applications.

Christos Christofis Collection
Website for a collection of contemporary art. It features the work of some 80+ artists active in Greece (including a drawing by yours truly). This was the first Hugo project that I developed for a client and it was published in Dec 2016.

Alma Gallery
Website for a contemporary art gallery based in Greece. This project was published in May 2017.

Dimitris Georgakopoulos
Portfolio website (single page application, the entire project is a leaf bundle) for a visual artist (who is also one of the founders of Cheap Art, the oldest independent art platform in Greece). Project was launched in April 2018.

Emmanouil Bitsakis
Portfolio website for a visual artist whose work has been exhibited in various countries like: Cyprus, Italy, Greece, Turkey, UK, USA etc. The website was launched in June 2018.

Svetlin Vassilev
Portfolio website for a children’s book illustrator based in Athens, Greece, whose work has appeared in a number of countries including: Brazil, Bulgaria, Greece, Spain etc. Published in October 2018

One Angel Abroad
Website for an Instagram fashion & travel blogger. This project took about 5 months (lots of trials and errors) and it was launched just last week. This is indeed the most complex Hugo website that I ever developed. The index layout (which was not exactly my choice) is reminiscent of a print magazine and it features a responsive CSS grid. The blogger’s Instagram posts are fetched as JSON data files with the Instaloader client via a bash script.

Note that I haven’t used any frameworks for the above. The CSS is custom made. Typically I use some kind of a reset and then I sort of take it from there.

P.S. When I first became interested in Hugo I planned to redesign my own website. 4 years later it’s about time to do it…

9 Likes

I’m digging the design of One Angel Abroad

1 Like

@onedrawingperday thank you for sharing !

Like @zwbetz, I like the design for One Angel Abroad. And I am now trying a few things with Instaloader so that I can use it to keep my instagram account synced with the posts on the site.

:bowing_man:

1 Like

Oh! Looking forward to poking around in your sites @onedrawingperday; thanks for sharing them. :smile:

1 Like

Cool, i like Emmanouil Bitsakis

Are you using any CMS tools for the clients to use?

1 Like

No I maintain the sites myself.

Lots of great stuff there, you’ve been busy.

1 Like

I took your tip about instaloader and built my own script to turn it into posts :slight_smile:

#!/bin/zsh
## Filename: instagram-posts-from-instaloader.sh
## Config
blog="/Users/brunoamaral/Labs/Digital-Insanity"
instagramdir="instagram"
file=$(basename $1)
dir=$(dirname $1)
imagefinal=${file//'json.xz'/'jpg'}

# Get content
content=`xzcat "$1" | jq '.node.edge_media_to_caption.edges[0].node.text'`

declare -a tags;
tags=$(echo $content | grep -o '#[[:alpha:]|[:alnum:]]*')
jsontags=$(printf '%s' "${tags[@]}" | jq -R . | jq -s .)
jsontags=${jsontags//[$'\t\r\n'|$' ']}
jsontags=${jsontags//'#'/}
date=`cut -d'_' -f 1 <<< "$file"`
time=`cut -d'_' -f 2 <<< "$file"`

export post_image=$imagefinal;
export post_datetime=$(echo $date"T"${time//-/:}"+00:00")
export post_tags=$jsontags
if [[ $content = null ]]; then
  export post_slug
  export post_title=$date
  export post_content=" "
else
  slug=$(echo "$content" |  iconv -c -t ascii//TRANSLIT | sed -E 's/[~\^]+//g' | sed -E 's/[^a-zA-Z0-9]+/-/g' | sed -E 's/^-+\|-+$//g' | sed -E 's/-$//g' | tr A-Z a-z )
  export post_slug=${slug:0:25}
  title=${content:0:50}
  export post_title=${title//'"'}
  export post_content=$content
fi

# echo "title: "$post_title
# echo "slug: "$slug
# echo "content: "$post_content
# echo "image: "$imagefinal
# echo "datetime: "$post_datetime
# echo "tags: "$post_tags

destination="$blog/content/$instagramdir/$date-$time$post_slug/"
if [[ ! -d "$destination"  ]]; then
  hugo new $instagramdir/$date-$time$post_slug/index.md
  cp ${1:r:r}(*.jpg|*.mp4) $destination
else
  echo 'post exists: '$post_title
fi

example archetype for posts in this section:

---
categories:
date: {{ getenv "post_datetime"}}
description:
draft: false
resources:
- src: {{ getenv "post_image" }}
  name: "header"
layout: instagram
options:
  unlisted: false
stories:
subtitle:
title: "{{ getenv "post_title" }}"
tags: {{ getenv "post_tags"}}
---

{{ getenv "post_content" }}

Usage: ./instagram-posts-from-instaloader.sh 2013-12-01_16-20-58_UTC.json.xz

6 Likes

Cool!

So basically with this script you’re turning the Instagram posts into individual blog posts which is awesome!

Thank you so much for sharing! :+1:

yes :slight_smile: And I have added just now the example instagram.md archetype that I am using. It’s also converting hashtags into post tags, without the # sign.

1 Like

Thanks for your sharing~

I am not familiar with Scripts :upside_down_face:, but I feel your use-case could be expanded to fetch/parse any social sites manually, am I right?

@Bin951 each social network would require a different approach. If you want, you can open a new thread, so we don’t get too off-topic on @onedrawingperday’s posts. :slight_smile:

Got your point and thank you for feedback~

1 Like