I decided to build my personal website a week ago and did some research on different options for people who do not have SWE expertise with lots of HTML coding experience. Here are a few options I found be approachable:

Website Options

  • Google site: Free but less customizable.
  • Commercial: easy graphical interface, lots of useful modules and templates, but not free if you want to connect to your own domain, like Wix, or WordPress.
  • GitHub Page: Free and plenty of open source templates, slightly challenging as you need some basic HTML knowledge.

Feel it would be fun to learn something new and more comfortable building new architecture from the base, as you may notice on the website footer, I chose the last.

More Steps

Starting with an existing template is always a shortcut. Github topics provide several clean and concise open-source templates. And you could also find templates from others’ GitHub page if they make theirs public. They also come with detailed README files or articles or even videos to guide you through how to use the template. Follow the instructions, and you are all set!

Tips

Here I will share some issues I have encountered and some tools/websites I find to be useful:

  • To compile and run the website locally, you have to configure your packages correctly. For instance, this template requires installed Ruby and Bundler. For macOS users, you should check your installed Ruby by ruby -v and which ruby in your terminal. Please not use the system Ruby for the following reasons. A version manager helps if you’re juggling multiple projects and can’t update all at once. For a guide that compares version managers and shows the best way to install Ruby, please check this article. Ah Ha, now you are ready to compile your website locally and make changes in files and see its effect in no time! :smiley:
  • Like your website, Atom is a good app to use to manage a project. You could keep tracking all changes you staged and all changes you commit to master before you deploy your changes in GitHub.
  • Markdown and Html are still needed to customize your website more than the template. Here are some useful references if you are new to Markdown or HTML or Markdown Emoji.
  • For HTML, there are special characters reserved in HTML. That is because these are the characters that make up the HTML language. If you use one of these characters in an article, the browser will try to interpret it as HTML. Therefore, you should use the entity name or entity number when you want to output any of these reserved characters.

Domain

You could connect your Github page to your personal domain. The domain I registered is from the Google domain.