![DIY WEBSITE S SD SD.png](https://files.peakd.com/file/peakd-hive/arunbiju969/48Vj3znjtHS5y5tE6ekb3HcyxjPZFdLYeYpM31cKpU6yitYoTfEV9SfLMPbpXN5t4R.png) **Too Good To Be True?**

You will be surprised by the number of free resources that are openly available on the internet, all you have to do is search. On that note, if you ever wanted to have your own website to showcase your projects and crafts, and sell things then I've got you covered, your search ends here, welcome.

**What to expect?**

Now, this website that you are about to set up runs on a server with limited resources, and future scaling if needed is possible but that will cost you money. Being limited does not mean that it is going to be super slow, in fact, it is quite fast and when compared to other free hosting this one is blazing fast. Keep your expectations low is all I'm trying to say. At the end of the day, completing my instruction you will have your own free website with custom domain name all for free.

**The Preview**

Before we begin, let me show you what you will be getting visit [aboutarun.eu.org](https://www.aboutarun.eu.org/), there you will find the template being used as a web profile, I figured that as everyone is getting connected via the Internet it is nice to have a platform to showcase your identity and achievement, also, sending a website along with your CV/Resume will make it possible to add more visual elements and simply helps you add more content. Now, this is not the only use case and really depends on what you want it to be.

**Features**

1. Dark/Light Mode 2. Responsive (Works on Mobile, Tablets and PCs.) 3. Zero Coding (You people will be using GUI to change images and text) 4. Open-Source 5. 100% free (No credit card, no catches)

**Prerequisite**

1. GitHub Account Go to [github.com](https://github.com/signup) and follow the instructions there to create an account, and yes it's free. That's it!.

# Step 1 - Go to my [GitHub page](https://github.com/arunbiju969/webprofile) where the source code for our project is hosted and fork it (make a copy of my code into your account), to do it follow the steps below. ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23sweHrB2bR7srDN81LfsvHgs4zTfLNCdHMvyyjQn6mDbNHQnUz69YmXNiU23CxPDGpsn.png) - The landing page should look like this, make sure you are logged in tough, now, if you look at top right you would see two a fork and a start button, while you are up there maybe give me a star?. If you gave me a star thanks 😻, then click the fork button and unlike the star button this is a must-step, that should take you to the following page. ![Screenshot 2023-02-07 171947.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23sweD6cHozEpDc5Rp32fFsimftNacPyft9gD44MGuzitEySTn2BFS2mvEKLnVXF35Xuy.png) - Click the green "Create fork button", wait a couple of seconds and you should now have a copy of my code in your account, you can verify it by checking the repo name as highlighted below ![Screenshot 2023-02-07 172713.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t74jKdGGMqMERAHAERqDT5WhCgeG9Gd44GHFuC9UkYXeQdtcqC49N2jdewi9nndAUno.png) - If you see text like this but with your account username then, you successfully cloned my code.

# Step 2 - Now that you have my code and it's time to personalize it, click the codespaces button on top, as shown below. ![Screenshot 2023-02-07 173536.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swdkXYNQsbb5gvbxRenLjnzub87E8dxgWry6aXtMkoSADNqgWjx8DF9wu8pfQ2uobMH.png) - Click "New Codespace" button to create a new virtual machine where you will personalize your website. ![Screenshot 2023-02-07 173701.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swgK5Lh4kTGBqvxbSdQqCAT5sjwiDjzkaVt6TFJfgSu2NZ8UWKPR6BZaYs7auJtGtBZ.png) - That should take you to this page where you will have to select a few options, for the first option "Repository" clicking the "Select a repository" it will open a prompt with an option to search your repo and there below the search bar you will see the repo that we just cloned. ![Screenshot 2023-02-07 174104.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t72sTEBY4ZE9jeR7QAZbUECPFxxoN2NK8AVLaBx3WunMoU7Q1pTJtGYjCeZ1pK8z28d.png) - Click it, leave the branch option as default, and select a "Region" that is close to you, if you don't know where you live ask google, and leave the "Machine type" as default too. After all that your configuration should look like this. ![Screenshot 2023-02-07 175104.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swcKBUugZTNppwcMciPx2i2io4QTqsaC6pcirtc4TYP7PZNj8Dp4uFJZzQ7D7ZZSPkf.png) - Click the "Create codespace" button to create the machine, don't worry about the message that says it will be paid for by you, github has a free tier too and everything will be covered in it. ![Screenshot 2023-02-07 175849.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t77FszoQmY3WcozfGra9fitkiMSTPkdzy6CCjYSkb8TdhiSZyvrifEzu21BYqMMbEft.png) See the free option, we selected the 2-core machine and we have 60 hrs of free usage, don't believe me see for yourself [here](). Clicking the "Create Codespace would have taken you to a new page, give it a few seconds to load and you should see the following page. ![Screenshot 2023-02-07 180342.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swc1NtTWymAJRm5g6WQXNorF3qwwgNxHRPcArAFpyvPqcWStoL1SMkwyafGP3fgZqXe.png) Here, you will find a couple of sections, don't be overwhelmed just move your cursor to the highlighted section and click in front of the word "(master) $" and type this `python setup.py` check the image below. ![Screenshot 2023-02-07 180342.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t72wgvCAZHmU7S2S3cizSoibZKHAAkGrd1T4J6R1kXjiV4aqPmYygPMkbhRz43nkukT.png) Press 'Enter" to execute the command and it will run some code, and then it will stop and wait for your input like this. ![Screenshot 2023-02-07 181658.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t74p9tURKm8d4jJ2F5DzjYwAXRcygR9NzCYkqRzAJyvDSuATZkyABnLNgjS5z99nDyz.png) Here we need to enter a Django secret key, that will encrypt your requests and it is important that it is unique for each website, to get a key open a new tab and go to [djecrety](https://djecrety.ir/) and click the generate button there, it will automatically get copied when you click generate ![Screenshot 2023-02-07 182114.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tHZK78vcPj26Qotzz5H99oJTPgnPzNcGWQTKxFQXVaM9vwVCeHa5U29gBoZ6mXAGHNy.png) Now, go back to our codespace tab and paste the key that we copied then press "Enter", Now, it is going to as for a DB HOST, ![Screenshot 2023-02-07 182810.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swa9LeuRNdc6ZGrt7yTEPjqT3a9iJCnYQ12YseKCocBYeMZ4c5eYYhrvyBEMYiPvGJy.png) So, the script is basically asking for the link to a database, this is where you will store your data and we need to get this as well, open a new tab and go to [supabase](https://supabase.com/) and click "Sign in" ![Screenshot 2023-02-07 183117.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tbGoUHgXFsVpugpKTQEvbbDEYkuWP9wXAE8g2pWoUDdYKfkYoP6gNkB5T8jeR9x9LwZ.png) - Click the "Continue with GitHub" button and you should automatically log in, if not simply give your GitHub username and password on the loaded page. ![Screenshot 2023-02-07 183409.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t76kVtAPHJ1KM3d1ogd3X2M8mTMJq35x7qENbtvD4Mo1pVi9KYh2DXQ9Pg86BcKrjCi.png) - Upon logging in you will be greeted by this window, click the "New Project" button there. ![Screenshot 2023-02-07 183848.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swfwHZiPbWgWDcHzDvkFMSTPfvBwnHhC1jt1m7fVNV23ddcaXpuNMGLTwEv7WzgsVd2.png) - There fill in the Name, Database Password, Region, and leave the pricing plan for free, you can use any name and password, it should look like this picture below. ![Screenshot 2023-02-07 184340.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swgMwGT9tWiv1iD5zwsKJppcntLHk7iGxr3D3krge65icP25AHCUx13F5SbkhbJN1KA.png) - Click "Create new project" and give it a minute or two to set up and refresh the page, you should see something like this ![Screenshot 2023-02-07 184809.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swgE9KjGbc5AoWHbTe15Q4A8sVQwMuxiSWjE4SK5E3E1rP6FV9StQPQuSFgzQSbC2RS.png) - Click the gear icon to get to the settings section, and, click the database option under Project Settings. ![Screenshot 2023-02-07 185124.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swgMuJ7ox6zYBSRd8eMAdJBgVwuuqEKS8gumzTkyb5qer24mAckN3vxNKK1h8eyC8U2.png) Here, you will find the Host value that we are looking for, click the "Copy" button to copy the value ![Screenshot 2023-02-07 185425.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t773SuXjU5pDibpTaeteWntc1FnK2NF4RAcTemN4sp1dPvtVJQZVqYsedjLV6EQh7Zz.png) - Go back to our codespace page and paste the value like this ![Screenshot 2023-02-07 185759.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t6zyTbPX6HzKbfy47sLEsNdPNJyDJSLCKNg9sV1mQSBaTCr7H36V352Js83hgTnR2Lo.png) -Press "Enter" and then it will ask for a Database Password. ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swa9LeuRNZLHqeLZH9QsmofpvKRDf7SFKTgaAL7apc7ixTJuzMANbC3sKuQdViTNbh3.png) Make sure you enter the password given while creating the database in Supabase and press "Enter", if everything went well it will run some code and in the end, you will see a message like this ![Screenshot 2023-02-08 191101.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t72wqffzJiH9ic4uhGdKdZRr9r1ucyDZc7GiWoAiTaySygh3sd1DoYk36s52E9ZpiFh.png) Congrats we successfully set up the project, all you now have to do is to start the server and edit the details as you please, to do that type `python manage.py runserver` in the command area and press "Enter". ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swbmq2yNSuHMUZWaYzFaEr8R7Vyz2bDtLqdJnpvA2NyEbtYR6nBXUYghkSVAs7fxTSg.png) It will start the webserver and you will get a pop-up like this image shown below, click the green button that says "Open in Browser" ![Screenshot 2023-02-08 191904.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t72p6NPLtWf6E5BoTDU19bzNfR32QUZ8s86AWtMJWNMHKd7NJjjAgQqiZCU9FGj4vXi.png) This will take you to your webpage, by default I've added my details to help you guys get a reference on what you could change in various sections, to change the photo, site name, and details in various sections go to the address bar and add "/admin" to that URL, check the reference image below ![Screenshot 2023-02-08 192457.png](https://files.peakd.com/file/peakd-hive/arunbiju969/Eo8KeczQxBjzv2cf2CsxewXoA7JfMShNAkBisgtLngAhRcmdvqR2YckdEYNRneGLVqS.png) See the "/admin" at the end of the URL, press go or "Enter" to got to the admin page, use `webadmin` as username and `pass@123` as password, and click log in. ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/Eo6BjRE1Uky7oE4sjyyPHUgwke8nSj8peENWsmF3Jf7sNJN7NZkjkvXnEAKvvhWNKTb.png) Once logged in you will see a section called "Homepage", there click "About" ![Screenshot 2023-02-08 193407.png](https://files.peakd.com/file/peakd-hive/arunbiju969/EoAS5GA6nAf4ghAYJ9VBHgRqWv8zvkwU5ZoAPaFbhKxux34S9oXH7Crz8a8zZmmamUn.png) Click "About Me" there ![Screenshot 2023-02-08 193651.png](https://files.peakd.com/file/peakd-hive/arunbiju969/EoCZNtPpZEnhgD7HUGL2GynDtA8PfDtcsuRBHV8mzKcAaXRzMMtqH4Jwm8rKpDZGxYC.png) Feel free to edit the details and change the image there by clicking the "Choose File" button in the profile photo section and click the "Save" button located at the right corner. ![Screenshot 2023-02-08 194748.png](https://files.peakd.com/file/peakd-hive/arunbiju969/EoCZVXxxcArnoKJfDdrraV5X139bP2GRyQigGpzmTqHEgU2aAA2R3upsBkt6wr2p5ML.png) You will get a message saying it changed successfully, now click the "VISIT SITE" button to view your change on the website. ![Screenshot 2023-02-08 195212.png](https://files.peakd.com/file/peakd-hive/arunbiju969/EoCYycNhjeWV3Pb8H3PzovTaay15b5vA1nN131vxdR5qEkZvQgWeyviQs9GwTTz9W3S.png) You will see that the website was changed with the details you provided. ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/Eo8KZ3rRHKjSUCgHHZdmhvCGuZYhbYRXZ4jcHsj4EDuTdsVrogcDc2kptKSgw3KpRwK.png) Similarly, go to the admin page and change other sections and play around to personalize the whole site, and after finishing the changes we need to push those changes, Note: Now, this is only needed if you changed an image in the website, modified text is saved directly to the supabase database. To update the changes go to the "Source Control" section by clicking this button as shown ![Screenshot 2023-02-10 170152.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swbZmjcrtjgvf9C4e8shc6bf77gsSwCg7awpKaSURgEqZELhphSJMWukjFUYfwo6V9F.png) Then click the green "commit" button ![Screenshot 2023-02-10 170536.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swcKB9fWS13Z6aRvRV8Zb3NYUQnxzcAMLRUZA7ac9CnyKmqSdxGNDDeKHLKjvo9uy9P.png) Then click "Yes" ![Screenshot 2023-02-10 170635.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swbrCqJKQpa2WvVRAcz4VYcFzRrhhTbDasKD8uNN7yUo8BF88jvpb2eKeNcFBwRSes6.png) In this page remove the "#" that is in front of the "new file" and click the "check" button, refer image. ![Screenshot 2023-02-10 170917.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swbmtics8ZaaaYmfYQ7bbvjsacGGEJPqoD9odQr7BiFeZEELb2uGvg7CMJMiuQBWAvL.png) Then click the green "Sync Changes" button and click "Ok", and you are done. ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23swbvyMpe9Z3ES2EvpmvV4AvhdSrFGLniBVbh1QQ34HCakEdC9SojVDNVPe6qKPZFCPz.png) Before moving to the next step we need to copy some values, for that go to the "Explorer" section and click the .env file there and select the whole content and copy it, we need this in the following steps while hosting ![Screenshot 2023-02-10 171734.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tRtCzEp7MaMCkUGN7uoNbnMdfaVQsTRcYKy135yV2JvSzGKgkFBNHEYjPGuFgjXXw5a.png) # Step 3 This is the last step, hosting our website on a server, we will use vercel to host our project, go to [vercel](https://vercel.com/dashboard) and click "Continue with Github" ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tkYscCgvM74RugFawkN1fgzviErQfbvCsVKr2tcc3oFWpfELKYecwemi2Tp9Xi93FZG.png) You will load into the following page, here make sure you are in the "Overview" tab and if you are not there already click your name at the top that says "Hobby" near it, and click "Add New" then "Project" from the dropdown. ![Screenshot 2023-02-10 162737.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23w2aHokQzeCAunYSN6K6ZxYbG3XQVkhPBSrHhxebWrhng5JeRsA9c75Lk4PmaamS9y7S.png) That will take you to this page, where you will see "webprofile" and an "import" button, click the "import" button ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23wBe7yEZLFcT8ipF5TYayw13jKdMXyLGgbHKDaN8yUGjEhU6ajmj4oxUsKx8XnHr94Ki.png) On the next page expand the "Environment Variable" section and paste the entire content of the "'env" file that we copied in the end of the last step ![Screenshot 2023-02-10 164319.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tkk3Wy6aw2miDAdAKUJsoddoP2HoLnBCYd3Y6aacCR7XDTNUv8RgERcmoTjxTMyqtxK.png) The result should look like the image shown below ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23uEssftAjcXrAKakotQsxq2LDr5VCqE1TZ2ykc22DDAxv1MCrDDpUcXSM3YfLZpn8k71.png) Finally, click "Deploy" and wait a minute for the deployment to finish, and you should see a "Congratulations" page and we are done hosting, there click the "Continue to Dashboard" button ![image.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23tbGazmcxSYcHirGp91XspSWFPrgphBEeyGf1SszuL3MrHMfoQTBaneus84GixtWePBY.png) Here, under "Domains" you will get the link to your personal website, if you made it this far you are awesome, enjoy your website ![Screenshot 2023-02-10 172713.png](https://files.peakd.com/file/peakd-hive/arunbiju969/23t756ZdZyaaVhRaLJzd3X2gTkiGEFkoK5HaeS92weokKTx9M5dLMRpASKUjSE6r41ui8.png) I will be ending this post here cause it's getting a bit too long, I will write a new one that explains about customizing and about optimizing the webpage, if you ran into any issue feel free to comment and I'll be happy to help, Thank you.

arunbiju969

Follow, be first to know