What is the cheapest and easiest way to create AND maintain a personal academic website?
Another week of personal website debate on Twitter, another set of heavy compilation based suggestions to create and maintain a personal website. So, I decided to take a look at all the recent website builders and provide a set of recommendations. If you do not want to read this in entirety, my suggestions can be summarized below:
This document only talks about the first 4 options.
Montaigne if you want the easiest option ever. (Apple Notes only, you can use icloud Apple Notes)
Notion to Astro, if you want to write in Notion, and are okay setting up github actions once for automatic deployment.
Quarto (how this website is made) if you want heavy LaTeX support and the ability to embed runnable visualizations/code in your document.
Git Based CMS if you want to host the static site elsewhere, but sync the content (editable in wysiwyg) with github.
Google Sites if you are okay with your data not being portable, but want a quick editing experience.
Use Astro with Dark Matter (ping on twitter for access) if you are proficient with writing main page content in HTML (you might get lucky with all .md based tempaltes like this one), but want to write blog posts/collections in markdown. Suggested themes: Astro Paper and Astro Cactus.
editable.website if you want to edit the website easily, but are willing to spend time on the first setup on fly.io.
Use Hugo or Jekyll (for example Paper Mod) if you trust yourself to keep up with the process required to maintain this website.
There are many paid options that do something similar. I can’t recommend them though, because custom domains already cost $10-$25 per year. While an additional $2-$4/mo might be nothing to you, it is an expense that many students do not want to have. If you are okay with paying though, and want something that is easy as the above options, and does the hosting for you, check out blot.im. You can create a website from a bunch of folders hosted anywhere, including drive and dropbox, and works with all kinds of files – including google docs, removing the need for a special visual editor.
Montaigne
I knew about montaigne for around 4 months, but never gave it a serious look. Who wants a website made out of their Apple Notes, with no customization and not much to look at? Oh well, I was wrong!
Example Website
Here is the website I made using montaigne. Man, it works! There is nothing missing in it, that I would need on a personal website! Sure, it does not have comments using giscus as I do, but who really needs that? Yes, the domain is hard to spell, but, the developer very kindly offered a pay what you want pricing for custom domains. Yes, you cannot host it on github, but the content is all in Apple Notes. The day montaigne goes down, you will still have all your content with you and be able to port it elsewhere.
If you want to figure out what the source notes requires or needs, I even made the folder of notes that I use to create the website public (Link).
Supported Content
What all can you do using Apple Notes? Well a ton! You can customize your menu, headers etc. You can use images, videos, embeds, headings that have anchors. Take a look here! Yes, the tags are clickable and filterable! You can do folders. It comes integrated with an RSS feed, quick links to your profiles in the footer, and a QR code to add on your research posters for someone to quick access your personal website. You can also create links to other apple notes using Shortcuts or this MacOS app. From iOS 17 and MacOS 14 onwards, native linking is available inside the app.
tl;dr
Honestly, I cannot recommend this option enough. The domain would cost you a bit (maybe $10/year), if you go the custom domain route, but the ease of updating your website in a second beats any other options.
Notion to Astro
Many of us now write in Notion. Yes, github static pages exist, but they aren’t collaborative, they are a pain to edit, they aren’t visual enough, you cannot talk through comments (no, I do not want to read through issues for a blog post, thank you).
Notion to Astro solves all of that. It gives you a writing environment in Notion, but renders it as a website through Astro. It allows you for ample customization by customizing the astro files and the associated CSS unlike montaigne.
Example Website
The default notion to astro effort is rendering of a collection on the main page. The only problem with that structure is that most of us have an index file that is a list of things we do, and then a blog post. Many academic websites have no blog posts. So, I modified the template to suit the general style of academic websites. You can play around with it here.
There are a few other additions too! I really loved the Astro Cactus theme and the search functionality it provides. So, I used their code for Pagefind and integrated it into the original source code. If you are someone who is okay with editing JS files directly or proficient with Astro, you can find that theme here. Another theme I will suggest for people who want to create in Astro rather than in Hugo/Jekyll is Astro Paper. Astro cactus did not have giscus. And I wanted giscus, because that is what I am using for my current websites, and I’ll explain my workflow in detail in the [#Quarto] section, but if everything aligns, I will happily switch to using this method. So, I integrated giscus based off this repo.
Yes, this is a hacked together repo, because I understand code, but I do not have it in me to figure out how astro works. No, GPT4 did not help much with the understanding part of the equation. Notion to Astro off the shelf also supports google analytics, so that is always a plus.
Supported Content
Notion supports a ton of stuff, and so does the original repo from Otoyo. Here is the original page of supported content. In comparison to montaigne, it supports a ton of extra blocks, just because it is based off Notion (Apple Notes is feature limited, not montaigne’s fault in this case). Specifically, as extras, it supports twitter embeds, link previews and bookmarks, code blocks with syntax highlights, synced blocks, toggles, files, callouts and highlights!
tl;dr
If you are comfortable with github at all, and are okay setting up actions and environment variables (and creating an integration key in Notion), I will suggest this option. It is a one time option, it never needs to be touched again in a code format, it requires no push and pull. And if you are worried about what happens when Notion goes down, you can export your content in .md files and host it elsewhere 5 years later. As I said, this document is meant for pseudo-owning your content and convenience/accessibility. It ain’t meant for “what happens when Notion no longer exists in 10 years, and my exports are not perfect”.
Quarto
Website: Quarto Official Website and Using Quarto for Creating Websites
Demo Website: You are on it!
Demo Source Code: Github Repo
Note: If you are okay with editing your website completely in markdown online, or creating a mirrored local repo and using the visual editor for Quarto in VS Code, then pushing the changes to github, you will do fine with Quarto. You almost always do not need such a complicated website, and it requires a ton of CSS to make it look good (feel free to copy mine), but it works with YAML and that is immensely useful, especially for stuff like papers (example) or experience (example) that you just need to keep adding.
Quarto in general is awesome! It is easy to maintain, easy to deploy etc. You can edit in markdown mode online using github.dev. It has a visual editor if you sync the repo to your local computer. And honestly, that is not bad. It definitely suffers from being markdown based, i.e., if you need to do anything more than write content with basic formatting that CommonMark supports, you end up with class notations being in your .md files. So much for portable files, right?
Example Website
The website you are reading it on, was built using quarto. The good part is, it works with YAML and .ejs files; and if you find a template you like, you can just edit the YAML to generate a listing or a HTML component. This is what has made me stick to quarto over other markdown based website editing options. YAML is immensely useful, especially for stuff like papers (example) or experience (example) that you just need to keep adding or editing. Now, on the other hand, creating the .ejs files and the associated CSS required a ton of work, but if you like what you see on this site, feel free to copy mine.
Quarto is built off bootstrap, so it supports all classes that bootstrap has. That lends itself quite nicely to arranging content, or creating more complex sites, if need be. The comment option here is added through giscus. Quarto off the shelf also supports google analytics, so that is always a plus.
Supported Content
Quarto supports all kinds of content, some through its internal modifications, and some through shortcodes or plugins. Some of the features I really like are footnotes1 that show on hover and expanding table of contents (you can see it in action, if you open this post on desktop). It supports callouts, both in collapsible and expanded state. It supports side margin content, similar to footnotes, that I love to use to add more context. The side margin content automatically gets appended to main content on narrow devices. You can embed social media content using plugins. You can also add a lightbox functionality, especially if you add a lot of diagrams to your post and want them to be clickable and zoomable. You can add font awesome icon in middle of the sentence which looks way better than adding emojis 🌔. Here are the extensions I use for Quarto: Lightbox, Font Awesome, Social Embeds, Collapse Social Embeds and Critic Markup.
1 This is footnote content that shows on hover! I can now speak on tangent without affecting the flow of the paragraph. Remember that the hover concept only works on desktop, but that is fine, who needs to read my tangential thoughts on mobile. The post is long enough in itself.
While Quarto natively supports adding images and videos, you need to add them to a folder, and then insert using the visual editor into your note. You can add using the browse option and it auto adds the file to the images folder, but if you rename the image file name, it does not auto connect and rename the connection in the post, not my idea of fun. You cannot do columns in Quarto in the visual mode. Because of these limitations, I have been writing posts in Notion and then converting them to qmd using n2y (or Notion to YAML). And this is the reason why I would prefer to be able to switch to Notion to Astro, because this convoluted process is no fun!
You can add runnable code cells in Quarto though, and none of the options mentioned here can do that, and if that is something you are looking for, especially for Data Viz people, nothing comes close.
tl;dr
So, why do I not recommend it enough? Shortcodes, or margin content using bootstrap classes is no one’s idea of fun (or maybe it is). And I really do not want to add images first to the folder and then using markdown (or add to the folder and then insert using the visual editor). Quarto also has seriously slow loading times on mobile. But if these things are not a problem for you, and you want something that is capable enough, but still works with markdown, you should use Quarto (you can use my theme or a million others!).
Git Based CMS
Talk about Nuxt Studio
This kind of deployment is called git based CMS. The idea is that people can edit it using git versioning systems or online. There are of course many options that I found: Decap CMS, Cloud Cannon, tina, Contentrain and Crafter. I tested some of these and a few others. For example, siteleaf is something I would not recommend; just because how frustrating it is to get it to run on a https:// server. The two I would recommend are Decap CMS and tina, because they are open source, highly customizable, generous free plans, and provide local as well as cloud installations.
Most git CMS based templates (for example, this portfolio template) only allow you to edit the contents or blog posts in a visual manner or through CMS and at that point, I would suggest you to use Quarto instead. Because what people are mostly editing is the index, and not necessarily the blogpost content. Most academics don’t write blogposts at all and what good is a WYSIWYG solution if you are writing arrays to update your paper listings. This is the only reason Git based CMS is below Quarto in terms of simplicity.
Example Website
Most default templates that are associated with any of these CMS systems, come with the prerequisite of editing not the index content but instead collections (similar to any WYSIWYG editor for Astro). I found a few templates that allow you to edit the front page content too and you can see some setup demos here. tina’s default option is a completely editable website, and I recommend it.
For decap, I found two good options of templates that allowed to edit the base pages as well as the blog posts: Eleventy Starter and Gatsby Starter. There is a Hugo Starter template as well if you really love Hugo.
As always, you can use custom domains with tina or netlify cms to have a better domain name.
tl;dr
If you are looking for something that just works like Wordpress and are okay with a limited range of templates, go ahead and try git based CMS platforms. Some of these are open source, some are proprietary; and some sync the built static site back to github while others don’t. Ideally you want to pick the ones that sync the static site back or at least the content back to github, especially for portability reasons, otherwise, you are better off using just Google Sites.
tl;dr
For most people Montaigne is enough! And this is the option I recommend to most people who do not use git in their day to day life (and have an icloud account). If you are willing to dabble into some git technicalities, go with Notion to Astro. Want a deeply integrated CMS system, especially if you write a lot of blog posts, go with Git Based CMS. If you want some support for callouts, embeds, but are okay with using shortcodes and tend to do more technical writing, go with Quarto. If you are proficient enough in web development to edit HTML, do not care much about losing content if Google Sites goes down or want 100 of well crafted templates that are still hard to edit visually and require commands, check out options 5-8 in Summary of available website building options: sorted from most to least recommended. Use:. If you do not want to write markdown or shortcodes to include a video in your post, stick to Montaigne or Notion to Astro.