Let’s put the last two posts into practice and build a personal website in less than 60 minutes using Visual Studio Code. GitHub pages will host your website for free and we can add free SSL using CloudFlare. Sound good? Let’s begin.

Step 1

Create or log into a GitHub account

IMG If you already don’t have a GitHub account, create one by filling in the Sign Up form on https://github.com

Step 2

Create a new repository

IMG Creating a new repository is easy, just click on the + in the top right on the webapge. You can do this from Terminal as well, if interested. Note: If you followed the inctructions in the last post, you shuold have the repository cloned in this directory already. If not, go ahead and create a new directory.

Select a short and memorable repository name like, git-hub-website for example and let’s skip the description for now. Do not create a README just yet and use the MIT, if it makes sense. This is not legal advice. Learn more about repository licenses.

Step 3

git clone the new repository

IMG You are ready to clone the repository you just created. Type:

git clone (paste the [email protected] here)

git clone [email protected]:pybarrios/git-hub-website.git

Check the status

git status

Step 4

create index.html

You can create a new file in Visual Studio Code and name it index.html or you can type this in the terminal:

touch index.html

In this new index.html file, type:

<h1>Hello World!<h1>

Step 5

create css/style.css

You can create a new folder and file as well. This time name it style.css or if you prefer, type this in the terminal:

mkdir css
cd css
touch style.css

Step 6

create js/script.js

This time create and name the file script.js. If you prefer, type this in the terminal:

mkdir js
cd js
touch script.js 

Go to CodePen and copy code

CodePen is a great website and I urge you to look for simple websites so you can copy and paste the code into your website. Find elements that you like and take a look at the code.

If you want to learn moder web development visit Brian Holt’s free course here: Intro to Web Dev v2

Resources Used:


MIT © Jonathan Barrios