I recently migrated my websites from expensive and complicated software and hosting plans to focus more on content creation with the free and simple open source Academic website builder, GitHub, and Netlify.

In this guide, you’ll learn how to create a free website for your online portfolio, resume, or academia using just your web browser. Choose a stunning template and customize anything with the open source Academic website builder - no coding skills needed. Create almost any kind of content including blog posts, online courses, projects, slides, and publications using portable Markdown-formatted text. It’s time to take control of your data!

Get a professional domain name

We’ll be provided with a free URL to access our site. However, whichever tools you decide to use to build your website, you can further personalize your website with your own domain name. I can highly recommend Namecheap for registering your domain, as it provides great value for money whilst providing fast support and being independent of your website solution.

To find a relevant available domain, try a mix of your first and last names or initials, with either a .com or .me ending.

Later in this guide, we’ll integrate our personal domain name with our site.

Why Academic, GitHub, and Netlify?

While there are an enormous amount of website hosting and creation services available, an Academic powered Hugo website using GitHub and Netlify can have significant advantages over other options for an individual:

It’s free . Students will definitely appreciate this! Academic is free and open-source. Public repositories are free on Github. Netlify offer free deployment.

Simple editing . Instead of using HTML to write your content, you can write using popular Markdown-formatted text and LaTeX math expressions.

Write almost any kind of content . Create and manage your biography/CV/Resume, blog, notes, portfolio of projects, online courses, slide decks, publications, talks/events, galleries, Jupyter notebooks, Rmarkdown (via plugin), and much more.

No dependencies . The beauty of Hugo, Academic’s underlying HTML generator, is that it is just a single standard app with no dependencies, so it’s dead simple to maintain a site made with Academic and Hugo. Jekyll and WordPress on the other hand have complex Ruby and PHP dependencies, respectively.

It’s multiplatform . Build your site on the cloud or locally on a Mac, Linux, or Windows computer.

Lightning fast to generate . Hugo builds my site, piecing together all the various parts and converting the Markdown content to HTML in less than a second. Jekyll took significantly longer and occasionally stopped working due to dependencies becoming deprecated or packages requiring to be manually updated.

Lightning fast to access . The inherent advantage of using a static site generator is that each page and asset can immediately be served to the client without any dynamic processing. Coupled with Netlify’s content distribution network, this means that wherever the client is in the world, they can instantly see your website.

Secure TLS (HTTPS) . TLS helps guarantee that the content of your website has not been interfered with. Google recently began ranking secure HTTPS sites above insecure HTTP sites, and HTTP is being deprecated by major web browsers such as Chrome and Firefox. TLS is supported by Github and Netlify - it’s the way forward.

Excellent support . Academic and Hugo have excellent community chat and community support forums respectively, and a team of very active and friendly developers. Whereas Github support is omnipresent on Google and elsewhere like StackExchange.

It’s independent . Github and Netlify are independent from your job, so your site is portable. Whereas if your university affiliation changes, you’ll lose your university account and have to re-create a university hosted website with a new URL.

Solid roadmap . I have heard from a number of colleagues about universities dropping their own website hosting services and replacing them with other services or just not maintaining them adequately. Academic, Github, and Netlify will not be disappearing any time soon.

Professional URLs. Netlify (and GitHub Pages) URLs look professional (for example, your-name.netlify.app or your-name.github.io) and there is also the possibility to use your own personalized domain name if you wish.

Academic/Hugo vs Jekyll

In addition to the above, here are some specific reasons to use Academic/Hugo for your website if you are choosing between Academic/Hugo and Jekyll or considering migrating from Jekyll:

Academic/Hugo can generate a site with 1000 pages in only 0.1 seconds, whereas Jekyll takes several minutes for the same site

Hugo is a standard app, so it has no complex Ruby dependencies to maintain when testing/building the site locally on your computer

Paginations, redirection, and live reload work right out of the box in Academic/Hugo without having to setup plugins

In Academic/Hugo, you can just add draft = true in the front matter of the post to save an unpublished draft, rather than having to move it to another folder

in the front matter of the post to save an unpublished draft, rather than having to move it to another folder Plus Academic has numerous other benefits such as the content is organised in perhaps a more intuitive structure and has multilingual features built-in

Note that this is not an exhaustive list and the benefit-cost(time) ratio will depend on the size of any existing site and your skills and preferences.

Install Academic

Click to create your site now with Github and Netlify 🚀

You’ll be greeted with the welcome screen below.

Click the big Connect To Github button on the welcome screen (or alternatively click the link underneath to connect with Gitlab):

Netlify welcome screen

Login with your Github account (or create a new Github account):

Login with your Github account (or create a new Github account)

Click Save & Deploy to create a repository for your site in Github:

Confirm creation of a repository for your site in Github

Netlify will now generate your new site. Generally this takes around 1 to 5 minutes, but can take longer during busy periods. You’ll see the green “Published” notice appear under Production Deploys once it has completed.

Netlify will now generate your shiny new site

In the very unlikely case the build fails with a red “Failed” notice, click on the notice, and review the log. During exceptionally busy periods the error may read Error scheduling build in which case, wait a minute and then click Retry Deploy > Deploy Site to retry.

The random URL assigned to us by Netlify is quite irrelevant. Let’s customize the URL to something more relevant to our site…

View your domain (URL)

Click Edit site name…

Click edit site name

Enter your name, separating your first and last name with a hyphen ( - ) rather than a space.

Alternatively, enter an organisation name if you’re creating a site for an organisation.

Some creativity may be required to find a subdomain that is freely available. Don’t worry about finding the perfect subdomain as later, we’ll register our own custom domain name and connect it with our site, following on from the Get a professional domain name section earlier in this post.

Click edit site name

Lastly, click Save to update your Netlify subdomain.

Awesome! We can now visit the site at the URL you choose!

We’ll see something similar to the Demo website, but without the demo content.

Now, let’s configure our shiny new site based on our requirements ⭐ ⭐ ⭐

Personalize your site

Login to GitHub and view the academic-kickstart repository which you created in the steps above:

View your site’s Markdown files on Github

Check out the Getting Started guide to learn about the awesome site features and themes which we can utilise to personalize our site.

Let’s click through to the config/_default/ folder as per the guide:

Following this guide, we can click a file within the config/_default/ folder, click the pencil icon in the top right to edit the settings, and scroll to the bottom of the page to click the green Commit changes button to save the file. Optionally, when saving the file, we can add a message for our records, to describe the change.

First, let’s edit config.toml to update our site with a title (such as your name or organisation) and the URL assigned to us by Netlify:

Click the green Commit changes button to save the config.toml file:

Next, let’s edit params.toml to choose a theme and decide which features we’d like to use on our site:

Click the green Commit changes button to save the params.toml file:

Next, let’s setup the admin panel and use it to edit our author profile and begin adding content to our site!

Loading…

Edit content online

To easily edit your site in a rich online editor in your browser,

Login to Netlify and click the site you deployed with Netlify

Go to Settings > Identity , and select Enable Identity service

, and select service Under Registration preferences, select Invite Only

preferences, select Scroll down to Services > Git Gateway, and click Enable Git Gateway

Head over to YOUR_SITE.netlify.app/admin/ to view your content management panel and begin publishing content, replacing YOUR_SITE with the subdomain assigned to you earlier in this guide (or your custom URL, in the form YOUR-URL.com/admin/ )

For support with Netlify CMS admin panel, refer to the Netlify CMS docs and the very active Netlify CMS community.

Note that the preview window in the online editor is limited to rendering basic Markdown and doesn’t accurately represent how your site will be rendered. However, it can be useful for getting started or writing on the go.

For the full experience of seeing exactly what you are editing, check out the next section to edit on your computer.

If you prefer not to use the admin panel, you can optionally delete the admin folder at static/admin/ and set netlify_cms = false under the [cms] section of config/_default/params.toml .

Edit your content on your laptop

Want to edit your content in a beautiful Markdown editor or the RStudio editor on your laptop?

Follow the guide to clone/download your site from your Github repository to your laptop.

I will be covering this in more detail in the upcoming Part 2 of this series 🙌

A practical example

Academic includes an example website, similar to my site, for you to use as a template for your website. You can view the code for this online. My personal website is based on this example site.

Conclusion

Academic is a great way to get a personal or academic website up and running quickly and easily. Static websites, such as Academic, load significantly faster than traditional content management system (CMS) sites whilst being much easier to manage and near impossible to hack. Individuals do not usually need dynamic database-driven content or the advanced features that content management systems offer. With Academic, you can focus your energy on creating great content, using the popular and intuitive Markdown formatting, instead of administering a complex system.

Happy creating! Feel free to tweet the community with your comments or questions!

Disclaimer: I am using some affiliate links within this post, so if you do want to go purchase one of the non-free solutions, clicking a link may pass me off a little commission (without costing you anything extra)!