the key to future success in the software development economy is to not be a nobody I keep saying this I know but the days of letting your resume speak for you to get you in the door is waning rapidly we're in a different economy now in this video today can help you begin a new chapter in your life if you stick with me here and understand this mindset there's a handful of developers out there that I follow that could get a job at the drop of a hat in fact they probably entertain offers regularly and these are just the ones that I follow there are hundreds probably thousands more I'm sure and the reason is is they have marketed themselves in such a way that they stand out they pop up everywhere let me explain so I get numerous emails per week from people wanting to edit my videos and 90% of them have one major problem they have no Authority they're emailing me from a hole in thewall email address who even are you Timothy 34992 gmail. com or TMK 03@gmail. com there's no website there's no professionalism there's just a random dude telling me he can edit my videos to which I'm supposed to blindly believe and to me it's an immediate delete and all these people have to do is have some sort of authority backing them something that tells me that they're all in on what they do and it all begins with at least a website Timothy edit.
com real media. com precise edit. com some Homebase that tells me this person actually takes their profession seriously they don't even have to prove they're proficient UPF front I can figure that out later just show the time taken to initially invest in your business and in having that website you also get a legit email Tim Timothy edit.
com or John atre media. com I now see the legitimate email address I can visit the website I can see what they offer pricing a portfolio and I can decide if I like what I see or not that's way better than not even surviving the trash folder in 2024 and Beyond every developer needs to have a website they need to have an address on the internet that people can go to to see what you offer to see your portfolio your work your writings this is Step number one and after doing this you can completely change your mindset I've said this now in my past few videos but currently most of us think of ourselves as an employee at such and such a place an employee at twio I'm an employee at IBM but that's the old way of thinking what you need to do instead is to think of yourself as a business and make good business decisions so regarding your employer you should think of them as a customer for your business of developing software a customer for your business of react in frontend expert and of course this isn't a short-term play doing this for 3 weeks won't land you a job this is a long-term bigger picture play this is an I want to expand my opportunities and survive much easier in the years and decades to come play in the very first step in doing this is to have a home base a website one as simple as your first and last name if it's available if not try to find the closest to it my first and last name wasn't available and I had a variety of media I wanted to produce so I chose travis. media instead of I chose the media and ran with that and it's been a hub for all things and I've actually landed a job solely from my website and the content on it because it speaks for itself and when I pull up X or another social media platform in my day-to-day I see certain people over and over throughout the day a few examples Air Buddy Kunal we all know him I actually met him at cucon in Amsterdam a few years ago his home base it's at techwith kol.
com and while he works as COC Cloud he entertains sponsorships on a regular he's not an employee he's a business he continues to innovate on multiple platforms and build community if he got laid off there would be hundreds of people he could reach out to for employment how about Francesco works at Daily dodev but I don't know him from that I see him regularly posting on X at the front of software conversations and he had a YouTube channel blow up by 100K subscribers in like 2 months he has a bunch of rust content and his home base is at this address in that domain it actually points to a link tree page but the key here is that he has the domain which is his and gives him a professional email and he's not just an employee of daily. deev he's a business and if he got laid off he has 190,000 subscribers on X that he could reach out to here's Arvid call at the bootstrapped founder. comom or for his audio he has tbfm or arvids books.
com there's a number of places here that are home basis for him to have some authority to do business with others and as a public demonstration that he actively pursu ues those things and is in that business and I can continue like this all day people who have made it a point not to be a nobody in Tech and because of their home base or website they're treating social media as a business not talking about silly irrelevant things they have grown and established themselves as leaders in this field or at least people who are known by many people out there and now they have a countless number of people that would entertain them jobs if things went sour they're playing a bigger game than many others out there nothing is a job everything is a career it's a long-term play and again it all begins with an online home base so today in this video I want to help you take that first step by not only walking you through how to grab a domain and set up your website for practically nothing but I'm going to give you a WordPress theme with Tailwind for your CSS some build tools and some other features like the ability to easily add portfolio projects to it we're going to see how to develop with it and build it for production as well as a cicd solution that I'm going to help you set up to make this all very easy for you and a link to all these resources and code and things like that will be below in the description but I want you to start thinking today about yourself as a business make it a point to do this today and the first step is to grab a domain set up an easy website to start with a professional email address and from here you can begin to strategize how to expand your presence outward from this home base all that being said let's get started now there are a lot of hosting options but one of the best out there in my opinion is hostinger you've probably heard of them they're wellknown reliable and secure so I've talked to hostinger and they've agreed to sponsor this video and have given me a bit of a discount code for you all to use so thank you hostinger for supporting this channel you'll also get a free domain so right here right now here's your chance to get all this set up from domain to website to launch so grab you a cup of coffee or in my case T and follow along with me as I take you step by step through it so there are two options here for you to set this up you can go with shared hosting or you can set up a VPS VPS stands for virtual private server so typically with these hosting providers you host your site on servers shared with other sites your site shares resources like disc space RAM and CPU with other servers there's a slight potential for security concerns and bandwidth limitations since you're sharing servers but the tradeoff is that it's cheaper it's easier to manage for beginners and to be honest for simple blogs bookmark sites and non-b business websites this is enough but for those nerds like me who want more isolation more control over the entire server configuration and plan to be more active with their websites and look to grow the website as a potential business then probably a VPS is a better option and it's only a tiny bit more expensive and you don't get a free domain with this one so let me walk you through how to set up shared hosting first as this will work for most people starting out and you get a free domain for doing so so follow along with me so go to this special link I have for you at hostinger. com Travis media it'll take you to their homepage and click on claim deal here you can choose your plan I would highly recommend business as it's more popular and also it's the most optimal in terms of performance and tools you'll see that the business plan has things like bigger and faster storage daily backups free CDN AI tools e-commerce features and more and then you'll choose your duration so 48 months gives you the biggest discount overall and 3 months free and you don't have to worry about this renewal for quite some time notice that something like the 20 four-month plan goes back up to $10 a month once that period is over so you lose that extra two years at a huge discount and when you add in my discount code Travis media you'll get another 10% off so go ahead and lock that in and once all that's confirmed you'll be presented with your dashboard so from your dashboard you're going to click setup first who is this setup for well it's for myself for my business next I want to create a website if you already have a website and need to migrate it over then you can choose I'll migrate a website but for most of us we'll be creating a new one next I recommend going with WordPress 100% don't even think about it go with WordPress we're not trying to spend months and months on coming up with some custom solution we just want to get our site up WordPress makes that very easy for you to do in here you'll create an administrator email and password next what type of website do I want to build let's say other and what this is doing is helping us choose a starter theme here you can choose a pre-built website or a theme so if you see any one of these you want to start with choose it and you can change this setting here to another business type like business and services or blog and it will show you those specific themes otherwise if you want to go with the simple theme that I'm providing you today then choose create blank site we'll get that set up later since my category was blog it's now showing me some recommended blog plugins like the Amazon affiliate plugin monster insights WP forms Etc so choose those accordingly if you want them set up but remember you can always do that later next do want to generate blog content with AI you can actually do this later also but this is neat especially to get some posts up quickly or some pages written like your about page but for now I'll choose skip now here you can choose your free domain remember you get a free domain with this registration I actually used chat GPT to find me one around programming and content creation and settled on dev narrative. but for you perhaps you want to check and see if your name is available or if you have a business name already see if that is available and if you really can't decide right now you can use a temporary one as it shows down here at the bottom for now and you can set it up later in the control panel and now I'll need to register this new domain so select personal or company and then enter your contact details I'll go ahead and do that offscreen and it'll take a minute or two to register that next choose a data center closest to your target audience I'll choose East Coast USA and then it will install WordPress for us this will take a few few minutes and that's it we're all done with that and once you're done you'll come to this dashboard where you can control all the things here you can access your files your database you can create a staging site check your site performance secure your site and you'll see that your domain is active and if you haven't set that up yet you can do that here and while we're here let's go ahead and set up our free email and to do that just click on setup so there are a few tiers here but for a dollar a month you get things like aliases so in addition to your main email you can have support at whatever your domain is or contact at or help at for different business purposes there are also other perks here as well but for the sake of this video I'm just going to choose the free tier as for your email this is going to be your main one your professional one so this could be your name like Travis atdev narrative.
comom or admin atdev narrative. comom and then enter a password next under config you can choose where you would like to use your email account for most of us this is probably Gmail but choose accordingly set it up so I'll choose Gmail desktop and here is my pop configuration that I need to enter into my gmail click on this link here at the bottom to get a full walkthrough of how to set that up it's pretty easy and hostinger does a great job of walking you through it so next visit your WordPress admin panel and hostinger has some great tools to get you onboarded to help you learn to use WordPress and even has an AI creator that will help you create content quickly but I do have a WordPress theme that I've created for you it's based off of a simple theme called ta press and I've tweaked it a bit to give you a simple starting point to get you up and running now before we set this up I want to show you the VPS options so if you aren't interested in this I do have time stamps below so skip ahead we can get your theme set up but if you are more interested in the VPS option or if you just want to nerd out with me on the details of a VPS let's continue on now a virtual private server is still actually a machine shared among several users but it uses virtualization where your hosting provider installs a virtual layer on top of the operating system of the the server this layer divides the server into partitions and allows each user to install their own operating system and software so it's virtual but it's also private in that it's completely separated from others on the operating system level you have your own secure container with guaranteed resources like memory dis space CPU cores Etc that you don't have to share with other users with VPS hosting you have the same root level access as if you had a dedicated server but at a much lower cost hostinger likes to use the analogy that you have a cruise ship and shared hosting would be like the cabins on the ship it's all one ship but your website is a cabin on the ship a VPS is like renting a yacht you get your own isolated ship but you pay a bit more because now you're running the whole thing so let's get this set up so go to hosting and VPS hosting and choose your plan and you'll see this KVM acronym here this stands for Colonel based virtual machine so a kernel-based virtual machine or KVM is a full virtualization solution that allows a VPS to function as a completely independent server as opposed to a container type VPS which isn't completely independent from other vpss this KVM approach provides greater resource allocation stronger isolation and enhanced customizability compared to container-based Solutions so choose the $4. 99 per month option which gives you a good starting point you can always bump it up one later or you can choose that now and run with it your call now fill in all the info here be sure to apply the coupon Travis media and you'll see it's only slightly more expensive than the shared option $100 will get you 2 years of Hosting $60 for 12 months so fill out all this information create your account select the payment option and submit secure payment and once that's done you'll see that option here in your dashboard from there you can click setup and click Start now to begin the guided setup so first choose a server location closest to your audience I'll choose the US now we'll select an operating system template I would highly recommend going with Ubuntu here which is a Linux distribution it's one that is popular stable and it's very beginner friendly but they actually make it super easy if you choose application and under there you'll find a combination of Ubuntu and WordPress together and the reason we have to choose all of this again is we are using a VPS and we have more to manage now and thus more options so let's choose Ubuntu 22.
4 with WordPress yes I'll take the free malware scanner and here you want to set an admin password for the control panel next set a root password so the previous was for the control panel this one's actually the root password for your VPS as a whole and while this is optional I do recommend adding your SSH key so that it's easy to SSH into your server and if you don't have a public key you may need to create one it will actually tell you how to do this here but I'm assuming that if you're choosing the VPS option you know how all this works so on a Mac I can run this command to paste my public key to my clipboard and now I can just paste this in and then give it a label and save it choose continue and now double check your setup looks good to me now hit finish setup and you're on your way it takes about 7 minutes to set this all up so pause the video take a quick walk and come back so we can take a look at our brand new VBS and here you'll have a ton of information at your disposal remember you're at the operating system level here so there's more to manage and thus more flexibility you'll have a server now to take care of you can add a domain you can open a browser terminal and there's even an AI assistant built in for your questions but mainly we want to go to the application access Tab and click our login URL Now log in and you'll be at your WordPress dashboard now I've mentioned that I have a simple theme for you to give you a starting point and you'll find a link to this down in the description and this setup will be the same for shared or VPS hosting we're using Wordpress in both scenarios so you can follow along either way and this theme is based off of tail press which is a WordPress theme built with Tailwind as its CSS solution so go to appearance themes add new theme and then upload theme and choose that theme tail press master. zip and then install it once that's successful just click activate to activate the theme [Music] and you're good to go so if you go to your homepage you'll see a very simple setup here would be a picture of you and it say hey it's me whatever my name is some information about you and then links to your GitHub to your portfolio page to your LinkedIn into your Twitter or your Instagram or your Facebook or wherever you want people to go to find you so the first thing you want to do is go back to dashboard go to settings and peral links and make sure post name is chosen here so if it says plain you don't want this URL structure choose post name and save changes and you'll see with this theme and we'll talk about how to change the homepage in a minute when we get to the build process but one thing you'll notice here is you do have a projects section so if I want to add a new project I can come here and say um my notet taking app and I can put some information about it let's just do some laurum ipsum so generate five paragraphs copy and I'm just going to paste that in then let's add an image not sure if I already put it in here or not I didn't so I'm going to go to upload files and upload a picture of my application and then select it and then I can put more information here like you know my text stack my text stack was react and then other information that may be relevant here in your portfolio section I can make this uh bold I can make it an H2 whatever but you also want to add if you go back to project a featured image so I'm going to add the same image for the featured image and then publish this and as soon as you do that when you go back to your dashboard you'll see under all projects you now have one of your projects registered if you go to your homepage and click on view my work it'll take you to the projects page and this will be a grid of three columns so this will be your first one your second one third one I only have one now but this is a great way to have a grid of all of your projects so if I were to add a second one let's go back to projects all projects add a new one my other app and more lauram ipsum then right here I'm not even going to put a picture I'm just going to put the same featured image just for sake of time I'm going to add this this is my next project save it back to my homepage and view my work I now have two projects and of course this is is just at your url projects is where this is at so mine is Dev narrative. comom projects so it's a very simple website it's meant to be that way I just want to start you out with a simple homepage saying this is me this is my name this is what I do and here's all of the things you can check out about me and then you have a projects page you can add an about page you can add a resume page if you look up Tailwind resumé templates there's some really good ones out there already made you can just fill in your information you could have a slash resume page you could have a Blog Page in fact I think there's already blog capabilities here yeah if you go to posts all posts and view this one here's your first post hello world welcome to Wordpress and here's a sample comment you'll need to use a little CSS to fix that comment or you can just remove comments but make this theme your own make this website your own but remember start simple don't try to get too complex up front get it basic professional and launch it that's the goal here but the next question is how do you develop this website what are the build processes what if I want to make changes to it how do I upload my changes to hostinger well I'm going to show you all of this now with a cicd template to automate the whole thing my background is in devops and I like everything automated I don't like to pull up an FTP client and have to drag and drop my uploads I want things to be automatic when I push my changes to GitHub I want it automatically to update my website update my files everything so first we have to open this theme in VSS code so I'm going to go back to my theme and I'm going to drag it into VSS code now the first thing you need to do is install your packages so run mpm install to install your packages this is going to be for development you want to bundle all this up into a production optimized package when you launch it we'll do all that in this cicd pipeline but for development we want to build all of those packages here so npm install and then to develop your theme you can run npm run watch and this is going to watch your theme for changes so you'll see this compiles everything and then it waits for you to save a file and then it's going to recompile things and with WordPress there's no hot reload so when you do save something and it recompiles you'll have to refresh the page it's just the way it is there's probably some solution to that I haven't even looked into it but if you know it comment below and let us know and then finally when you're done you've made your changes and you want to send it to GitHub you run npm run production and that's going to bundle everything up into this optimized package and if you forget what those commands are you can always go to your pack package.
json and go down here to scripts and you'll see npm runev watch watch pole hot maybe there is a hot reload here um in npm run production and all of this is based on laravel mix which is a package that does all this great stuff for you so if you forget the commands they're here but I'm going to do npm run watch and I use local for local WordPress development so I just choose uh tail press projects I think that's what this is is and I can just click I can start the site this will start the server locally a lot of people use like M and stuff like that I use local it's free and once the site is running you can just click WP admin and it'll start up your site based on a local server but I'm not going to be doing that right now because we need to get cicd set up so the first thing we need to do here is push this to GitHub we always want our code in some Version Control System so let's go to GitHub and create a repository for this so I'll go to my homepage repositories and new repository name make it whatever your site is whatever you want this to be I'm just going to do test tail press I'm going to make my private whatever you want to do here and create repository and then we want to take our code base and do a get a knit to initialize git on our project then a get add dot which adds everything and you'll notice here that we have already a get ignore file which is going to ignore node modules you don't want to push them up it'll be a huge file so make sure you have that it's in this package so you should but everything is added now now we need to commit this so you'll see here in VSS code everything is staged and for the commit we're just going to say initial commit this is going to be our initial commit so so click commit great but we don't have a remote so we need to go back to GitHub and we're going to add this remote to this repository so grab that run it down here in the terminal add the remote next step is to get Branch M main this just changes it from Master to main the main branch because they recommend everything is in main now not master and then finally get push you origin main so push all this up to the main branch do that hit it and it should push everything up to GitHub now when I go back to GitHub here we can refresh and here are all of our files now to set up this continuous deployment just go to actions and there's a bunch of templates here we're going to choose um where's it at set up a workflow yourself and that gives us a blank main. yo file and if you go down in the description you'll find a link to this main. yo file I think I created a gist for it so if I go to your gists here it is GitHub SSH deployment and by the way this is any SSH deployment from GitHub so whatever you're hosting if there's SSH you can deploy it so I'm going to copy this file everything in this file and paste it over here in this actions file so what you have here is on push whenever you push to the main branch this job section is going to be a number of steps that run so we're going to check out the repository we're going to set up PHP we're going to install node.
js we're going to run npm install and then npm run production so if you forget to do that before you push it's okay this pipeline will do it it'll bundle everything optimally by running npm run production and then finally we just deploy it to the server using this package here and we have these secrets here that we need to fill in this is kind of the last step so if you go to settings I'm going to open this separately if you go to settings and you go to secrets and variables and then actions you can set up these repository Secrets these pieces of data that you don't want anybody seeing so go to new repository secret and our first one is going to be the our private key so up here I'm going to say private key and we need to get our private key from our computer remember we uploaded our public key but we need our private key to confirm that so to find that just go to iterm go to cd. SSH and here you have your ID RSA Pub you probably have this I don't know how you have your setup but there's always a public key and a private key if you set up the SSH public key earlier you have this pair so I want this ID RSA information and what I can do is I can just do cat ID RSA and that's going to print out that key and then I can copy it and just paste it here which I'll do off screen screen so be sure you copy that whole block and paste it in there so that's your private key next we need our remote host so remote hostor host that's going to be if I go back to my hosting or dashboard if I go to dashboard and down here to uh Advanced I think yeah SSH access you'll see everything you need here actually so my IP address is going to be the host so grab that and paste that in that's my remote host next we need the remote Port so here type remote Port that's going to be for me this port here it'll be under the port section there for you so I'm going to paste that in and then finally I need the remote user so repository secret remote user and my remote user is going to also be here under username so copy your username paste that in and now this action has access to all of these secrets without anybody else being able to get them so we've entered this it's all good we got everything set up and by the way uh the target for me is public HTML WP content themes tail press Master if for some reason you changed your name or whatever you might want to double check this so if you go back to the SSH panel if I copy this command I can actually SSH into my website and I can see how the structure is the folders and all of that just to double check so you can use this command to SSH yourself but we're setting up the script so it will do it automatically in air cicd pipeline so now that we're done with that let's go ahead and commit these changes create main. yaml that's fine commit changes once that's done since we did that on GitHub we need to pull down those changes so down here I'm going to do a git pool origin Main and there's a changes so let's go over here under the GitHub folder there's a main.
yaml hostinger deployment so let's try this out we've already set that up GitHub will know that when something's pushed to main we're going to kick off this build and deployment so let's go to the homepage so let me show you how this is set up real quick here's my homepage hey it's me John Doe if you're ever in code and you can't figure out where stuff is most of the time you can just copy something like this and go to your theme paste that in and figure out where it's at so here it's in these template Parts which is content DF front so the whole way WordPress works is if you want a static front page you need to create a front-page. php and here it calls this template part called content front so go there by the way you can also set up Advanced custom fields which is a plugin in WordPress and then you can create a really easy form to change all of these values without without having to go to the code so anyway hey it's me John Doe let's say your name is like Peter Parker and then you have your information change your information here and then you have visit my GitHub here you would put your own GitHub link and visit my work or view my work you don't need to change this CU it goes to the projects page which you'll already have then there is the follow me on LinkedIn you can put in your LinkedIn URL here instead of mine and then finally you have follow me on Twitter and all of these icons are just SVG these so if you need to change them to something else they're pretty easy to find so let's save that difference so it should now say Peter Parker and I'm going to commit these changes so let's go here that looks fine let's hit the plus to Stage these changes and then hit commit and now that everything's set up I can just hit this actually I forgot to put a commit message so it's going to tell me to put something here updated homepage save sync changes and that should be going out to GitHub and now our action should be kicking off so let's go back here to actions and you'll see updated homepage is running it's in progress and you can follow it here everything that is doing right now it's building it's installing node. js it's installing npm dependencies by running npm install so if something errors out you can come here you can see exactly what is being logged run build tasks so this is npm run production this is optimizing everything for a production build deploy to server post install JS post job cleanup and complete job so everything went great no errors I think that's the first time ever I've done one of these with no errors actually it's still running let's go back to actions oh it's done now we should be able to go to our website and refresh the page and it says hey it's me John Doe and it's got to be a cashing issue and you can go to hostinger and clear the cash but let's try this on a incognito window and it should say Peter Parker hey it's me John Doe it did not update all right let's go and see under appearance theme file editor we can actually see the files here that are on the server so I'm going to go to template parts content front and it says hey it's me Peter Parker so the files did update everything ran fine maybe hostinger I think if I go back to the dashboard performance CDN from here flush cash we can even put it in development mode just to make sure and if I go back to incognito window Dev narrative.
