Land your personal github webpage within 1 h

Outline

Intro(For whom)

1. Setup a repository

2. Find a template or build your own

3. Fill out your contents, show who you are

• Change pictures

• Change texts

Finish

Intro(For whom)

Having a free personal website is a really cool thing. You can expose yourself and promote as well. If you already familiar with Git, then you can do it yourself. If you don't know about what is the Git, still it is easy with a few of command lines. But this post is written for whom has skilled.

1. Setting up the repository

The official document how to set your repository to create a GitHub page.

Github already provides the official step-by-step document. It’s easy to follow, but the Github page usually requires time to load your content. Please wait a couple of hours if you face this page. I think if you see this message you might have the wrong name for your repository. (I did use the wrong name. 😓)

2. Find a template or build your own

Nowadays web development is one important skill. Thanks to many web pages and many front-end developers, there are plenty of examples or boilerplate code to make help you everything easy. One famous site is the Bootstrap, you can find some of the free templates and also paid one too. With the nice look templates, you need to fill out your original content and a little bit of modification. Beware of the license limitation.

When you think you don’t want to be a normal person, then you can build your own stuff. I think this looks fun and cool, but usually, I have a bad design sense. So, I choose a template from the BootStrap. For your information, there are many exemplary websites. You can pick one and customize yourself since you have great web inspection tool by Google.

Exemplary list

Free Bootstrap Themes & Templates

GRAYSCALE page

Among the free templates, I choose the GRAYSCALE because it looks neat and simple. I can put my custom image and people can recognize who I am within a page. You also need to check how your page looks like in mobile since mobile users are getting an increase. It is possible with “Inspect” menu.

3. Fill out your contents

It's time to modify the original text. There is kindness README from the template. Here you need a little bit of knowledge about how the HTML tag works and sometimes you have to modify CSS files.

Change pictures

If you would like to change the pictures, then you have to find the folder named "img" under your repository path. In the GRAYSCALE example, you can find the folder here.

You can also check my trials. One easy way to change the picture is to move your picture to this "img" folder. Then change your pictures name to original one. In this case, you can change your image name to "downloads-bg.jpg". And check your work with opening the "index.html" file. See it's really easy.

Change texts

To modify your text easily, you need to have code editor. I recommend the "Sublime". It's free until you pay. It's pretty when you find your neat theme. I like this because it's lightweight and simple.

Sublime homepage

<tag_name (attribute=value)>TEXT</tag_name>

Every HTML tag looks like the above. You need to only take care of the TEXT part. When you change the TEXT, you can apply your words. If you need an advanced option, then you have to understand the function of tags.

Finish

My GitHub page

I think I need to open my results. I'm still working on the page now. So, it might not look very well. Anyway, if you would like to upgrade your page, then you need to find CSS // HTML resource. Or a better template. Thanks to this template and GitHub, I can land my web page within 1 hour. (Oh, I know a bit of CSS and HTML, so I only need to fill out the page.) And the GitHub page does support your personal domain too. So, If you have your domain such as "your_name.com", then use this. It might boost your page view result according to SEO.

This post might have an incorrect grammar. Please feel free to report this by replying. English is my second language. So, I take care not to make wrong and also try to get better. I used Grammarly for correct some of the errors, but I know this post might have strange sentence or expression. Thank you