Notes for Building a Research Portfolio Website with Git Workshops

Notes

Widely used theme - pros - lots of resources, active community, more likely to be maintained. cons - can look a little generic.

Why use a text editor, rather than microsoft word? MS Word, adds a lot of metadata (AKA crap) to the file. Text editors offer many tools helpful - including highlighting code. It is a different environment, but incredibly useful to know.

GitHub Desktop

• visual view of changes
• must save file before changes appear
• if more than one file is made, must add a custom message to the commit - this is to help your future self

Goals

• focus on the content, not the webdesign* (*unless you enjoy this or are looking for some virtuous procrastination)
• understand basics of web markup & design languages and protocols
• understand the affordances and limitations of static sites (e.g. Jekyll, Hugo) vs Databases (Wordpress)
• feel confident to look for anwers online

Resources

• Tips for using the Acadmic theme, Leslie Myint Great overview of useful customisation options, incuding making use of custom themes and fonts. Tip: Code snippets can be copied directly from the site and then tweaked as you desire.

• 7 Ways You Can Further Customize the Hugo Academic Theme

• Guide to content mangement with Hugo Key information about Hugo, the templating language the site is based on - you can get deep into the weeds here, but lots of powerful functionality can be unlocked.

• Blogdown

• HackMD Great online tool to mock up markdown content if learning how it works. Use side-by-side mode to see how a What you see is what you get WYSIWYG) editor on the left pane, and how this renders on the web on the right. Tip- you can copy and paste the markdown code (from the left pane) right into the body of a blog post, project, publication or other content type in your website

• Mermaid editor for diagrams Online editor to build diagrams. As with HackMD, code used here can be copy and pasted into pages on your site.

• How to work with BibTeX files

Design tools

• ColorZilla

Useful for hexadecimal web colour values by pointing and clicking on any webpage

• Wappalyzer Provides information on what technologies have been used to build existing websites - great if you see a site you like and want to get an insight into how it was developed.

• Visual Studio Code Feature rich, ifree text editor

Tips

• ALT/CMD + TAB to switch between tabs
• Windows - WINDOWS + Arrow key to split windows
• Add site to Quick Access in File Explorer or Finder (Finder > Preferences > Sidebar,)
• Add site title to Git Repository
• Check netlify.com if changes don’t propagate. Look for red error messages to see where the mistake is.
• Use inspect or view page source to see how your, or other webistes, are constructed.
• Copy and paste code snippets (e.g. css values)
• save images directly to local folders used for website. Right-click save image as, overwrite (click on existing file, e.g. featured.png), simplify name, take note of file type (jpg, png). Make sure it is compatible. file conversion tools available.