0
1
00:00:01,020 --> 00:00:09,300
So now that we've completed the HTML section and we have our completed web site but we can only access
1

2
00:00:09,300 --> 00:00:15,630
it locally because when we open up our index.html you can see that we're just opening a local
2

3
00:00:15,630 --> 00:00:16,550
file, right?
3

4
00:00:16,800 --> 00:00:23,880
In this case this file’s inside my Users folder inside my username inside my desktop, but that means
4

5
00:00:24,150 --> 00:00:29,050
nobody else can actually access this web site which makes it a bit pointless, right?
5

6
00:00:29,100 --> 00:00:34,110
The whole point of a web site is so that we can put it on to the Internet and everybody will be able to
6

7
00:00:34,110 --> 00:00:36,670
see our personal site or our CV.
7

8
00:00:36,960 --> 00:00:38,410
So how can we do this?
8

9
00:00:38,430 --> 00:00:43,400
Well in order to do that we need to host our web site somewhere.
9

10
00:00:43,420 --> 00:00:50,090
Now there's a whole bunch of hosting sites such as Go Daddy or Blue Host, but because we're learning
10

11
00:00:50,090 --> 00:00:52,670
at the moment we don't want to have to pay for this.
11

12
00:00:52,730 --> 00:00:58,150
So there's also a free solution that I'm going to show you. By the end of this lesson
12

13
00:00:58,160 --> 00:01:04,370
you’re going to have your personal CV up on the Internet proudly displayed somewhere and you'll be able
13

14
00:01:04,370 --> 00:01:07,060
to share a URL or a link to it
14

15
00:01:07,170 --> 00:01:10,910
so that anybody across the web can be able to access it.
15

16
00:01:11,390 --> 00:01:14,540
But first things first. We’ll need to do a little bit of setup.
16

17
00:01:14,810 --> 00:01:21,350
The service that we're going to use is GitHub, and we're going to talk about GitHub in a lot of detail
17

18
00:01:21,410 --> 00:01:22,770
a little bit later on.
18

19
00:01:22,790 --> 00:01:28,490
It's a really really useful tool that is pretty much essential to a developer's workflow.
19

20
00:01:28,820 --> 00:01:34,620
But for now we're only going to use one of its features which is hosting our web site.
20

21
00:01:34,640 --> 00:01:40,600
So first and foremost if you don't have a GitHub account then you'll need to set up a new one.
21

22
00:01:40,880 --> 00:01:44,610
So I'm just going to set one up while we're at it.
22

23
00:01:44,830 --> 00:01:47,500
And now it’ll ask you to choose a plan.
23

24
00:01:47,500 --> 00:01:52,880
Now we're going to choose the free plan and then we then click Continue.
24

25
00:01:52,900 --> 00:01:59,080
Now I'm going to skip this questionnaire and just click on skip this step. Now once you have signed up to
25

26
00:01:59,080 --> 00:02:06,430
GitHub it's really important that you go ahead and verify your email address so check your emails and
26

27
00:02:06,430 --> 00:02:10,840
see if you have something from GitHub and then click on that verify link.
27

28
00:02:10,840 --> 00:02:15,380
And once you've done that you'll be able to add new repositories to Github.
28

29
00:02:15,580 --> 00:02:19,900
If you head over to the upper right corner and just click on the plus button and then we're going to
29

30
00:02:19,900 --> 00:02:22,700
create a new repository.
30

31
00:02:23,050 --> 00:02:29,230
Now, this repository, I'm just going to call it cv, and this is going to be the name of my project and
31

32
00:02:29,320 --> 00:02:35,560
all that a repository is it's simply just a folder out there on the cloud that's going to store all
32

33
00:02:35,560 --> 00:02:41,980
of your project related files and you'll be able to make changes to the files and update the files and
33

34
00:02:41,980 --> 00:02:45,790
you'll be able to track all of those changes that you've made in the past.
34

35
00:02:45,790 --> 00:02:52,510
So now that we've given our repository a name then we're going to leave the description as empty and
35

36
00:02:52,510 --> 00:02:54,580
then we're going to keep Public selected
36

37
00:02:54,580 --> 00:03:01,510
if you are on the free tier of GitHub, and then down here make sure that you check this box where we initialize
37

38
00:03:01,510 --> 00:03:04,200
this repository with a README.
38

39
00:03:04,420 --> 00:03:08,640
And it's really really important that you do this for the next few steps to work.
39

40
00:03:08,860 --> 00:03:15,970
So now that we've done all that we're going to go ahead and click on Create repository and this will
40

41
00:03:15,970 --> 00:03:21,430
take just a moment and now you should see a page that looks like this which means that your repository 
41

42
00:03:21,430 --> 00:03:27,040
has been created and the only file that's in your repository is just a README file.
42

43
00:03:27,250 --> 00:03:33,270
So what we're going to do is we're going to go ahead and upload our files for our CV web site.
43

44
00:03:33,520 --> 00:03:40,510
So now if you bring up the folder which contains your CV web site, so the place where you see your
44

45
00:03:40,540 --> 00:03:44,890
index.html, your images folder and any other pages you have.
45

46
00:03:44,890 --> 00:03:51,520
You're going to select all of these and you're going to drag it into this box here and that will upload
46

47
00:03:51,520 --> 00:03:54,790
and add all of them to our online repository.
47

48
00:03:55,090 --> 00:04:01,660
Once that's done we're going to give this particular version a name so we'll say that in this version
48

49
00:04:01,690 --> 00:04:11,140
we added initial cv web site files, and then make sure that this part where it says ‘Commit directly
49

50
00:04:11,140 --> 00:04:17,590
to the master branch’ is checked, and then go ahead and click to commit these changes.
50

51
00:04:17,590 --> 00:04:22,110
And that will upload all of those files that we dragged on.
51

52
00:04:22,420 --> 00:04:27,040
And we are now ready to set up or our GitHub page.
52

53
00:04:27,170 --> 00:04:35,250
If you head over to the Settings tab here and if you scroll down on the Settings page, you'll see that
53

54
00:04:35,250 --> 00:04:42,660
there is a section called GitHub Pages, and GitHub Pages is designed to host your personal organization
54

55
00:04:42,720 --> 00:04:46,090
or project pages from a GitHub repository.
55

56
00:04:46,200 --> 00:04:47,970
So we already have the repository.
56

57
00:04:48,060 --> 00:04:50,610
We now have to activate our pages.
57

58
00:04:50,610 --> 00:04:52,140
So it's currently disabled.
58

59
00:04:52,200 --> 00:04:54,090
All we have to do to enable it,
59

60
00:04:54,120 --> 00:04:57,870
we just have to select a source where our files reside.
60

61
00:04:57,870 --> 00:05:00,100
So if you click on this part where it says None,
61

62
00:05:00,270 --> 00:05:06,400
you should change it to where it says master branch and go ahead and click Save.
62

63
00:05:06,930 --> 00:05:13,890
So now GitHub is going to do some behind the scenes stuff and it's going to be publishing towards a place
63

64
00:05:13,890 --> 00:05:21,030
which is going to be your user name.github.io/your project name, so that will be your CV.
64

65
00:05:21,120 --> 00:05:28,890
And you can see this is an https web site, so you'll be able to access the site from anywhere across the world
65

66
00:05:28,950 --> 00:05:31,480
as long as you're connected to the Internet.
66

67
00:05:31,500 --> 00:05:34,360
Now this publishing process takes a little while.
67

68
00:05:34,380 --> 00:05:41,290
So if you refresh this page you'll see that it says your site is published at this address.
68

69
00:05:41,340 --> 00:05:46,470
And if you click on that address you should be able to see your web site show up.
69

70
00:05:46,470 --> 00:05:52,200
Now if at this point what you see instead is a 404, then that just means that you have to be a little
70

71
00:05:52,200 --> 00:05:53,600
bit more patient,
71

72
00:05:53,700 --> 00:05:59,760
the GitHub servers are probably working overtime, and come back in maybe half an hour and check that
72

73
00:05:59,760 --> 00:06:00,820
link again.
73

74
00:06:01,140 --> 00:06:07,340
But once you are done though, then your web site should work exactly as it did locally.
74

75
00:06:07,590 --> 00:06:13,620
But now you can go ahead and share this link with anybody you like across the world and they can access
75

76
00:06:13,620 --> 00:06:20,700
it because it's now hosted on the internet so you can go ahead and go over to angelabauer.github.io/cv
76

77
00:06:20,720 --> 00:06:26,760
and you too will be able to see this web site that I just uploaded and I'm looking
77

78
00:06:26,760 --> 00:06:27,720
at right now.
78

79
00:06:28,020 --> 00:06:35,010
So now it's time for you to go through this process and upload your CV and your web site onto the worldwide 
79

80
00:06:35,010 --> 00:06:35,440
web.
80

81
00:06:35,520 --> 00:06:41,910
And be sure to share a link to your project in the Q&A of this lesson so that we can all admire your
81

82
00:06:41,910 --> 00:06:44,940
hard work and what you have created.
82

83
00:06:45,060 --> 00:06:46,620
That's all for me for this lesson.
83

84
00:06:46,620 --> 00:06:47,760
I'll see you on the next.