Making Personal Websites with HTML Templates

Author

Alexandra A Phillips

Published

July 7, 2022

0️⃣ Introduction

Why make a personal website? A website is an important component of your personal, scientific brand. A good website is also a powerful tool, helping you:

📨 | Share resources with the scientific community
💻 | Attract students or collaborators for projects
📊 | Promote your work to the general public

Important

Throughout your career, you will be internet searched for by students, colleagues, and coworkers- what do you want them to find when they look you up?

How do you get started? There are so many ways to build a website! You can use paid services like Squarespace or Wix (which are beautiful, fast, and mobile-friendly, but expensive) or free services like R Blogdown or Quarto (which are easy and familiar, but lack design customization and aesthetics). Here, I cover an intermediate option that borrows the best of these approaches: creating a beautiful, tweak-able professional website for a low cost. 🥳

Note

The total cost of a website using these steps is approximately $12-20 a year

Do I need to know how to code? The short answer is no! That’s the ✨ magic ✨ of templates. Most of it is filling things in. That being said, it does help to know some very basic commands for navigating HTML, CSS, and Bash. The more you tweak your template, the more coding you will have to do. If you aren’t interested in that adventure, try to find a template that needs minimal adjusting for your needs.

How long will it take? I’ve broken down the process into eight steps. My personal website took me about two weeks to make over many few hour sessions, but it was fairly complicated and had many components. The simpler your website is, the faster it will be to build! Also, the more you have a mental map of what you want your website to look like, the easier it will be to execute. Let’s get started! 👩‍💻

1️⃣ Domain Name

Why buy a domain? Domain names are an important investment in your scientific and personal brand. I recommend using Google domains. This is the only place you have to spend money for this entire process. Domains are typically only $12-20 per year. A few tips:

🖥️ | Include your full name as it is published on papers
🔑 | Keep it as short it possible while being unique
💬 | Aim for a .com, .net, .org, or .co ending
💰 | Consider investing in other extensions to protect your brand

Danger

Do not let your domain name expire! There is an annoying economic market for buying lapsed domains and re-selling them to people at a higher price.

2️⃣ Github Connection

Why Github? We will use github because it allows great version control, allows you to access and edit your site across computers, and it interfaces well with Netlify (which will be hosting the site). This process to connect your computer and Github is a bit onerous, but you luckily only have to do it once per computer. Below, I’ve compiled the steps for mac users, but windows and linux systems may have different steps. 🧐

Note

If you have already set up a connection between Github and R Studio you still have to do these steps!

🌟 Step by Step 🌟

In your search bar, type terminal to launch a new session. Here’s where those bash basics on folder navigation may help!
Type git --version. If it’s installed you should see a version number. If not, go ahead and follow the prompts to install.
Next, type git config --global user.name "your github username here" and then the same for email: git config --global user.email "your github email here"
You can check to see if those were all entered correctly with git config --global --list
Next, generate an SSH key with ssh-keygen -t ed25519 -C "your github email address here" and press enter once when it asks for location and twice when it asks for a pass phrase
Then, add the key to your computer using eval "$(ssh-agent -s)"
Next, create a file using touch ~/.ssh/config and then open the empty file with open ~/.ssh/config
In the empty file, add in the following: Host * and then a paragraph break, AddKeystoAgent yes, another paragraph break, IdentityFile ~/.ssh/id_ed25519
Add this to your keychain with ssh-add -K ~/.ssh/id_ed25519
Now we need to add the SSH key to Github. First, copy the SSH public key to your clipboard with pbcopy < ~/.ssh/id_ed25519.pub
On Github, go to your settings, then SSH and GPG keys, then click new SSH key
Add a title like Work Computer and paste your copied key there
Next, go back to Github and create a new repository called something Personal Website and copy the SSH key for that empty repository
Back on your terminal navigate to your desktop by typing cd ~/Desktop
Then enter git clone "Personal Website repository SSH key pasted here" which will copy your empty folder onto your Desktop computer

🤩 Success! You now have an empty folder on your desktop that is ready for you to edit locally and fill with your website. Onward to the fun tasks!

3️⃣ Pick Template

Why use a template? There are so many great HTML/CSS templates in the creative commons (free!) that are modern, adaptive for desktop/mobile, responsive, and customizable. My favorite set is available here. There are dozens of free templates and if you are still itching for more options, the same developer has more here for a one time fee of $19. Some tips for selecting a template:

🎨 | Don’t stress about colors or fonts, focus on the bones and components
🗺️ | Come with a mental map of what your site might include
💻 | One pagers can always be made into multipage sites

Example Websites: Here are a few example websites to show you how you can customize these templates to suit your needs. Just remember that more customizing means more coding (likely in CSS), so try to find as close a match as you can. If you use this tutorial, please send me your site to add to the list!

👩‍🔬 | My personal science website, built from the story template
🏢 | A science business website, built from the hyperspace template
🧬 | A science nonprofit website, built from the (paid) indivisible template

4️⃣ Build Structure

Let’s get building! I know it’s tempting to dive straight into writing specific sections, but first we need to build the scaffolding. Once the foundation is in place, you can start to fill things in. A few tips on layout design:

⏱️ | Think carefully about landing page where people spend the most time
⏬ | Scrolling is more effective than clicking
🖼️ | Include space for media like images or videos
✂️ | Keep it simple and minimize user choices
📬 | Include a contact form and/or links to social media pages

🔨 Step by Step 🔨

Download your chosen template and save it to your empty, cloned repository folder from Github that is on your desktop
Next, we need to download a decent text editor. I like Sublime, which works on Mac, Windows, and Linux.
Locate the index.html file in your template folder and double click it. This should open an internet browser where you can preview the web page locally.
Next, right click on the same index.html file and open it in Sublime. You should see a decent chunk of code.

Tip

I like to keep an extra copy of the unedited index file and rename it template.html in case I ever need to go back to the original version. You can also just keep an extra copy of the entire template folder.
Take a minute to get familiar with the template structure, matching different components from the html file to the web page preview.
Next (if you haven’t already) sketch out the ideal layout of your site on a piece of paper, keeping in mind the elements and general layout of your chosen template.
Going back to your index file, rename all headers from things like section one to more useful titles like about me, copy and paste needed blocks, add needed links between sections, and keep going until you have you have an empty structure for the layout you designed
As you are going, you can always save your index.html file and refresh the local web page preview to see the shape of your site come together

What if I have a one page site I want to make into multiple pages? An easy fix is to make a copy of your main index.html file and rename it - so in my case I made three copies and called them: research.html, outreach.html, and resources.html. Next, open these as separate tabs in the text editor and scaffold them in the same way as above. It helped me to create sub-folders in my images for each of these pages - just be sure to note the paths called for in the html code if you do that. To link to your new pages, just look for href ="#" sections of code and add in href="research.html". 🎉

5️⃣ Fill in Content

Time to get writing! 📝 Now it’s the fun part: filling in your content. Now that you have all your sections ready to go with some weird Latin text filler, go ahead and start adding in all the details to your sections. Depending on how many sections you have to fill in, this could take a little while or a long while so be patient - you don’t need to finish this project all in one day.

Tip

Sublime’s text editor doesn’t have spell check automatically enabled. To enable it go to the tools menu and then press spell check. You can also write your website content in a document and then copy and paste sections in to avoid typos.

What about photos? Glad you asked. Photos are a super important part of websites, triggering emotions, drawing attention, and providing context. Some tips below for media on your site:

📲| Phone images are better than no images! Don’t let lack of fancy photos limit you.
🏷️ | Consider renaming images to useful titles like banner or headshot
🧑‍💻 | Include photos of you! (even if you do computation work)
🌐 | Need background images? Explore my ocean landscapes or the creative commons

Warning

Be careful of image sizes! Big images lead to slow website. Limit small photos to ~250 kb at 2000 pixel width. Large images can be closer to 2500 pixels wide and ~500 kb. Take advantage of free online resizers if needed.

6️⃣ Push Changes

Ready to be done for the day? 😴 Let’s push all of our changes back to github using the terminal again:

Open terminal and navigate to your Desktop by typing cd ~/Desktop
Find your website folder by typing ls to see all the files on your Desktop
You should see something like personalwebsite - navigate there with cd personalwebsite
Within this folder there should be something that ends in .git - you can check with ls -la, which lists all the files and extensions in the current directory
Once you are in the correct folder, you can type git status to see if changes need to be pushed to Github
Then to commit them all type git add . followed by git commit -m "any message here"
Finally push with git push

Voila! Everything is up to date. 🙌 I like to keep the folder on my desktop for easy editing access, but you can feel free to move it or even delete it (you can always pull it from Github later!).

7️⃣ Set up Hosting

Where should I host my website? Right now your website only exists locally, as that index.html file - but we want to share it with the world! For hosting, I prefer to use Netlify because their base plan is ✨ free ✨and they integrate really well with Github. Go ahead and sign up for an account, using your Github log in.

Note

If your website uses a lot of media like high resolution photos or videos, you may need to bump up your Netlify plan or shop around for other hosting platforms. The next tier on Netlify is $228 a year, which is a big jump - and around the same price as Squarespace or Wix.

8️⃣ Launch Website

Ready to share with the world? 🌎 Let’s launch your website! First, on Netlify, create a new site by important your existing project via Github. Select your website’s repository and press deploy site! Next up, we need to connect your domain: head back to Google domains and find DNS settings and then manage custom records. Follow the check DNS configurations that pop up on Netlify. You may need to do this for one or two subdomains, like the www.domain.com and the domain.com. This can take a day or two to finalize.

Tip

You can manage a lot of things under the DNS (domain name system) settings! You can use this to create redirects, like if you want www.domain.com/github to forward to your Github profile, you can set that up here. You can also create subdomains, like if you wanted to launch a photography site you could create www.photo.domain.com for that new website.

9️⃣ Advanced Topics

❤️ | Favicons

You know the icons associated with a website that you see in a tab preview or page bookmark? Having a favicon is a nice touch to elevate your website to looking extra professional. They should be simple, like a miniature logo. If you have a personal logo, you can resize it to 512 x 512 pixels. If you don’t, feel free to browse for a free vector on the noun project and resize it or create a favicon using an emoji. Save your favicon to your images folder and add this line to the head of your index.html file: <link rel="icon" href="images/ap-icon.png">, just be sure to replace ap-icon.png with whatever you have named yours as.

🧡 | Forms

Your html file probably has a form field that you can fill out and modify - but to get it to work with Netlify to send you emails, we need to alter the code a little. Find code that looks like <div class="fields">. Before this, add the following (this tells Netlify that the following text fields and buttons are a form they need to monitor.

Show the code

<form method="post" name="submitmessage" netlify-honeypot="bot-field" action="submission-confirmation.html#contact" netlify>
  <p style="display:none;">
     <label>nothing<input name="bot-field"></label>
  </p>

Now look further down for something like <ul class="actions special"> (with more code in between) </ul> - add </form> after that. Finally, head to Netlify and go to site settings, then forms. Scroll to outgoing notifications and click to set up email notifications. Should be all set - although it’s always good to have a friend test it for you to be sure.

💛 | Search Engine Optimization

Search Engine Optimization (SEO) improves your website’s ranking in search results, which is important for increasing traffic. The basics of SEO include having meta titles and descriptions throughout your page that let search engines know what is on your site. Adding meta descriptions to your index.html file is pretty simple: somewhere between the section of code that starts with <head> and ends with </head> you can add: <meta name="description" content="insert your description here." />. Some tips:

📝 | Keep it short, between 100-160 characters (or it will get truncated)
🔑 | Insert keywords that people may use while searching for you (ex: scientist)
💻 | Check your progress by searching for yourself on an incognito browser

💚 | Changing CSS

Ready to make a more advanced change to the colors or font? Time to dive into the CSS (Cascading Style Sheets) code! HTML is a markup language connected to CSS, which is what specifies how documents are styled and laid out. Going into all of these details of tweaking CSS code is beyond this tutorial, but the more specific the task is, I think the easier it is to find out how to change it. The CSS code lives in the assets folder and you can edit it with the same text editor. You can also look through a tutorial or book on CSS to learn more.

💙 | Clean URLS

If you forced a one pager website to become multiple pages, you will probably end up with annoying endings like domain.com/research.html. To clean that up to be just domain.com/research, you can go to Netlify and find your site settings, then build and deploy. Scroll to processing, then asset optimization, and then edit settings. Click enable and make sure the check box is clicked for pretty URLs. Done!

💜 | Anything else?

If you have any other questions, feedback on this guide, or just want to share your site with me, feel free to get in touch!

💌 | phillips.alexandra.a@gmail.com

🐦 | @alexploring