Building Your Online Presence

for the January 6th meeting

Why?

You are doing real-world work that helps move our partner Museums forward. This is work that you might wish to reference in the future. Also, keeping an updated accounting of what you are doing helps to cement what you are learning, enables you to return to the work at a later date, and creates a centre of gravity for you on the web as a cultural heritage informatics person.

How?

Maintaining a professional online presence is part of the work in this course. Your devlogs of course can be very personal - you can see how I maintain my own ‘process notes’ over on electricarchaeology.ca, for instance - but they should be part of a larger space that you control and that presents you and your work well.

In recent years, many academics have started using ‘static site generators’ to host their own project and personal websites. These are not database driven (like wordpress.com is - see our very own carleton.ca for an example of what that looks like) but rather ‘flat’ in the sense that everything is loaded once. They are more secure, and they are faster.

In practice, this means that we write our content once and then deploy everywhere we want, whether that is to a website, or a pdf, or a word doc, or whatever. We often write using markdown which is simply a set of conventions for indicating, in a text file, the bits that should be in italics, that should be bolded, that should be a link, that should be a header, and so on. Simple text files are able to be opened by any computer now and into the future, so if you write in text files, your work will always be accessible (I have writing and work trapped on old computers in obsolete formats that I can’t rescue). These text files can then be pushed through a template to turn them into a pdf, a word doc, or a website.

That’s how static site generators work. You write the content, and then the generator takes care of the container. The wrinkle in all of this is that you have to get that container onto the web in order for someone to read it. Here’s what we’re going to do.

• we’re going to use your Github space to hold your content in a repository.
• we’re going to use the Hugo static site generator to format your content using a particular template to create a website that will look like this one
• we’re going to use the Netlify service to watch your repository for content changes, and then push your changes through the templates using Hugo, automatically, and host the results.

What to do

1. Go to github.com and get signed up. Make your username/account name <<your-name>> (eg, if I was John Smith by username would be john-smith and my account would be at github.com/john-smith)
2. Now that you’re logged into Github, click here and hit the green button.
3. It will confirm that you want to connect netlify to github. Say yes.
4. It then has a box that says academic-kickstart and that it will create a repository in that name. Click the green save and deploy button.
5. Gears will grind, things will happen. Eventually the page will say, congrats! You now have a site at silly-word-number.netlify.com. Find the edit button to change the domain name. It is behind the button that says ‘domain settings’ then under ‘custom domains’ there’s a button on the right with three dots … Click that and you can change it to your-name.netlify.com.

Customization

Your avatar image The first element to customize is your own personal biography on your new site. Use a photo or piece of art to be your avatar on the site. Resize it to about 100 pixels wide. Call it ‘avatar.png’. In your browser, go to the admin folder in your repository at academic-kickstart/content/authors/admin

Drag-and-drop your avatar.png file onto the list of files in the folder. The file will upload. Once it’s done uploading, there will be a green ‘commit’ button. Click that - every time you make a change to the files in your repository, you will have to click that green commit button. This makes a ‘snapshot’ of your changes over time. You can leave a little message to yourself about why you made the change. The history of these snapshots is kept so that if worse came to worse, you could always revert your changes to an earlier snapshot, so the little messages help you navigate this.

Now, because Netlify is watching your repository for changes, it will know to rebuild your site and push your changes to the web. Wait a few moments, and then go to your netlify live site at your-name.netlify.com. You should see your image appear on the main site!

Your bio description

To modify the bio description, click on the _index.md file in that admin folder. Github will display the contents of the file. The box across the top of the file contains the metadata describing this user ‘admin’ (who is you). Then there’s a brief paragraph at the bottom. Do you see the pencil icon at the top right of the file? Click on that to edit.

Now an editing window opens. The metadata is set off from the rest of the materials by three dashes:

---
# Display name
name: X Lab

# Username (this should match the folder name)
authors:
- admin

# Is this the primary user of the site?
superuser: true

# Role/position
role:

#then more stuff

---

Shawn Graham is Associate Professor...

In the metadata the use of a # symbol indicates a comment, and the computer will ignore that. Then, there are key:value pairs that describe the metadata. Make sure that the authors username is - admin just as I’ve got it above. Leave the rest of the metadata as it is, for now. Scroll all the way down to the bottom and delete the default bio, inserting whatever you want.

Hit the green commit button.

If all goes well in a moment you can go to your netlify site and refresh the page and you’ll see your changes!

If nothing seems to happen then there’s an error somewhere. Here’s what you do:

Scroll through the log, looking for the line that says Error:. That line will tell you which file broke.

Go check your file; you can always look at someone else’s working repository and compare with yours if you’re trying to understand what went wrong. Here’s mine for the XLab: github.com/shawngraham/chi-lab.

Edit your file, commit the changes, wait a moment for netlify to see the changes and try to build the site. Refresh your live site. If nothing seems to happen, go back and check the logs. Otherwise…

Congratulations! You’ve now got a working online presence. Next week, we’ll add some more content.

One last thing (update Jan 9)

Let’s get rid of that green bar with ‘welcome to the academic kickstart template.’

In your Github repository, go to the academic-kickstart / content / home directory.

Find the file called ‘demo.md’ and click on it.

In the toolbar at the top right of the file, there’s a garbage pail icon:

Click on that, then scroll to the bottom and click the green ‘commit changes’ button.

et voilà.