I used Jonathan McGlone's blog post on 'Creating and Hosting a Personal Site on GitHub' for the bare bones of my Github-hosted website. Previously, I've used Wordpress and Squarespace, but the cost of website hosting is high (e.g. $12/month for Squarespace) and honestly not worth the steep price. With Github Pages, it's free, and you just need to pay for a custom domain name. Squarespace Domains is $20/year and easy-to-use (previously Google Domains).
I started with the minimal HTML/CSS code required and didn't choose a fancy template like Bootstrap or HTML5. I liked the process of designing my own website (e.g. choosing fonts) and learning web development basics. Over the years, I've sporadically added various features that I thought looked cool on other people's research websites:
- Favicon: simple custom shortcut/tab icon [link]
- Google Analytics: track website traffic [link]
- Mobile Friendly: increase readability and accessibility of website by adjusting elements based on screen size
- Social Media Icons: SVG vector-based format icons in footer that link to social media
- Twitter Feed: widget to show the latest tweets from my Twitter account [link]
- Sticky Sidebar (
js/sticky_sidebar.js): quickly navigate between sections using the sidebar on select pages [code example] - Scroll to Top Button (
js/scroll_to_top.js): click on a button to automatically scroll back to the top of the page [code example] - Dark Mode (
js/dark_mode.js): toggle between 🌖 light and 🌒 dark mode versions of the website [code example] - Modal Images (
js/modal.js): on click, create a pop-up of a zoomed-in version of an image [code example] - GitHub Analytics (
js/github_analytics.js): plots Javascript charts of GitHub repo analytics data - Google Scholar Analytics (
js/scholar_analytics.js): adds citation counts from Google Scholar for publications