A Beginner's Guide to Publishing a Personal Website in Node.js | Chris Arnott | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

A Beginner's Guide to Publishing a Personal Website in Node.js

teacher avatar Chris Arnott, Polyglot Programmer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (21m)
    • 1. Course Summary

      0:58
    • 2. Setting up your computer

      2:39
    • 3. Testing a site on your computer

      1:33
    • 4. Web server basics (using express)

      1:35
    • 5. Webpage layout basics (using Bootstrap)

      6:35
    • 6. How to add a new page to your site

      2:04
    • 7. Publishing your site on the web

      2:16
    • 8. Getting your site a domain name

      3:10
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

146

Students

1

Project

About This Class

This class will teach you the basics of building yourself a personal website and publishing it to the internet.

The course covers:

  • How to run your website on your personal computer.
  • The basics of how a web server works.
  • Simple techniques to use bootstrap to make a webpage look nice.
  • How to publish a website onto the internet.
  • How to register a domain name and link it to your personal site.

We will be using Node.js to create and publish the website. If you don't know what that is, you will still be able to follow along with the course, as all the concepts you need to know will be explained as we go along.

If you enjoy this class, please don't forget to follow me!

Meet Your Teacher

Teacher Profile Image

Chris Arnott

Polyglot Programmer

Teacher

Hi, I'm Chris.

I've been developing Software since 2011 on a wide range of projects, from large backend database systems to smaller lightweight websites.

I'm language agnostic but am currently doing lots of work in the functional programming language F#.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Summary: my name's Chris being a software development since 2000. A lot of online courses give you great advice on how to build a really good looking website , but they don't explain the steps you need to take to publish it on the Internet. This course we're going to take some website you can customize and brand to make it personal to you as we go along, we're going to publish it onto the Internet rule of your friends. Family potential clients could see it. Are we discussing the concept come across as we go along, but already help you? If you already know some basic HTML in order to get the most out of this past, it's really important that you follow along with the steps that I'm taking the lessons progress. You'll have a chance at the end of each lesson. Past lives outside so that it's personal to you. So let's get started on your website 2. Setting up your computer: In this first lesson, we're going to be downloading the dependencies you'll need in order to build your personal website. We're going too damn late, Nate Js, which is what will be used to run the site. We're going to download Atom, which is a text editor, and we're going to be using it a lot to edit the files within our project. There are other tech services available, but this is a good one, and it's also free. We're going to download the heroic you command line interface CLI. This is what will use to deploy our sights to the Internet. Once we're finished with it, One of the dependencies of heroic you is get gets a source control software, which isn't what we're going to be using it for. However, if you're planning on doing a lot of development, are definitely recommend learning how to use it. It's it's very useful. What's these fires of down ladies. We can start installing them. We want to make sure that Nate being installed and PM is being installed on also that this is being added to our path. So all of the defaults are fine here. We also need to install atom. We can close that once it's happened, that's now installed. Then Israel Iraqi again with the default so fine. Finally, we want to win. Still, get so all of these defaults Fine. When you get to this page, if you don't know them than it's worth, selecting number is the default editor. Other than that, all of these defaults for UK. What's that? Installations complete. We contest that everything's being installed properly. To do that, we want to right click on open. Get back here that will ever know this. It'll get bashed one day to test that notice or properly. We type no Dash V, which is the note version. Then we could type Hiroko Dash B to show us the version of Hiroki that's being installed. We can also type in get Tash Tash version to see the version of Get that's being installed . Finally, begin typing after mdash fee to see the version of Atom that's been installed. We can open atom by just type in at him, and it will open up this atom window. That's all for this lesson. In the next lesson, we're going to download an example project and get it running locally on our machine 3. Testing a site on your computer: Hello and welcome back to this class on building your own personal website. In today's lesson, we're going to get an example Website running locally on your computer. The first step of this lesson is to go to this website on Get hub. The link is in the notes Belay where we're going to download this example up. We want Teoh, click on clonal down late and then you want to click on Downloads it Once this is done, lated, we're going Teoh, open up visit folder and within to copy these files I'm again to leave them into your folder on your computer. You can put them anyway, is an example on my machine. The next step is to right click in this folder on open Get Bash here in this when they were going to run some commands that going to get the site up and running the 1st 1 to Ronnie's NPM install that will download the dependencies that the site needs. Want stops finished. We can run NPM run start, and that's going to start site running locally on your machine. Once that's complete, we can go to a browser and type in the address bar local host Colon 5000 and that will open up the example app that we downloaded it off. Get up running on your machine. That's all for this lesson. In the next lesson, I'm going to show you the rover, the surfer place in displaying a site in your browser. 4. Web server basics (using express): Hello and welcome back to this class on building your own personal website. In this lesson, we're going to look at the basic structure of the Web server, and we're going to see how express which is the JavaScript framework were using fits into that model. The first thing that happens when you load it. What page in your work browser Is that the possible Send an http request to the website. The next step that happens is known as rooting on. This is where the Web server will decide which page is going to return You. Based on the path that you've typed into your Web browser in a wrap. This role is performed by the index dot Js file, which is here are up has one reason it which says when an A c C P get request comes in for the forward slash page, then we're going to return the pages slash index file. The pages don't index file is this E. J s file and E. J s file is a partial HTML file that defines lots of HTML on also, any includes it needs to the includes can reference other E. J s files which contained more HTML and potentially more includes. Once the server has worked out which partial parts to combine it will combine them into HTML, which is returned to the Web browser in an. Http response on the browser will then display that HTML In this lesson, we've covered the basics of other files in the project. If it together and in the next lesson, we're going to be making the site look nicer using bootstrapped for which is a CSS library . 5. Webpage layout basics (using Bootstrap): Hello and welcome back to this class on publishing your own personal website. In this lesson, we're going to learn a bit more about beats trap on how to improve the lay out of our sight . The main method of using layout and bootstrap is to use the container system so the container system sets up your site in a grid format where the container is represented by the blue outline. There were rows within the container, which resent represented by the green outlines. And then, within each row you specify columns, which are represented by the red box. On this picture, behind the scenes arose splits up into 12 different segments on a column can specify that it's going to take up one or multiple of those segments. Or it could be left up to Bootstrap to determine how many segments column should take up based on the contents that within the column. So we want to start by evening atom on running the site. As usual, you can see the site running hand. What's it's up? Morning. We can close down these windows on. We want to open up the indexed RTGs file, say the first thing we want to do is surround the whole thing in a container divider. We do that more writing def classes, container and then placing that bottom of the file people intent it so we can see what we're doing. Then, within that, we need to define the Rose we want. So the first Ray's gonna contain the header, and we need to close that on the second. The second road is going to contain the paragraph that's below the had A The third rail was getting containable of the links people, the indentation aligned. What's me to find out? Raise? We need to define locals within the rape. So we're gonna have a column here for the image. That's an hour. I don't And we get to have second column for the text, which is the title of the page. So we just around those by the coal cost devoid of object invitation, Right. And then we want columns for paragraph, which is gonna have one column because we're gonna keep it all together, Something to split up there on. We're also gonna have one column for the links, because again, we're just gonna keep all of that together. Now we can have a look at our site. When we refresh it, we'll see that. What's the alignment has changed. One thing we can adjust. Estimate the head of slot looks slightly better by aligning some of the text in the images . So we're going to put the image in a coal auto divider. We're going to put the text in a Cold War to divider. Mostly that that makes the column slightly more aligned on. The other thing we can do is we can wrap the rave a line item center doing that uncles heading to be aligned to the center of the room. So that's what we're going to do on the index partial file on the other file. We're going to add it now to put into containers. It's going to either links partial file. So the links, don't you Js file? We're going to be very similar stuff with this fall, so we're gonna rock the whole thing, it in the container, and then our aim will be to remove theon ordered list, which were replacing with the container, and then for each list item, we're going to have a different ray on them against put the image in the column, and we're going to put the link in a column. I'm gonna fast forward a bit here so that you can see what the final product looks like. Of all of done here is put each image in a column on each link in the second column on your notice at the end for the skill share link. There isn't an image, so I just put an empty column there. Let's see how that looks. Say the columns are very well spread out. Say we can fix that quite easily by adjusting each of the columns for the image to be called one which says, I want 1/12 of the space that you've got for the whole right. And then we're gonna put cold water for the links, which says, Take up the rest of the space that you're not taking up with the image for the link. We're gonna do that for the skill share one of the end as well, so that the images and the links will line up here they are lining up properly. The final thing. We're going to be looking at the menu bar. So back in atom, we're getting justified container to make sure that this lines up with the rest of our content and then within the container, we're going to define enough Kloss and it's going to have plus naff bar, enough bar light, enough bar expand LG within that math bar, we're going to have a link, which is going to be a cross which is gonna have to cross, not Bob Bryant. And it's gonna have on a trip to your hash, which just means move on this page. You actually gato a new page. I'm gonna say menu. Then we're going to have a divider as well, which is going to be cost, not ball enough. And then within that, we're going to have another link, which is going to be a It's gonna have class now, item on a naff link, and that's going to have on a trip. Teoh, forward slash and that's just gonna link to your home. We're gonna close that little tyke closer divider and then placed enough part the end as well. That's what we need for our many on if we refresh this page now, we'll see. We've got this nice menu at the top. You can click on those links. That's all for this lesson and in the next lesson we're going to be adding a second page to our website. 6. How to add a new page to your site: Hello and welcome back to this class on building your own personal website. In the last lesson, we learned some basic bootstrap for on in this lesson. We're going to add a second page to our website, so we're going to start to be normally do by right, clicking on doing open. Get Basheer, begin to open. Atom, we're going to do NPM Ron start and we can see our website running here. We left it to add a new page to our site. There are three things we're going to need to do. We're going to need to add a new partial file. We're going to need to update the index dot Js roots toe have a link to it on. We're going to need to update the menu. Don t. J s while toe have a link to a new page. So first thing we do is we copy the index dot Js file on and we're going to rename it to be called second RPGs to represent our second page. Then we can start editing this. We can delete the links at the bottom. I'm gonna update the text so that we could tell us the second page. Bring it on the second paragraph so you can put whatever content you want in here and they will show up on your site. The second thing we're going to need to do is update the index dot Js file. We're going to copy this line. We're going to say we want to load the pages slash second file when the user asks to get the second page. As we've updated, the roots is also important that we stop note and started again. So we're going to press control, see on then run, NPM run! Start a second time. Now we can have a look at our second page by typing such second in the bar on its load Our second page. The final thing to remember to do is to update many Barto have on you page in it. To do that, we're going to update the Menudo dgs file. I'm going to add a new link. That's a second page and we're going to link it to the second page Now we can save that. We load Our site will see that all of the pages now contain the second page in the many, That's all for this lesson where we've learned how to add a new page to your website and the next lesson we're going to deploy the site to Hiroki, which means you'll be able to view it live on the Internet. 7. Publishing your site on the web: Hello and welcome back to this class on building your own personal website. In the previous lesson, we saw how to add new pages to the site, and in this lesson, we're going to see how to deploy our site onto the Internet. The first thing you're going to need to do is to go to sign upto Roku dot com and sign up for a free account. I've already done this, so I'm not going to go through the steps in this video. Once we've done that, we can open up trust. You get Bash. There are three things we need to do to set up our website. The first is to do get in it. The second is to do heroic log in, then lock in using the email, the passwords that you just created on her dot com. Once it says, Look, did you compress control? See Teoh get back to the prompting Click Yes, to say you want to terminate it Final thing to run ISF Roku Create That will create the app from the Internet for you. Those three steps and you need to be wrong. Once on the following steps, need to be run every time you want to make a change to your website, they're to get commands to make sure that all of your changes get pressure on to the website, get stage all and then get commit. Dash M with the message, you can put whatever message you like. Once that's done, we type get Push, Roku Master, and that will push all of our files onto a rookie so that they're on the website. We can see it running through that here. Once that's done, we can copy the Web address and paste it into our browser on. We'll see that it loads our personal site. Finally, if you want to remedial site again, you can type Riku. That's destroy, and it will ask you toe, enter the name of your site, which you can do, and that will remove the site from the Internet again if you haven't made many changes. Teoh Example site Recommending at this stage in this lesson, we've seen how to deploy the site to the Internet, and in the next lesson, we're going to configure a personal domain toe link to the website 8. Getting your site a domain name: Hello and welcome back to this class in publishing your impersonal website. Last time we learned how to deploy all site to break in and get on the Internet this time again to register a domain which will forward to that site. This lesson will cost you money so you can skip it if you don't Monte. But if you're adjusted in registering your in two main, then you should follow these instructions. The first thing we're going to do is go to dot com dot com and search for the domain we want. So the one on one registration will only give us this price if we signed up for two years. So we're going to get with Go Daddy, what's wrong? The good Idea website. We're going to search for our domain again. That will show us eruptions, and we checked that it's the right side. We added to our cart. We said act one year because that's how long we want it for. You can potentially get more savings if you sign up for two years. We also need to create an account on follow through the registration and the payment process, which I'm not going to say. But once he followed through the section on this page, you gave actor manage my domains. I'm just see your domain there. In order to register a domain on Hiroki will also need to verify your account. So go to Roku dot com slash verify. Can you going to need to type in your credit card information? Once that's done, we can open. Get back here. Make sure we've got a site on her raking so heroic could create. Get push Baroque you master, we'll push our sites on the Internet. Once that's done, we want to do her okay, domains at and type in Are you two main? Once that's complete, we type in Hiroki domains and it shows us the DNS target. We're going to need to give to go out, eat a foreword to our sites Now back on Go Daddy, We click on the settings Cog on the top right of the domain. Click manage DLS, then undersea name Www. We want to point change the act to the address that heroic you just gave us. Click safe Sometime later, it can take up to about an hour. When you go to your domain, you'll see that your website is running there and that's it. Now you have your own personal websites published on the Internet. I'm really keen to see all of the personal sites that you guys create. So if you want to you in the project section, you can put a link to your your own so that everyone can see them.