23rd Febuary 2024
AIM of today.
- Everyone will have a personal website. LIVE!!
although it might not have much content.
- A living CV.
- Demonstration of your research.
- A way to standout
- Show off some of your coding skills.
A personal website for an academeic acts as a living protfolio of your expereinces qualifiacations, talks you have done, interests you have and a place to keep a list of your publications.
As an example here are a few websites used by this group.
- rhysalfshaw.com
- https://www.philipjcarter.com/
- https://www.sotiriafotopoulou.com/
- https://stellarplanet.org/
- https://www.cosroe.com/
Absolutely not there are some great repositories that can act as a template for you to start with.
simply create a repository call your username.github.io and publish it with a empty index.html file.
Simply find your faviorite template fork the repo and change the name to username.github.io
- https://github.com/academicpages/academicpages.github.io
- https://github.com/imfunniee/gitfolio
- https://liveterm.vercel.app/
- USE browser tools!
- w3schools [Test CSS/JS/HTML live]
- https://www.w3schools.com/js/js_htmldom.asp [DOM tutorials]
Github runs a workflow that takes the files in your repository and creates a website from them. This is done using a tool called Jekyll. Jekyll is a static site generator that's perfect for GitHub Pages sites.
Now lets try to create a website using one of the two methods. If you are using the "Simple" route you can use the following template instructions. And move on to customising the template. With the Markdown files.
If you are using the "Hard" Just start with a blank index.html file. Your repoo will be at username.github.io.
Use this basic code.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- custom URLs? (You must own the domain)
- Customising the template.
- More sofisticated workflows with github actions (https://docs.github.com/en/pages/getting-started-with-github-pages/using-custom-workflows-with-github-pages).
- https://docs.github.com/en/pages for more guidence on how to use github pages.