Here, I will detail how and why I built this site for those who are interested in building one for themselves.

How?

As a student, using open-source/freeware was a priority. At the time of writing this post (June 24th 2021), I have not paid a single cent for this website, and I am only expecting to pay to renew my domain registration (~20USD/year).

Unless major changes have been made to the services I used, you should be able to create a completely free website by following the steps outlined below.

As always, feel free to reach out if any issues linger.

Note: you don’t need to follow the exact order of the steps, however, this is the order I followed.

Steps:

Setup:

Make a GitHub account:

Having a GitHub account was essential to me because I chose to host my website on GitHub Pages, which is a free hosting service for static sites.
Registering a domain:

Another reason why a GitHub account is essential is that if you sign up to GitHub with a student email address (i.e., the email address provided by your institution), you can register a free .me domain for a year on namecheap.

To access all GitHub student benefits (including the free .me domain registration), click here.

Mentioning the steps for registering a domain is redundant, as they are easy to follow and are outlined by namecheap or any other domain registry service you choose to use.
Access your domain:

If you’ve registered your domain to your GitHub account successfully, then going on your domain should show your GitHub username.
Register for cloudflare:

I found that cloudflare DNS was the most suitable for me. Hence, my next step was to sign up to cloudflare and put my domain on their Free Plan.

To setup the DNS records and add cloudflare’s servers, I followed this guide by namecheap.

Interlude 1:

Now that you’ve registered for all necessary services, the next steps will be downloading and installing software.

To generate this website, I decided to use Jekyll, which is a simple open-source static site generator generally used for blogs and the such.

As mentioned earlier, GitHub Pages host static sites only, therefore, WordPress or other similar services will not be compatible, as they require a server running a script simultaneously (i.e., WordPress sites are dynamic). In addition, Jekyll integrates really well with GitHub Pages.

For the IDE, I’m using WebStorm from JetBrains. (Please refer to step 7)

Download & Installation:

Download Jekyll:

Since Jekyll is a Ruby gem, we must download and install a Ruby gems package manager. If you don’t have the Ruby programming language installed on your computer, you must download it as well.

Frankly, this part required the most troubleshooting when I was creating this site. Hopefully it works right away for you!

To start, open this link and download the recommended installer, which will be clearly highlighted. If you don’t have Ruby preinstalled, make sure the installer you’re downloading comes with a Devkit.

I kept facing an issue where the installer would only install one gem, until I moved the download path and installation path to a folder with no spaces or special characters in its folderpath (e.g., C:\RubyJekyll). Thus, I would recommend downloading and installing in a plain text folder directly in the C drive.

After the download is complete, launch the installer, accept the licence, check “Add Ruby executables to you PATH” and “Associate .rb and .rbw files with this Ruby installation”. After the installation is complete, check “run ‘ridk install’ to install MSYS2 …..”, then click “Finish”.

If Ruby has been installed successfully, a window similar to that shown in the picture below should appear.

Simply type 1, and wait for MSYS2 base installation to finish. After that, install the MSYS2 and MINGW development toolchain by entering 3.

Once complete, launch Command Prompt and proceed to the next step
Install Jekyll:

In cmd, type the following code to make sure Ruby has been successfully installed:
```
  ruby -v
```
If the Ruby version is returned, proceed by typing:
```
  gem -v
```
If a number is returned, proceed by typing:
```
  gem install jekyll bundler
```
Then wait for it to finish installing.

Once the installation is complete, make sure that the number of gems installed is at least 2, as shown in the picture below.
Choose a text editor:

Note: before proceeding, you may need to reboot your computer.

WebStorm is the ideal IDE for me. One of the advantages of using JetBrains software is you can easily apply for an education license from here, just be sure to use your student email, again. Since we are using Jekyll, the IDE will mainly be used for its text editor and syntax checker, integrated terminal, and file organization.

If you decide to use WebStorm, make sure the terminal it’s using is cmd by pressing Ctrl+Alt+S, select tools then terminal, now confirm that the Shell path directs to cmd.exe.

To make sure everything is working run the
```
  jekyll -v
```
Command once again in the IDE’s terminal and confirm that it returns the Jekyll version.
Create a folder for your site and serve:

All that’s left in this part is to create a folder for your site data to be stored in.
```
  jekyll new folder_name
```
A new folder should have been created in C:\Users\current_user\ with a few default files.

Next, change the terminal to the folder’s directory by entering
```
   C:\users\user_name\folder_namer
```
in the terminal.

Finally, you can serve your site by typing
```
  bundle exec jekyll serve
```
Which will start a site on port 4000 of your localhost (i.e., http://127.0.0.1:4000/ should be returned in the terminal), then you can access the default website from any browser.

Note: Before serving your site for the first time, you may need to run
```
  bundle install
```
Also, after serving your site for the first time, you can simply enter
```
  jekyll serve
```
To server any changes you made or otherwise.

Interlude 2:

Now that you’ve generated your static site, the next steps will cover the basics of editing the local site.

Please note that I will not cover text formatting. For its simplicity, I generally use markdown for writing posts. Markdown is a text-to-HTML conversion tool. Basic text formatting with markdown can be found here.

Additionally, I found that markdown is quite beginner-friendly and, in a way, incentivizes users to learn basic HTML since it can easily be used in markdown files, as I will show in step n.

Editing a local site:

Front matter

permalinks, layouts, defaults, etc
Creating posts:
Creating pages:

pages.md files
Changing page structure:

changing
Themes

As for the theme, I chose to stick to the default theme (minima). If you wish to change the theme, you may search for different themes here by typing

jekyll-theme

After clicking on a theme, you can navigate to links, and click on homepage. Scroll down the git repository and find the preview link. Once you find a theme you like, copy its name, which will be similar to

jekyll-theme-[name]

Next, open your Gemfile and add
```
 gem "jekyll-theme-[name]"
```
beneath the minima line. Now you must install the theme by running the
```
 bundle install
```
command in your terminal.

Once the theme is installed, paste your theme’s name in place of minima in your _config.yml file, the theme line should be similar to
```
 theme: jekyll-theme-[name]
```
Finally, run the
```
 bundle exec jekyll serve
```
command in the terminal and your site should be using the new theme so long as you’re using compatible layouts.
General HTML:

Adding objects: pdfs, etc.

Interlude 3:

Moving your site to your public domain:

Create a GitHub repository for your site:
Changing your static site’s URL:
Pushing your site to your GitHub repository:
Applying any new changes:

Conclusion:

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk or you can contact me personally.

Why?

The core reason for why I built this site is I wanted to learn a new skill. However, the reasons listed below were motives as well.

Reasons:

Allows me to easily access my work.
Allows students easy access to my work.
Showcases my work to prospective employers or colleagues.

There are many other reasons, but these are the main ones I considered.

It's my belief that a person who has acquired knowledge has a duty to push forth that knowledge and reduce the barriers of gaining it for others.