Introduction to Jekyll.

Now that I finally got my shiny new website setup, now what?

Well, just like every other human who knows a bit of programming, the initial thought was: I want to post a “Hello World” to by blog!

But simply throwing a post with “Hello World” is just a useless waste of time and effort for my viewers, instead, I want to share with you my journey in building this site, so you know what to do when you want a cool website like this one. Note that this is not a step by step guide, I will try to explain as clear as I can, but there are places where you will need to figure out by yourself. This is more of an documentation of my website building journey.

In this post, I will talk about some preface and preparation, and I will talk about setup in the upcoming post.

Preface

There are many, many ways when it comes to building your own website. The first website I built was a homework assignment using a service called Weebly, which I was not a fan but still honorable to mention. Of course, as an artist, Adobe Portfolio and Art Station are both valid solutions. I still use Art Station today as my portfolio. But soon you’ll want your own website, as any 3rd party providers have their pros and cons, and will never be able to customize to 100%.

I first came up with this idea of wanting my own website when I was still in high school, but at that time I had no programming experience what so ever (I only started to learn programming till I started college). At that time, it was a simple HTML page without any styles, just as simple as websites when internet was first invented in the 1990s. But of course, that is boring as hell.

Then I tried many different methods, the first one was obvious to any sinful human: steal. Yes, I confess that I did tried to scrape other people’s website off and change their text, but of course that is illegal and risky, so soon I turned to another way. I still did not understand anything other than changing texts and adding texts in HTML, so I turned to HTML templates, and found a couple really good freebie templates on Codrops. But that was also not ideal, although I strongly recommend checking out other things on their website.

A couple years later after 4 years of college education, I finally recently came across Jekyll. Jekyll is such a easy way to setup a personal website! You can trust me, because what I made is what you are looking at right now.

What you will need

You will need a couple things to get started.

First, although not immediately needed, in the long run you will eventually need to own a domain (Like this one is hosted under hongjunwu.com), and you can buy yours off any domain provider, I am using GoDaddy but you can really use anything that sells you a domain and allows you to edit DNS.
Second, you will need a Github account, which is free, and we are using their free Github Pages service to host our static website (Thank you Bill Gates for buying Github with your endless amount of money and bless us with such a great hosting service).
Third, you will need Ruby installed on your machine, as well as an editor to edit your files. I am using JetBrain’s Rubymine but you can really use anything like VSCode.
Fourth, you will need a Jekyll template. I am using Atega from jekyllthemes.io but you can use anything you like the most.

Starting with basic

So what is a website, anyway? To be more specific, what exactly is your computer receiving when you view a web page?

Turns out, a web page is simply a file with extension .html, along with fancy extras like css(Style sheets, you can think of it as giving the website its visuals), js scripts(mini programs that run from your explorer), and other things.
This .html file basically contains all the texts and the bare bones of the website, along with links telling the explorer where to find other fancy things mentioned above.
If a file is named as index.html, then your explorer will automatically open this page when you enter a directory.
- This sentence is worded very abstractly, so let me explain. Say in the main folder of a website called dummywebsite.com I have two files, one is called hello.html, and one is called index.html.
- The way to access these two pages is by typing in the address bar (assuming it is a working website), dummywebsite.com/hello.html, and dummywebsite.com/index.html.
- However, when you type dummywebsite.com only, it has the same effect as using dummywebsite.com/index.html.

Well then, how to create a simple webpage file?

The easiest way to just make a really simple webpage is right click on your desktop (Windows) -> New -> Text Document, and name the document index.txt.
Just type something like

<p>Hello World</p>

(The <p></p> is the way you tell HTML this is a line of text) in the txt, save it, and rename the file to index.html.

There you have it! Try open up this file in your web explorer and you should see your text on the webpage.

Do I need to learn HTML and everything about web development to make my website?

No, but more knowledge will certainly make your life easier.

What should I learn now?

One of the most critical thing to learn is Markdown. Basically, it is a dead simple way to tell the computer how to format your writing. You can find all the knowledge in Markdown Guide, but this should get you started.