Use Hugo to generate static website and host on Netlify is super fast. No coding is required. You can even learn version control with GitKraken with GUI at the same time.

Transcript:

In this tutorial, I am going to show you how to build your personal website in 10 minutes.

We are going to use github to host the source code and netlify to automatically build and deploy your website.

Warning. No terminal command and programming language required.

Before we started, there is a slide coming with this video, you can pause and scan this QR code or click the link in the description below. The slide can be access in the browser. Just navigate by the arrows at the bottom right corner or swipe on your mobile device.

We are going to use Github and GitKraken. Make sure you have a Github account. GitKraken is an awesome git graphic user interface. Click my referral link in the slide or the description below to win a $100 Amazon Gift Card. GitKraken can not only visualize the development process but also aid your project management with board and timeline tools. Give it a try!

Alright let’s go!

HUGO is the framework we are going to use to build website. It is lightening fast. There is a big community developing beautiful themes. We are going to use the theme called Hightlights. Here is the Demo website. It is a decent responsive landing page. The download button lead us to the github page.

Click the Fork button on the upper right corner. Then you can modify this theme into your own version.

Let’s open the GitKraken. Click the Clone a repo. You have two ways to clone the repo. The first one is pasting the URL of the repo in the first tab. The second one is simply select the repo from your account in the second tab.

Next, we are going to add the Netlify.toml at the root directory of the repo. Press “Cmd + P” to open the fuzzy search bar in GitKraken. Type “Create File” and select it. Then type in the file name “netlify.toml”, enter. Now we entered the built-in editor of GitKraken. Go to the slide and copy the content and paste them to the file.

Stage the file. Write your commit message. The summary is required, while the description is optional. Click the Commit changes or use the shortcut “Cmd + Enter”. Click the Push bottom. If you go to the repo in the browser, you can see the commit has already been pushed.

Let’s go to the netlify.com. Log in with your github account. Click the “New site from Git” bottom. Select the repo and make sure the build command is correct as shown on the slide. While the site deploy is still in progress, let’s set up the domain. Click the “Domain settings" bottom. Click “Options” -> “Edit site name” and input a suitable word that you wish to represent your website.

Alright, the deployment is finished. Now you have this website identicle to the demo but actually belong to you. It' time to customize the content.

To open the local repo on your computer, open the fuzzy search bar by “Cmd + P”. Select “Open in file manager” and open the “config.toml” in the “exampleSite” directory. You can also edit the file in the GitKraken editor by typing “Edit file” and search the file name in the fuzzy search bar. However it do not support code highlight for the file so we are going to edit the file in Atom editor. You can put the editor and webpage side by side so that it would be easier to figure out what should be changed in the configure file.

First, change the baseurl into the one you configured on Netlify. Title is the word that would appear at the tab bar of the browser. Name and description is the meta information of this site, which would often appear with the preview when pasting the url on social media so it is important because it may effect people’s first impression or their willing to click the link.

The email here is not important you can actually skip it. This section correspond to the actual content of the page. Let’s change the title to the name we want to be found on the internet. A silly or fancy quote as description.

For the next block, I am going to paste a brief bio here.

Something noteworthy is that for this responsive theme, the background images only appear in the narrow mode. If you want to change the background image, just modify the images stored in the static/images from the root directory. And make sure the file names correspond with the configuration.

For the third block, we are having some icons to convey the concepts. Just go to fontawesome.com to search for suitable icons.

For the forth block, we can provide more information about yourself. I am going to put some project website and my affiliate links here for now.

For the contact block, we are going to skip it because it requires additional setup which is not in the scope of this tutorial. However, if you are interested, leave a comment below to let me know.

And the footer, just fill in your social media handles and check the copyright information.

Alright, I think we finished. Go back to GitKraken. Click on the file and you can stage each change separatedly. Let us stage all changes, input the Commit Message and push. Voila! Now you have a simple website to demonstrate yourself to the world. Hope you enjoy it!

Feel free to click the link in the slide and connect with me. If you really like links be sure to check out my affiliate links and get tons of goodies.

How do you feel? Do you think it is a legit workflow to create your website? or do you prefer using wix? Do you like the GUI of GitKraken? or do you prefer typing the command in the terminal? Leave a comment below to let me know. See you next time.