How to Build Your Own Website in 2019 the Easy Way
June 10, 2019
In today’s market, I don’t see why everyone shouldn't have their own website or online presence. The barrier to entry for accomplishing this is as low as it’s ever been, and not doing so can set you back from the crowd.
Whether you are looking for a technical position, looking to market yourself, or looking for a way to stand out and share your knowledge in your area of expertise, an online presence in some sort of manner is going to give you an edge, and the process to do so outlined ahead requires absolutely zero experience.
This post isn’t geared towards people coming from a technical background, specifically, but it will provide a great jumping off point for anyone looking to set up their own online presence while demonstrating some technical skills, and for anyone figuring out where to start in the world of web development.
How a website is created and deployed
Before we put our site online, out to the masses for the whole world to see, we need to make the damn thing. We’ll be doing this on our own computers before it gets out there. For this, we’ll need a code editor to do our work in.
Code Jargon Term # 1: Deployment
Making the system/application available for use (putting the thing you made out there)
While we are working on this precious code, it would be good to make sure we are keeping a back-up for it, just in case something goes wrong. This is called version control, which is BIG topic in itself, but for now we are just using it as a way to store our code online in case our dog eats it from our local computers.
Code Jargon Term #2: Version Control (or Source Control)
the management of changes to documents, computer programs, large web sites, and other collections of information
Once the site is made (and we have it stored in some sort of version control system), we have to deploy it. For this tutorial, we are going to be using GitHub. It’s free, it’s fast and it’s the version control application we’ll be using to store our code, so it’s convenient like that.
Before we get into building your glorious website, we have to pick up a few things.
We mentioned a code editor before, so let’s go get that now. My editor of choice is Visual Studio Code since it has an array of extensions that are going to make our lives a lot easier in the development process. Hit the link, download the appropriate version for your computer and save it wherever you’d like, maybe put it on the desktop for now, we’ll be needing it shortly.
The browser you use for the development stage of your website is ultimately up to you. My personal preference is Google Chrome. Chrome has great developer support and offers an inspector tool which allows us to look at the structure of our site from right in the browser. If you choose to use your preferred browser, just make sure it includes an inspector as well by doing a quick google search.
Back to version control. We’ll be using GitHub, and you’ll find this is generally the preferred option nowadays. GitHub is the site commonly used for storing, sharing and collaborating on code today, and it’s relatively simple to use.
Start by heading over to GitHub and signing up for an account. Once the account is set up, we need to create a repository for our code to live in. Name it whatever you want and choose to set the repository as public if you want other to be able to see your project, and private if you’d prefer to keep it to yourself.
Now that we have GitHub setup, we need to be able to access our repository from our computer. To do this, we need Git. This gets a little confusing, but Git and GitHub are NOT the same thing.
Git is a version control software which enables to manage local versions of code and virtual versions which are stored elsewhere. The elsewhere in this case will be GitHub. GitHub allows us to store our code for personal and public access and lets us use the power of Git to manage it directly from our computer.
So we are going to need Git to manage our code on GitHub, follow the link and download the appropriate version of Git for your computer.
There are a few ways we can use Git from our computers to interact with GitHub. We’ll be doing this from the command line.
The command line is simply an interface which allows us to give instructions to our Computers operating system. It might seem scary at first to use the command line directly, like you’re some sort of black market hacker man from a movie, but I promise, it’s not, at least for the purpose of Git.
If you have some experience with the command line, use whichever application of your choice, I’ll be using Git Bash in this tutorial on my own windows laptop. If you are following along on a Mac, open up the Terminal application and all the steps will be the same. Follow the link and download Git Bash if you are on windows, or look up Terminal in the finder if you are on Mac and proceed with that command line. For us Windows users, let's store it on the desktop again for easy access.
Making the site
Now that we have a GitHub repository setup with our local project, Git installed on our computers with a command line of choice, and a code editor to work in, we can finally start creating our site locally.
Before we dive in let’s take very, very, very brief overview of what goes into a website.
This is the language used to provide a structure or skeleton for a website. Websites at their most basic form are HTML templates.
we are gonna need some of that CSS. We can use this in our HTML files by providing links to CSS style sheets that affect the elements of our site.
There are an infinite amount of ways to go about this next step, but a very common tool for building website interfaces is Bootstrap.
Bootstrap is a library which provides tools to speed up our development process. These tools utilize pre-built CSS and JS code that we can call on to get things built fast. We aren’t going to go through the details of Bootstrap here, or this would be tutorial serious and not a post, but we will make sure to include it in a starter HTML template so you can play around with it afterward.
Setting up the HTML
This also not an extensive HTML tutorial, so we’re going to grab an HTML template from the web to further customize, and plug bootstrap into it, so let’s grab that template.
I'll be using the twenty from HTML5 UP, which has a number of free HTML templates for download. You can pick whichever template you'd prefer, but if you'd like to follow along exactly with the steps ahead, go ahead and click on the link for twenty and hit the download button. The contents should be downloaded in a zip folder. Take the contents of the zip folder, and put it into a new folder on the desktop called "MyWebsite".
Now that we have the template site, we need to access it with our code-editor to be able to customize it to our liking. Start by opening up Visual Studio Code. Navigate to the "File" tab in the top menu bar and click it. There will be a "Open Folder" option, click it and select the folder you saved the template into. You should now see the folder structure of the site on the left side-bar of the code editor.
Now that we have the site loaded up into our code-editor, we will want to demo it to make sure it's working properly. To do this, there is a very handy VS Code extension called Live Server which you can download by following the link. Once the extension is downloaded, you should see a "Go Live" option in the bottom bar of VS Code at the very bottom of the screen. If you see this option, you are good to move on.
VS Code Editor With Live Server Installed.
On the left side bar, double-click the file "index.html", this is the main page of your website, and the one we will want to display. The file should appear in the main view of the text editor. Now, with the file open, click the "Go-Live" button on the bottom bar.
The website should now pop up in your browser window! You are now ready to start customizing it to make it your own! Keep in mind, this site is just visible to you and your computer, it isn't online... yet.
Making It Your Own
We will start by changing out the text in the"title" tag, as well as the "h1" tag of the header. We will comment out a few nav items which we won't be needing.
Changing the title of the site.
Next we will change out the main heading of the site to our desired text, we can do this by editing the tags of the banner section as seen below.
We'll now continue through the code, changing the call to action banner and button to something of our choosing.
Call To Action Section.
Replacing text and icons.
We can even add links to our own social media pages by editing the links in the icons in the footer. We do this by adding an address to the "href" tags of the icons. Navigate to your own twitter account for example, and copy the address of the page to the href tag shown below. There we have it, the twitter logo now links to the twitter page! You can go ahead and change the links of the remaining icons to to your own pages as well. If the social media icon you'd like to display isn't in the default template, go back to font-awesome and find the icon you'd like to put in!
Editing the social media links.
See you in the next one,
Like this post here: