Build and Host Your First Website for $0 - A Complete Beginner's Guide | Jingru Zhang | Skillshare

Playback Speed


1.0x


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

Build and Host Your First Website for $0 - A Complete Beginner's Guide

teacher avatar Jingru Zhang, Web Developer

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

    • 1.

      Introduction

      0:54

    • 2.

      A preview of what we'll build

      0:12

    • 3.

      Is this course right for you?

      2:02

    • 4.

      Installation

      3:50

    • 5.

      Check in & where to get help

      1:03

    • 6.

      GitHub Pages setup

      5:49

    • 7.

      Go live in one line

      2:21

    • 8.

      Get up and running in seconds with Jekyll themes

      4:13

    • 9.

      Power of themes

      5:49

    • 10.

      What've we learned so far?

      1:34

    • 11.

      Personalize your site

      3:19

    • 12.

      Publish your changes

      1:53

    • 13.

      Project mode: planning

      2:49

    • 14.

      Project mode: choosing a theme

      3:49

    • 15.

      Project mode: file structure and functions

      2:04

    • 16.

      Project mode: customizing your site (Part I)

      3:26

    • 17.

      Project mode: customizing your site (Part II)

      3:24

    • 18.

      Project mode: drafting and scheduling posts

      1:08

    • 19.

      Project mode: publish and wrap up

      1:37

    • 20.

      Conclusion and thank you

      0:37

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

335

Students

1

Projects

About This Class

Are you a freelancer/artist who is looking for an effective and no-cost solution to build yourself a website for showcasing who you are and what you do?

This course is perfect for freelancers/designers/artists who have a strong online brand presence on social media and other online communities and would like to bring all digital assets together, and it’s also great for anyone who doesn’t know much(or anything) about coding but doesn’t want to pay $$$ to build/host a simple website for themselves.

No prior coding experience is required to take this course.

Now start creating your digital “name card” with me! You'll learn how to build a responsive website in no time. 

Meet Your Teacher

Teacher Profile Image

Jingru Zhang

Web Developer

Teacher

Hello, I'm Jingru. I am a web developer who designs and constructs applications from scratch to launch.

I am currently freelancing, splitting my time living in Portland, Shenzhen, and traveling. My coding journey began in my last year in college. I learn with a beginner's mind, and teaching is my way of sharing what I’ve learned.

See full profile

Level: Beginner

Class Ratings

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

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. Introduction: Hi, everybody. Welcome to my first Scotia course. Continue. I'm a full stack web developer. In this course, I would teach you how to build and host your first personal website at no cost. You have to have any prior coding experience as I will break down the step as details possible. And be sure to follow me on skill shit as I will have awesome content coming out regularly to teach you all about coding before we dive into the course a little bit about myself on Chinese on bilingual. Oh, I don't have a traditional computer science background. My education was actually in journalism and communications. I truly believe coding is a skill that can be built just like how you build your muscles and you learn by building projects. As you go through the course video by video, make sure you're full of the steps and then share your sites with us in the community. And don't hesitate to ask me any questions and I will do my best to respond as soon as possible. Now let's go 2. A preview of what we'll build: 3. Is this course right for you?: All right, now get down to the real business before we dive into the course to help you build and host a first website for free. I would like to make sure that you feel ready and feel like you in the right course. So I list a couple of reasons why I think you should take this course you have e you have a job at hand and it's simple. Your freelancer or your blogger or your entrepreneur. You want to place toe 90 or socially in resume, have services, you want to list him on the website. If your blogger, you won't be ableto host a block with a new website and I can tell you that their tools and simple coding knowledge is which I'm gonna teach you today that would enable you to build all these functions into your web cycle free. And you don't need to pay the developer or third party platforms like weeks or square space to build this'll awesome website you're about to have and because you're building on a very secure platform that a lot of coders no world are using, it's called Kid Hub. You do not want to work you don't need to worry about security problems on, and there's no data basis you have to manage. And you don't have to worry about all the PLA kings that come with WordPress eso. In short, you have a website that would satisfy your very simple knees. And, um, you don't need to take up extra time, and you're already very busy schedule to worry about, you know, databases and security problems and maintenance. And you know all that and you don't need toe. Take out more money monthly to pay a domain or hosting plan or a colder to maintain your website or 30 for third party platform. So if you feel like you're checking all the bullet points, then this course is right for you on this course is built with a person with no prior according experiences in mind. So I will walk you through the environment, set up that's necessary toe for this project to run 4. Installation: select section. We talk about a couple of reasons why this course is right for you. Now, we get that sorted out in this section, I'm gonna walk you through the steps and installation to make sure your computer is up with a game for the project to run on your laptop. This set up process have people have no code experience in mind. So you don't have to worry about, uh, do you have the right tools in your computer? I'm gonna walk you through from the basics. So there are three things you need. You need a text editor. I use supplying tax three. But that is not necessary. There's Adam and visual Code studio. Those are free, and they are great, too. So just choose a text editor of your choice. Just make sure that it's not the text editor in the traditional sense, like you know, Microsoft towards. And those are not for coding. You need it at tax editor. That's strict people coding you need down. You need to Donald desktop up, get up and also signed up with account with Get up. I walk you through the basics here on also attach links for the software to doubt and then also need a terminal terminals where you interact the computer, talk to the computer, get computers to do things for you. I use item, but that's not necessary. If you use a Mac book, terminal app comes with it. So for this project, I'm just gonna, um I'm just gonna use terminal for demonstration purpose. So to find terminal, you go to you go to your application deck, and then you click into other. Um, and here it is Terminal. So this is you coming terminal. This is where you interact with a computer. Now, the piece of software that I use this sublime text sublime Texas attacks editor that that a lot of code issues and then you open you open the file. You basically dragged a sublime taxing to application. I have done it. So after you have installed, Donald did at and also installed that we go on to the next thing, which is called get help. I assume people were taking this course. Doesn't have a profile on give up. This is how you sign up. Um, and not a sign up. You locking. So I have account. I'm just gonna sign in here. But here's this is how it looks like when you want to log in and you have some activities. It's a good thing to have. So I was saying that you should know this. Get up desktop. You go desktop, you go download. You don't have Mac OS or for Windows. So after you down with this, I would probably drive it into application. So it lives on your application. Bach. Right here. You just follow steps. Make sure you locking into your kid, have desktop. And there's there's some provinces settings that I would like you to make sure you have done that. So this one is to make sure that you have the right token toe. Commit onto your kid top. Just make sure that your name and who email us right and also for the event setting, just make sure that you choose the editors of your choice. I used supplying tax, so that's I turned. But in this case, I'm gonna use tribunal so that people can follow me without balloting. Judge Too many extra steps, okay. And all these settings look good on the Save it. So now we have these three things install in our computer. I think it's a perfect time to wrap up this section and then move on to the next section. We're gonna talk about that. Get up page. 5. Check in & where to get help: How do you feel? You just finished all the necessary installation in previous section. You have any questions, so you should go to. Underneath the video, there's several taps. There's one taps that your project and you click into that there is on the right side. ER said. Attached files and I would have files with all the installation links in the pdf. So if you have any questions about all the software's I mentioned earlier, uh, make sure you, Donald, that Andi I have all the things they're so finished. All the installation before you continue and also a little housekeeping about questions. If you have any questions, don't suffer in silence. Posted questions in the community. Tab Iess instructor would check on that. You're comin speculatively and make sure I can ask them as soon as possible. But also, it's a great way for you know, other students in the class toe look at questions and help each other out and also learn from each other. So it's a great place to ask questions in the community 6. GitHub Pages setup: So next we're gonna talk about get up Page. This is a hosting engine that we are going to use for this project because it's free. They also use Jackal that we're gonna talk about later. It's ah T. Make sure it's a block aware website there. Couple of reasons. I already told you why we using this that is cheap is cheap to point that you don't need to spend a dollar. And it's also very lightweight for the kind of test we're gonna do today for, you know, personal website. We are going to build what we call it, get help user site so you could go to pages that get half dot com. This is a very good intro page of a ski. There's two types. There's one that's called uses side, and there's project site, uh, that the difference is really coming down to the girl. You can have multiple projects sites because you have one user name. So you have one. Uh, you're like this and then you can say slash and then repository names, but for use a site that we only have one so going back to my get up page already have one. You use a page in my original get help accounts. And that's why I am going to sign out off the my normal account. And I'm going to sign into a new account that I registered for this class because I want to be able to register A I want to be able to register a user site without disrupting the previous site I have. Great. So this is this is a Brent. This is what it looks like when you have no repository. So essentially another for the use decide to be unique. You need to make sure that your new repository name is your reasoning. If the first part of the repository doesn't exactly match you're using, it won't work. And then we're gonna use get up that stop to set it up and let's start a project. So remember what we write about Get help pages 30 year in order for the kid have used the page to work, we have to make sure that they repository name exactly match your user name off, get hub and then with kids, huh? I o and this how it works. This how get have identified this repository as your get up. Use a page, so make sure you get that right. Otherwise it wouldn't work. If you get that right, you can say create repository. And then because we have that stop after, we're gonna set it up there just like that. Quick, get up desktop. And it tells you, um, this sister, you're out the gate, hoppy, while right there and it's gonna clone to your local environment under document on the folder Culkin job. And there it is. You say gloom. And now you go to your finder. You go on to go under your document. If I get up, There it is. That is your that is your repository claiming to locally there's nothing in there yet away . To check if you have that correctly, is to go into your terminal. So this is stuff human way of doing things. We click icons and we find fathers. This is how we assess consumer of technology, being interacting with the computer. Originally, people who used computer communicate with the computer through what we call the console the terminal, and I'm gonna teach you just enough command lines to get through. So we go into so l s will list every folder, every documents that is under your home route. Repository root folder. Uh, this little thing here, I don't know what it's called. This little symbol here means you are at the root when we clone it. It said it get cloned under document. So we say CD was moved into document and then we said, ls will give us all the folders that we have. So I'm gonna go into hub and see There it is, That's that's our get help repository living in our local environment. I'm going to see the into the file a great tricks to know when you have full the name like this wall you're typing too. A few care you're typing too. A few letters to make sure that you talked to the point that there's no other for learning that share the same beginning. And then you tab and they will also feel for you. So then you are in the repository. Let's make a file called touch um, Index that she and great when we go under the folder and open it with, um sublime Tex great. Looks like I just update it. So there's nothing in index. Ashamed. How yet? Uh, this is a little magic, Uh, just to get you a taste of development right here. Okay. You save it and then you open, try to open it in the browser there. This that's like, the first step that every developer go through. Um, now you did it. You're a developer now. 7. Go live in one line: So we make changes to the the repository locally. And when you go back to get help desk top, you see the change show up in the change locks. You should commit to your branch, you master branch. And here I'm going to stay in. It means initiating the repository, I can say for testing. Um, and I said, commit to Master. And because I have my git, um token set up. That is where I was saying earlier about the preferences here. Make sure you have this step set up, um, so that this step would move on smoothly. So there's three I call the three steps of Get up, you change. And after you make changes, you commit. That is what happened. Right here. You write a summary and some descriptions about About what? What have you changed in this particular commit and then you actually commit. That is the second step. You haven't finished it. So when you go to your get up page now, uh, you were fresh. Does nothing happen? Uh, you committed it locally, but it's not in the crowded. So in order to do that, you need to publish. Great. Now I said is published and you go to your repository and git refreshing. You will see your co showed up two minutes ago. That means get up knows that you make the commit locally two minutes ago. So publishing just means that it's now in the air. So that's great. You have your first get up page, commit the ones that left on the air. I want to show you it's really cool. Remember we talked about the Earl earlier. Now you type that in and hit return. That is your page. It's online. Now it's There's no, there's no hassle. There's no fees. It's online and it's Ah, it's your page with your own, you're out and it's completely under your control. I have a taste of the magic of the get up pages. I'm sure you are so excited toe. Dig in and customize your pages to your liking, and that's what we're going to do in the next session with Jacko 8. Get up and running in seconds with Jekyll themes: Grayson last section. We, uh we got really excited about launching this web site online with just one life, um, at Shimo. And this is not what's courses about. We wanted to build a website that has all the functions we talked about earlier. You know, links to your social media and also maybe a place to block were placed to Mr Services. And how can we do that with very limited knowledge of coding? This is why we're going to, uh, this thesis tool called Jackal. So basically, what ISS is, uh, it's a It's a static site. Uh, generator that, uh, all you need is putting your plane tax, and it will turning to websites and blocks. And there's so many templates out there that will fit. You need that. I will get into a little bit later. So this this whole jackal, it's a ruby Jim. So that means you need to make sure that your computer has will be preinstalled on the way to check. That is very simple and clear. My counsel is by typing Ruby Dobby, and if you get a result like this, this after exact doesn't have to be 2.5 it can be 2.4 or 2.3. If you have a problem with this, you don't have a ruby version coming out When you're typing this, that means you don't have Ruby Princeton. I will put you got a pdf. You can go under your project tab and then be on the underneath the attach files. I will have another Pia. After you have done that, you can come back to the video. And it's time for us to try the magic of Jekyll. So the way you do it, it's very simple. Like this. Quick start instructions. There is really just a few lines. It's a ruby. Jim, You want to make sure that it's installed. Great. You have to, uh, James installed. Now, this is that This is the magic word. Uh, this thing right here. So this part Jekyll New is the command and freelancer is just the name of the project. Fantastic. Right now you have one file right here, freelancer. Yeah. I make sure you see the into three, and now you have a bunch of files that is generated by just one lie off code right here. I'm gonna show you what it looks like and has exercise servers address here. This is the port 4000. We go back here, type local, post 4000 So that zero website, when it looks like if you commit that onto your get help count when you're on Jekyll knew something. This is the default theme that Jackal's gonna install into your project, where it's which is called Minima. There's tons of other themes that I'm gonna get into to make sure you be able to do the things you want to do in your website. This is, you know, just a taste of what Jackal enable you to do and just really just one eye. So celebrate full of my steps and make sure you get this step right next step gonna move on to how to customize how to change these contents, how the, um links to your links instead of the default links catching the next video. But make sure you have this step set up 9. Power of themes: the last section. We managed to generate a site in seconds and just really one lie with Jekyll. I just want to recap a little bit before we move on. Make sure you know the right steps, because in the next couple videos, it's gonna get really in depth into changing the little details meal site. So I want to make sure you get this right. Eso that you are following with us with no problems. So I talked about earlier that because Jackal is a Ruby Jim, so ruby is a language. The way to check it was to check typing in your consul Ruby space Dash B. And then there's a result. If there's a result, like a number like a 2.52 point four, it doesn't have to be exact. But it's nice you have a room be installed, then you good to go. And then, um, we talked about these magic words. There's really full lies you need to get the website up in morning. The 1st 1 is to install the Jackal Jim into your folder, and after you've done that, you generate a project with Jackal. When you won that my age basically generated a folder that it's named with the project name you picked and then make sure you move into the folder member CD despite moving into the folder and after you moving into the photo you're in the project The Jackal Project. Then you run the line the last night Bondo Exactly. Jekyll served. And then it will give you kind of like a You are, but not exactly. And then, after the I'll show you, give me this line. This is serving on local host 4000. You don't need to look for this mine every time because Jacko served by default used Deport 4000. So you go into your browser, you point to local host 4000 and then there's just sites. Let me go back to our consul. The way the accent out of the serving remember the service running on. The way to make it stop is by pressing control and see at the same time, make sure it's if you have a Mac book, it's not command. See its control, See exit after he. Actually, that's the new good toe run. Other commence. So, in the gym file, this is This is how Jackal. This is what he means by Jim based theme. When you create a new website by running this command, you're basically using the default Jim based theme called Minimum. Let's Say the default theme doesn't really fit you need. And how do you go about looking for other themes? Luckily, there's a Web cycle. Ruby Gems that hosted all the gems that is published on the Ruby Gems platform. You go to Ruby Gems, Doc or and then you search for jackal themes. You can see how people download these. That means help up here. That they are also means stronger support for the themes. Um, a bow typographic scene. See what it looks like? Let's try to use this theme for our website, and how do we do that? Let's go back toe movie James dot org's So usually when you go into these Jim Files, they have documentations, and usually when the gym is well managed, that means they have very good documentation. They have a very detail installation guide. We just need to follow step by steps so basically looks like we need to add Ally to specify the gym, and then we need to change the theme to Jekyll's Swiss and then bundle, and that's it. So this is another way of doing it. But for the purpose of understanding Jekyll how used on how each file connect with each other, we're gonna go for this sprout. That is more manual. So let's go back to this. And I like to copy Jim file straight from here because it has exacted version right here. Copy here and then go back to my gym files. I'm going to substitute this line with a new line, and then the next step to do is going to the come pick young file. So this file is probably the single most important file in the whole Jackal folder. This is how you control and make change into a whole block. That's fine theme here and still set to Numa. Remember? We saw on the installation guide They said, change this into sweep for back. Make sure we got it right. Document. And she added slyly to Jekyll side. We already have a theme lie, so we just need to change it. You can ask Jackal, Swiss. We save it. Now we bundle. Great. So if you look carefully here you if I jackal Swiss, it's installed and let's see if it gets affected. Make sure you got this line break. Go back to this page. We fresh enough Has your site is not also isn't that simple? Now you have the same design, Uh, in just a second, just changing two lines. So in this session, we're gonna talk about exactly how you make changes to your site title. All these stuff. If you have any questions, please make sure you share them in the community. 10. What've we learned so far?: so to recap, will have learned so far. We managed to use the default theme to get outside up and running in just one night. And we also know section managed to use a gem that we searched on Ruby Gems Doc Cork and then managed to install it on to a new site. So remember how we we said you go on to be James doc work, and then you search for Jackal? I mean, and then that's all the themes. And we, uh, remember we chose the Swiss scene right here and a copy paste. This one because it has a version number right here. And then I go into their home page and this is what it looks like. We're okay with it. The awesome documentation, mo how we follow this documentation. We change a theme in our gym file right here. And we also in our config, change the theme to Jekyll Swiss, and then we pond do it. Uh, right here to install all these new gym file dependencies so that the the site knows which Jim using which steam using. And then we run this magic line bundle except deco serve to get it online on. Then we point out browser to the 4000 port. And then, though it's funny 11. Personalize your site: now using a theme, but you want to be able to change maybe the color, maybe the title. And how do you do that? Usually I like to go back to the documentation and see if there's specification that that was boat in, that you can change easily, exactly like a lot of white space. You don't like the dark off the default seem. Let's go back to the come pick involved. So this is how you make a lot of changes to personalize your website? The changes I usually done in the beginning, what we're doing right now, set up base and then you're not supposed to touch this vile very often. So that's safe at Go back to a council. Don't go. Jack Cooley, sir. See that? My means it's running. Yeah, we fresh Now you have apply the new seem, uh, onto your site. So let's go back to our directory. I like to change title. Say I changed to answer Looker. This begins. Great. Now I have changed a title and now when I click, these things go to the, um think I put down here can just verify right here It goes to the profile Youling too. Great. So how do I change about this? About MD markdown? So this is just trying. I take that. And remember how we have to stop running and run again with changes in him File. When you make changes in a markdown file in your post, you don't need to do that. Jekyll is smart enough to auto generate these kind of content. So you see, this is up there. So there's a site description. I forgot to change that. Save that. Remember I told you that when you make changes in these files, it would reflect automatically. And when you make change in this file, it won't because I will show you. See, it's not changed. So you have to make sure you stop that run again, then you make it reflect changes to the whole site. And now this is here. So it's looking good. And if you like to make change, suppose, uh, this is very useful. It tells you how to create a file. Make sure the name for this convention. So this year, Dash monster Dash date, Name your name of your post. Welcome to Jackal. The title and then e Eckstine is of the extension, and in this case, it's marked out. So make sure you get that right. Otherwise you wouldn't reflect onto the block. If you don't know anything about Ruby, don't worry about these. But if you are if you do, this is where you can insert is how can insert ruby snippets so great. Look around, make some changes. Can make sure you do a screenshot of what you have got in in your website Share as your project. I will catch you in the next video. 12. Publish your changes: So in the last video, we talk about how you make changes, customized a content on your website, but just want to make sure that you still remember how to push it onto you get up pages. So let's go back to get have desktop. Without doubt, it has a bunch of changes. I'm going to stop this from running, so I'm gonna delete Small for testing. Mm. In the first lesson. And then I was just clean. I am going to commit this. You say use seen, commit to master and then publish. Page is not found. This is because we have we nested everything under Freelancer folder. So we want to move all these files to the root and then delete this tweet answer and then go back. Teoh, get up that stop. And it has all these changes you can say, Move to fruit, commit push and then go back here. Make sure you have that changed. Awesome. You go back toe this and then you have it life. This issue upside live with a theme that you like and with contents and links that is suitable for your project. As I said, make some changes. Make sure it's alive and I'd like to see screenshots or links in the community tab or as a project. I'll make sure to comment on each of your project, so please make sure you share with the community. So all the students for kingdom from each other, I will see you in the next section. 13. Project mode: planning: congratulations. Up to this point, if you follow all the steps and the videos, you are able to generate the Jackal side in just one line using their default thing. Or you also know where to find Jim based themes online, which you have done by following me, using the Swiss Jim in the previous videos. So remember, in the beginning of the class we talked about you go, you wanted to have a website, and this is really why I think this course is worth taking is you're gonna build a project off your and at this point, I think I strongly encourage you. Either start doing your own project by following my videos or start planning what kind of function you would like to have in your website and look for themes online that would fit. You need Building website planning's really half of the job. So for your project a t end of the class, I would like to you to choose a theme at the gym based which we are we're familiar with. And also there's another type that's cool repository hosted and a lot more like open source themes that I repost to be hosted the hostess Jen on Ruby Gems. And in the next couple of videos, I'm going to use one of those to teach you how. If you find one of the themes that its repository hosted, I will teach you how to use those themes in your website. Once you chose the theme and have them install in your project, I want you to personalize the content according to your needs. And then, most importantly, I want you to use the knowledge you have learned so far to launch it so other people can see a website. And really most importantly, we are in the class. This is a community on the learning experience. I'm really excited to see a project. And I promise, if you share your project, I upload a screenshot home page and also a link. Well, simply just don't think too. You get help pages as a project. I would comment provide feedbacks on each project that I received. So are you ready for this? If you're ready, Um, please just use the next couple of videos to help you solidify what you have learned so far . And since I'm going to go more in depth, you might be helpful to clean up some of the questions you might have when you're developing your own websites. And if you don't feel ready, you can use the next couple videos. A za guide to help you get more familiar with the process, and eventually you'll be able to build your own in any situation. I'm excited to build a service side alongside you while you're building your own. This time I will go more in depth and hopefully we'll answer some of the questions in my half when you're building your own website. I see you in the next video. 14. Project mode: choosing a theme: So let's just do a simple Google search on jackal themes and see what come up. So the first result that come up is this Web cycle Jekyll themes, dog or is awesome website that hosted a lot of open source themes, and you should be able to clicking each of thes. Read about the features on also go to their home page, and this one has demo that you can click into play around before you decided that this is right for me. So in the previous videos, we have built a website that it's more like a block. So for the next couple videos, I would like to build a lending page that is for listing services. I think that might be helpful for some of you. So there's a Donald tab hit Donald SE files. Open it and drag it onto your desktop, and you should. If you're not sure that this is this is the right website. You just want to play around. I will recommend you to open a new council here city into this voter and play around. Make some changes before you copy, paste all of these and delete thes drag These in here. But in this case, I really decided that this is the right theme for my project. I'm going to copy days and daily All these this get up page director is come is directly linked with your kid up account. So any changes to make Indus folders will be tracked under get help that stop as you see here. So the first light they're jackal six line which is funded meat that we initiate Jim file to keep track of the gems that you installed this directory domestic. Now you see, there's a new job file. Uhm I'm going to open it in supplying text so you can see better in this ad that one lie at the Jackal Jim into the file and also a bunch of other files that is necessary for the Jackal site to run. And then you say you install you say undo exact jackal, sir. Hiss lines familiar. Okay, let's go to local host 4000 and see if the magic stare fantastic in the next lesson, we are going to change. We're going to personalize this website by changing title linked to social media and also list some surfaces. So I see in the next lesson 15. Project mode: file structure and functions: the last video. We look for a Jackal theme online, and we run that this full lines gym installed Pando Jackal. And we also also initiated Jim five by running. Bundling it. So here we are. We're exact it to personalize this website. Make our home. I would like to go back to the Jackal. Documentation under directory structure to just give you an idea. What would those files? War. We've been using the company in five to change. Ah, site wise data. And we also we also familiar with the Post folder. Several is also generated by the Jackal engine, where this is where you're not supposed to touch, So includes includes pa shows that can be makes the match with your layout on now is basically a template for the scene to wrap. Content is post hatters. So we go back and look around this photo. You can see there is a about section which I believe is corresponding to this part. And there's contact, uh, which is I think it's over here. This role and there's Footer and others in the house basically organized these partials in an order so that your page Hesse has a nice flow off content. Looking at this file, you can't really see. Um you can't really see Twitter get happening thing. So how did this become this? So you see their size social and social title and how? Doesn't know. So remember, we talk about, um, fire earlier. The conviction file. This is basically, like a statewide database where you do your initial set up, and then these data will be reflected into different parts of your site. 16. Project mode: customizing your site (Part I): so the social part was here. Let's try to make some changes here just to test. I would like to add another social media attack because you might have multiple ones. Title. See, I would like to leave this line of credits. Didn't deny spoke on the shoulder of giants people who are contributing, like, in this case, this'll theme so that it takes you no time to launch site. So I'm going to save this in one. Go back to local host for thousands. Fantastic. So love title has been changed. This is kind of ugly, so there's a way to change death. So as long as these two columns and up to 12 you okay didi to from here and at these two here safe and see if it changed Great some of its in one night. And one of the reason why skew share doesn't have Nikon is because they use fund. Awesome, though detour here awesome enable you to fight icons really easy, and our theme has a front for awesome preinstalled. The reason The reason why I can't show up is through this line and let's look for icons and you can search baseball and I'm sure skill shares not. I'm on the vist. So that's why I didn't show up. You like this change to a social media, So then I calm will be It will appear here, gets to come figure and file. We need to exit out and run again. Great. Now it's Instagram and also has an icon. Uh, so I encourage you to do a little research on the phone. Awesome. When you add links, the next step is to change these parts. Great. I like to keep these, but you can delete all of them. Say gods and seafood. It's reflected here. Refreshing local host 4000 Lhasa and its verify the legs it works. 17. Project mode: customizing your site (Part II): Now let's tackle this head. Have developer do it. This will be reflected over here in the tab. And then what's the next thing? It's Heather. Okay, Looks good. Save that. Come back here now. I changed us. Now this change of Mrs Services, that's page content. These are basically nested together as posts. So let's look at these hosts their corresponding to miss of three services. The 1st 1 that say so. Take a look how these markdown files at links. It's different from how we added links in HTML falls. It's a attack with the extra and then you put them in here. And then this is the text that show up in the place of this mink. However, in the markdown, Uh, where you need to do is put in the title that you want to show up in the place of this link in this square bracket and then put the link in in another pair of bracket. So I'm not gonna change the content here. The descriptions here, you can spend some time here. I'm just gonna quickly fix the title. See that? See? Great. Now these new content show up. Let's try to change the image is just one look. OK, to me, this doesn't really fit. So let's go search for Royal Free Images online courses and see what we get. This one was good. So I'm gonna use that. Somebody used this. There's a photo call image. I had a P and G's. So, what? We want change? That's the 2nd 1 instead of Doc PNG that say course like that and then go to find the images you just downloaded. Track it into your file under the image folder Poor's and put it on the surface. So this a J packs will make sure we will reflect that. Okay, I'm sorry. You say that and see if it works. Great. Now it's all working. Let's just test if these links are working, okay? 18. Project mode: drafting and scheduling posts: So let's say you like Teoh. Add a new service and you don't really want to publish yet. So you create a new file and thats copy paste from this you service and a special tag can use. Is this published? You say false and you save it. Remember, you have to follow this convention naming convention otherwise wouldn't work. Okay, now it's here. Refresh this. You won't show up so they won't show up when you say publish balls. Another thing to Schedule Post is to change the date in the name of the files to a future date, and it won't show up until after that date. So that's another way of scheduling posts. 19. Project mode: publish and wrap up: Let's try to push it onto get help account, go to our kidnapped estar. Maybe that's refreshed to get up. I'll see if it reflects the change. Also. Also, I think you have a very professional looking website that has contents. They can manage very easily at this point. We know how to use, get help and get help pages, and we know how to make changes, commit and published changes. And we have walked through the steps to install themes and make changes. I think you're in the really good shape. You know where to look for help. When you feel confused about Jacko, just go into the Jackal document. You also know how to find themes. You can just google jackal themes. There's a jackal theme, dark work, and there's also ruby gender. Or I'm sure that you are fine a theme, difficult, particularly need and most importantly, you have spend valuable time on this course. If you are a freelancer or anyone who's looking to go a personal website, I hope this course has been helpful in launching your first website for free 20. Conclusion and thank you: congratulations. Thank you for your hard work. You just built your first personal website. Now you have the skills and knowledge to maintain it on your You don't have to pay for any hosting plan. You don't have to pay a developer or third party platform to maintain your site. Congratulations. And make sure you share the site with us in the community. As you know, this is my first course. I would love feedback. I'm also curious about what skills you like to learn in the future. What goes you want to achieve? If you like the course, please leave a review. Other people like you will find the course more easily. And I hope to see you in my next course by