Static WordPress: Your Fastest Website Ever | Jan Zavrel | Skillshare

Playback Speed


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

Static WordPress: Your Fastest Website Ever

teacher avatar Jan Zavrel, Developer, Author, Consultant

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 (37m)
    • 1. Introduction

      1:47
    • 2. Services and technologies you will need (all available for free)

      2:45
    • 3. GitHub and Netlify

      5:06
    • 4. Create local WordPress installation

      4:50
    • 5. Cloudinary

      4:09
    • 6. Uploading WordPress website to the cloud

      9:47
    • 7. Updating your static WordPress website

      6:03
    • 8. Backing up your WordPress website

      2:05
  • --
  • 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.

24

Students

--

Projects

About This Class

I've got two questions for you:

  1. How much do you pay for your WordPress hosting?
  2. How fast is your website?

Fast and secure WordPress hosting does not have to be expensive. You don't need to pay for managed WordPress hosting to get fast and secure website.

In this class, I will show you step by step how to create your own WordPress website and host it for free. But make no mistake. This is not some trial version of hosting filled with ads. This is a blazingly fast and totally secure solution that can be achieved only with static website.

Even the hosting companies realized that static WordPress is ridiculously fast and there are plenty of services that will offer you this approach, but there's no reason to pay $15 or more per month because you can get exactly the same speed, security and backup for free.

Meet Your Teacher

Teacher Profile Image

Jan Zavrel

Developer, Author, Consultant

Teacher

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. Introduction: I've got only two questions for you. How much do you pay for your WordPress hosting and how fast is your website to really establish video, good to Google's PageSpeed Insights and test the speed of your left side. Fine. Now do the same for one of my websites like today, WP.com, for example. Pretty versatile. Now, do you know how much I pay for a hosting service that delivers such a blazingly fast WordPress blog? Absolutely nothing. Hi, my name is Ian, and in this course, I will walk you through the whole process of setting up your own self hosted WordPress website. So you can enjoy the same incredible speed without ever having another dollar to your hosting provider. Once you finish this course, you will realize how much money you will save. But let me help you here with a quick calculation. Normally for these results, you would have to pay for a pretty decent managed WordPress hosting like fly wheel for $15 per month or kin star for $30 per month. You'd also need some cash plug-ins like WP rocket for example, it will cost you $50 per year. On top of that, you might want to pay for some additional backups or some security plugins, all in all, you might end up with $300 bill each year. While my solution will give you better speed, better security, and frequent Arbeit manual backups, and it's all completely free of charge. So what are you waiting for Iran now and save those hundreds of bucks each year for something more meaningful. I can't wait to meet you inside his course. 2. Services and technologies you will need (all available for free): Okay, so let's get started. First thing you need is few services. So the first one is GitHub. Then you need to have Netlify account, you need Cloudinary account, and then you will need to download GitHub desktop and local by flywheel. So first thing, GitHub. I understand that when people hear about GitHub, they think about programming and they run away. But don't worry, we will not be programming here in this course. Anything a, trust me. So to create a GitHub account, you just sign up, you enter your e-mail, you enter your password, and then you'll have your account ready. It's pretty straightforward. Next thing is Netlify. When you sign up for Netlify account, they will offer you to sign up with good up. So you can save one login credentials if you sign up via GitHub. And finally, you need to create a count with Cloudinary where we will upload automatically our images. So sign up for free account on Cloudinary as well. You will fill out your name, email, password, and so on. Really clean and straightforward instructions. Okay, once you have this, go to desktop dot github.com and download GitHub Desktop for your platform. It's available for Mac OS and Windows as well too. Don't worry. You don't need to have Mac OS. You can work on Windows PC just fine as well. And finally, you need to download local by flywheel, where we will install our local WordPress installation. So just hit Download button, choose your platform, Mac, Windows, or even Linux. And then you need to fill out your name, email, phone number. Once you have this, hit the Get it now button and wait for it to be downloaded. Okay. So I hope you have everything downloaded and installed. So I hope you have your GitHub Desktop installed and your local by flywheel installed as well. And I hope you successfully created your accounts for GitHub, Netlify, and Cloudera. And now let's take look how to set up your local environment for WordPress. 3. GitHub and Netlify: So first thing you need to do, if you go to your GitHub account, you need to create a new repository. I hope when you watch this course, this interface will look pretty much the same. But since those services are constantly changing and tweaking the interface, it might be looking a bit different, but I hope you will still find a way or a button to create a new repository. In this case, there's this green New button. So I will just hit this new button. And in my GitHub account, I don't need to go out repository name. And since I bought millionaire report that com domain name, I will use this throughout this course as the name of my website. So if you have your own domain name ready, you can use your name of your website or the name of your domain name for your repository. Otherwise, you can choose whatever you want. It doesn't really matter. So in my case it will be million report.com or I can just go without.com millionaire report. And I will make it private. And I will add readme file, and that's it. And I will just create this repository. And as you can see, your repository has been created year on my website, I can see that this repository has been graded. Now the crucial part is that I need to go to GitHub desktop on my computer. So I will just run GitHub desktop here. And as you can see, I already have some websites because I work with GitHub quite frequently, but you should be always able to have this Add button and the option to clone repository. So just hit Clone Repository and now you need to find repository only your GitHub.com account. Maybe once you run GitHub for the first time, you will have to connect it with your account. So here in preferences, I have my GitHub.com account connected to this did have desktop application. And maybe first time you ran it, your GitHub desktop. It will give you some old onboarding where you can type your credentials for your GitHub.com account in order to connect it with this GitHub desktop application. So I hope this will be pretty straightforward. And once you have this, you can easily clone repository from your github.com account to your local computer via this did happen desktop application. And I will just try to find it by typing millionaire report. And as you can see, it's already here. And this is important. I will call this repository to my computer. In this path, if you are on Mac, you should use Users slash your username on your Mac computer, and then GitHub as a special directory for all GitHub repositories. Or if you're on Windows, you can use whatever path you want somewhere on CDS, for example. Again, this should be pretty straightforward to you. You just need to pick a place where all your repositories will be stored. So I will choose clone here. And GitHub, we're just clone the repository to my GitHub desktop. And I will also show you where I can find it on my GitHub repository on this Mac. So here I have a lot of websites and here is my millionaire report. And as you can see inside is you read me file. We have created, once we created that repository on GitHub.com account. So this is a first step. Next step, once you have this, I hope you already created your Netlify account. So this is how we are. Netlify account should look like. I have some size year. Yours will be without any sides if you didn't use Netlify before. But it doesn't really matter. You should have access to your own brand new Netlify account to continue in this course. And finally, your Cloudinary a town. So again, here's my Cloudinary account. It's ready for me to use it. And that's it for the basic preparation for our setup. And now we need to run local and insult our WordPress installation. 4. Create local WordPress installation: So I hope you were able to successfully install local by flywheel. And once you run it for the first time, you should see this onboarding window which says looks like you haven't graded and asides yet. So we will hit Create a new side here. And the name of the site, in my case, millionaire report. You pick the name, you prefer. It doesn't really matter. So millionaire report and there are some advanced options, but we don't really need them. So I will just hit continue and continue again and now some credentials. So our just use my name and some previously password. And I will hit at side button. And it will automatically provision all the services for me. And I will have my brand new WordPress installation ready on my computer. This is important. It's not somewhere on some expensive managed web hosting servers. It's right on your computer. And once you have it, as you can see, I have the latest version, which for now is 5.8. But don't worry, this approach will work many, many months and probably even years in the future. If you watch this a few years after I've published Discourse, I strongly believe this approach will still be valid. Now I can open the side or I can go to administration, so I will hit Admin and this will open the administration window where I will just login with my credentials and I can tick remember me. And here I am. This is the dashboard for my brand new WordPress installation on my local machine. This is important. It's on my local machine. It's a my computer. It's not somewhere on the server, on the Internet. It's in my local computer. And now here I can even visit the site. And as you can see, this is 2021 theme. And the first thing we want to do is to download some optimized and fast fema. And there are two candidates, generate press and astra. But I will work with Astra because in a free version it offers more features and options. Then January press, even though January press is generally a bit faster, but not at much that it really matters. So to install a straw, I will just click the Add New button here and either here in the first row. So I will just install As Draft beam. Okay, I can activate it now. And let's visit our site with this nice and simple new beam. Very easy, very MDA as well. So I will go back to the dashboard. And here, let's say take a look at this hello world post. And this post is pretty empty. So I will just use the post I recently published on my other website, Smart perfect school.com. And post is the most profitable side, the x in 2020 one. So this is my first host. And you can see this post as cover image or featured image. It has few paragraphs and some images inside it as well. First thing I need to do understand that this method won't allow you to use built in comments. So you who want to use commands, you will have to use some third party application and discuss, for example, because static pages generate dawned allow you to use built-in comments. Okay, let's go back to dashboard, and now let's go to Plugins. We'll have to add a new plugin. And this plugin is called simply static. Search for this plugin. Here it is. And hit the Install now button. Once it's installed, you will just activate it. And another one is Cloudinary. So here's our Cloudinary funding issue to install the official coronoid. And the second one, the auto Cloudinary I've tested, it doesn't work as I expected. So I will just activate this official plugin. And now let's set these up. 5. Cloudinary: So the first thing we need to set up is Cloudinary. So we will have to connect our Cloudinary account with WordPress to get started. That's why we created at corner and count. So you need to go to a coordinator account. And here you can see in the dashboard something that's called API environment variable to just copy to clipboard and paste it right here. And remove the first part of the string through. This has to be deleted. And once you have it right, this is hit the connect button. And now you have successfully connected. Next thing is media settings. So first thing we want auto sync matter. So all the images that you will upload your media library on WordPress will be automatically synchronized. Your criteria account. And from that cutlery account, those images will be served to your website, already optimized. Next, you can optionally choose a specific folder path, but I will leave it the way it is. And finally, storage, I suggest you keep both Cloudinary and WordPress storage. So the images will be both on your Cloudinary account and on your WordPress installation. In case something happens with co-owner in the future, you want to have your images on some safe place. Once you have this click Save Changes. And that's pretty much it. You can take a look at media display. There are some options, but we don't need to do anything with this at all. So now that you have this, let's take a look how to get your WordPress website from your local computer to the internet. And that's why we downloaded and installed the simplest static plugin that will do the heavy lifting for us. So let's go back to simply study. And first thing you want to check is settings. In settings here use relative URL, so keep it at the default value. Delivery method is zip archive. You can buy premium version, but I promised you that in this course you won't spend a penny. So we will stick with the free version. Once you have this, it save changes. And the last thing before we will generate our website is you need to go through diagnostic. And here you can see that there is fail next to two file systems. This means that we need to go to where local created our WordPress installation and create one new directory inside. And as you can see, there's a path where we need to create a directory and the directory name is steric dash file, so we just copy the name here. I will open a new window and here local sides, millionaire report, public, WP Content plugins, simplest static. And here I need to create a new folder, static files. Once this is done, you can go back to simply static. And if you click generate a new click diagnostics again, you will see that now it's okay and everything is ready for us to generate on a website. So go to Generate and click generate static files in the activity log, you can actually see what's going on. Okay, now that we have our website generated, we just click here to download it. And in my case, it will be downloaded as a zip file to my downloads folder here. And in next chapter we will take a look how to upload this generated zip file or website to the internet. So all the world can see it. 6. Uploading WordPress website to the cloud: Okay, Let's upload our generated website. So I have this zip file in my downloads folder, and I will just double-click on it. And I can take a look inside. And the most important part is that I will just select it all, copy it. And I need to go to my GitHub account in Millionaire report. And I will just pasted here. And this is important, very, very important. Every time you will create a new content to our first website, you will have to regenerate the content and you will have to download a new zip file. Open the zip file, select all the content and copy and pasted over the old content in your GitHub repository. Remember this, this is extremely important and the next step I will show you right now is as important. So watch carefully. Once I have this copied 2 million report folder inside GitHub folder, I need to go to GitHub Desktop and watch what happens. Here. You can see that in a millionaire report repository we have 22 changes. Basically, we had only that README file there before. And now we have all these new files to get it up to the Internet, to get it uploaded to our GitHub.com account, we need to write some summary. And here, usually you arrive at something like brand new backside. Next time we will do it after you create a new posts, for example, you can just type the name of the new post or just new article or whatever you want. It doesn't really matter. You just need to write something there. And once you have it, you will hit this commit two main button. And finally, you will click this push origin button. And this means that this GitHub Desktop will basically grab all the changes and push it up to recount to the Internet. So you can remember it this way. It's like pushing it up to the cloud, to the Internet. Once you have this, we need to connect it to our Netlify account. So Netlify can create a server for us. So let's take a look at that. So here I am on my Netlify account. And as you can see, I already have some size here, but we will start with a new site. And you should always be able to locate new side from did. And that's exactly what we need because now we have our new steric WordPress bedside ready and waiting for us on our GitHub account and we need to get it to Netlify. So first thing, we will connect it with GitHub. And now you need to authorize Netlify to access your GitHub account. So you will just type your name, your password, and you will click Okay and authorize or whatever they will ask you to do. Trust me, this is perfectly secure and you need to do this step, otherwise it won't work. Once you have it authorized, you should be able to create a new so-called deployment. But don't worry, don't be scared. This basically means that you need to select your repository and again, you can search for it. I have a lot of them here, so search is logical. Maybe you will have just your one repository so you can just click on it. But I will just try to search for my repository. And you can see millionaire report. This is the one I need and you don't have to touch anything else here. Just hit the Deploy side button. And now the new side, deploy is in progress, which means that it's been uploaded and prepared for us. And it shouldn't take too long because the side is really, really small. As you can see. It seems like it's deployed in four seconds. And we have some insecure mixed content here, whatever, get to it in few seconds. Now, our site is ready. So we can go to this automatically, randomly created name of our side. And if I click on the name, you can see that now this is my side and it's up on the internet. And I can access it with this crazy name. But before I do that, I can rename the side. Just go to site overview here, Site Settings. And here I will just change the name. So instead of hopeful Minsky, I will use millionaire report. And the address will be many on a report that Netlify that app, which is definitely better and easier to remember. And I can test the new address and as you can see, it works perfectly. And now let's try to test this website with PageSpeed Insights. So it just opened a new Chrome window here. And I will analyze it. So as you can see, for a free hosting, this is not too shabby. And finally, let's take a look how to connect it to your own domain. If you have your own domain name, like I have my millionaire repo.com, you can easily connect this website your own domain name so you don't have to use this dark Netlify dot app or whatever. It's very easy. First thing you absolutely need is your domain name, so you need to buy it with some register. I personally like orange band, but there are many others and it's up to you which one of you will choose. Next. I definitely recommend Cloudflare free account again, and it will help you set the website easily and it will give you some more additional speed. So I have my Cloudflare account already here. And here in DNS. I have some records for my e-mail addresses and so on. And if I want to connect my domain with my Netlify side, I need to go back to my side. And here in Domain Settings, I need to add custom domain. So just fill out its name and its many ordinary port.com. And I will hit verify. Yes, it's my domain so we can edit. And now here are some instructions. So millionaire reported com will be my primary domain and www dot million every protocol will be secondary domain. And if I green here, Check DNS configuration, I can see that I need to create a record that points to a specific address, which is this one. So this is a bit tricky, but if you follow me carefully, I believe you can manage that as well. So I would just copy this IP address and here I have two records. So I will simply edit this one and change generalise to be this. And I'll save it. And the next one, I will safely delete because I want to need it. And I will do the same with both WW ww prefixes. So we just delete both of these records. And if I go back, I can take a look at how to correctly connected to my direct domain, and it's via CNAME. So I will have to create a CNAME with this address. So I will go back here. And here I will create a CNAME record. And I will use this name and this target. Okay, everything's fine. Now one thing to remember it crowds where you need to turn off proxy here. So instead of orange Cloud, you need it to be DNS only with gray cloud. But now let's all you have to do. And if I go back here, I can refresh the page and it will definitely take some time. But once I verify DNS records, it should install SSL TLS certificate for me automatically. And I should be able to access my Netlify WordPress website via my own domain, millionaire report.com. And this is how it looks like once it's all set up correctly. 7. Updating your static WordPress website: Let's take a look at some easy workflow. Let's say you want to add some new paragraphs to already existing article, or you would like to create a new article. And what will be your step-by-step workflow in that case. So let's go back to our WordPress account. And here in dashboard that say I will want to create a new post. So here's my new post. And again, I will try now from today, WP.com for example, take a look at some recent article, like for example, 10, hosting plans for WordPress in 2021. So we just copy it and I will place the name of the article here. And let's quickly copy and paste some paragraphs here. Nothing too long. Just a few more paragraphs. And of course, I want to use this nice cover image or featured image. So I will just copy it here. And now I can place it to my articles. So take a look at featured image. And I will upload, cover one set featured image. And I can publish it. Now that it's published. I can view post. You can see here it is. And before I will upload it to my website, I will sort the program with this mixed content we saw Netlify. This is caused by discussions and the namely avatars. And to get rid of that error report, you need to disable avatars. And once you save your changes, you should never see you again. And of course, for that matter, we should disable comments altogether because commands won't work. It's static website. So just save the changes here. And of course this default host already had a command, so I will just trash it. And now everything seems fine and I can safely visit the website. You can see that now we have two articles here. So once you have it like this, ready and prepared, you will do the same few steps. So you will go to simply state. You will generate, and now you will create, generate static files. You have to wait awhile here and check the Activity Log. And you will see how all those pages and files are fetched. And once you see the download link, you know that you're ready to download your new zip file. And here is, so I will click here to download the new zip file. So in my downloads folder, I already have two of them now. And the latest one is this one on top. And again, I have to select everything inside that directory. I need to go to GitHub millionaire report. And here I will copy it all over and I will click Apply all and replace. So basically you need to replace everything, everything that's been there. You need to replace it with a new content of the newly generated so far. I hope this is pretty straightforward. Once you have these, you need to go to GitHub Desktop again and it will show you what changes we made. So you can even click on some files to see some changes, which you can see here. We have some modifications. The green ones are additions, the red ones are stuff we delete it. And once you have this, let's say, as I suggested, new article and commit domain and push to origin, which basically means push it to the crop. And once you push it to recount, Let's quickly check Netlify because Netlify checks your website automatically and it automatically creates new version. You don't have to do anything or Netlify. It will immediately create and publish new version of your website for you totally automatically. And as you can see here, we already fixed that problem with mixed insecure content. So here we have, congratulations, no insecure mixed content found in your file. So remember to turn off avatars, and this will fix this program. If you get that program, okay, everything's fine, everything's done. And if I click millionaire report.com, I will see my website, both articles. I hope you appreciate how easily you can teach your expensive web hosting service and heavier own version of WordPress on your local machine. And quite easily update it and upload it to GitHub and Netlify and have it served for you automatically with images served from your Cloudinary account. This is the last thing I want to show you. If you check your Cloudinary account now, you will see that in media library you have images that were automatically uploaded by WordPress. 8. Backing up your WordPress website: And the last thing is backup, because even with your local WordPress setup, it's wise to back it up and backing it up is very easy and straightforward. You would just right-click on the name of your local side. By the way, you can have as many local sites as you want here. And here you see the option to export it. And there are some filing exclusion filters, but you don't have to worry about it and you will just hit the export side button. And let's say I want it to be exported to my downloads folder, millionaire report, that's it. And local is compressing and exploiting the files. So now I have my backup here. I can save it to some external hard drive or upload it to OneDrive or some other Cloud service. But once I have some problems, I can get this millionaire report, that zip file and I can go to local and import side. If I just select this million and report that zip file and click Open, it will create a new site for me from data import. And let's say I will just write backup here as a new site name. And it will extract the import and provision my new WordPress website from that backup file. And here you go. Back up. Successfully imported. Okay, that's all. Thank you very much for watching this course and I hope you will be successful with creating your fast, secure, and most importantly, free self hosted WordPress website. Let me know how you did and if you have any questions, don't hesitate to ask. I'm here for you and I'll be glad to help you with this. Have a great day.