Guide for making a personal website

Date
Tags
AuthorHenry
💡
This post gives details about how I made my website

Key features of this method:
totally free
almost no coding is needed
get analytics about your personal website, including visiting history etc.
make your website available on Google search

Use GitHub to host your personal web

Click the option to add a README file.

GitHub is fully web based, you can do the rest on GitHub websites, but if you want to make a copy locally, it is also possible. More details can be found here https://pages.github.com/

💡
make sure to choose your GitHub username short and unique

Website content

Use notion to write everything and export as HTML.

Change the .html file that you export from notion to index.html, then the content will be available on yourname.github.io check the deployment in under Actions

Website statistics

Add Google Analytics for website statistic

The download html file may looks like this, … … means the rest of the code don’t copy that into your code.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Hey 👋 I’m Ho Yuen Henry Suen</title><style>
/* cspell:disable-file */
... ...

Now replace the first few line with the following, check your own Google tag code from Google Analytics and place it after <!-- Google tag (gtag.js) -->

<!DOCTYPE html>
<html lang="en-US">
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
	
	<!-- Google tag (gtag.js) -->
	
<title>Hey 👋 I’m Ho Yuen Henry Suen</title>

<style>
/* cspell:disable-file */
... ...

The Google tag code is circled below. This is your unique code don’t copy from other places to track your web.

More details can be found here or just search this in Google. https://ppcexpo.com/blog/where-is-the-google-analytics-code

With everything correctly set up it should be real-time updated like this

Use Google Search Console to make the website available is google search

Extra fun

Make your own notion avatar 👈 and notion full body avatar 👉

The skin color of full body avatar can be changed using the notion avatar pro

https://docs.tangly1024.com/article/vercel-deploy-notion-next

https://utteranc.es/

web guide

https://collegeinfogeek.com/personal-website/

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML