If you have a website idea but don’t know where to start or what tools to use, then this blog post is for you! We’ll share with you the steps it takes to create a website from start to finish using Bootstrap Templates. From the design process, learning how HTML and CSS work, setting up your first site using Bootstrap Templates and customizing your template into something new we’ll cover all of that and more in this informative article.
If you’ve never created an online presence before and want a step-by-step guide on exactly how to do it (and do it right), read on!
The most important thing when creating any website is good content. Well-written, exciting content will trick people into visiting your website and keep them there for longer. Your content is what’s going to make you stand out from the rest of the crowd, and it’s up to you to make it amazing. The next most important thing is speed. It should take as little time as possible for a visitor to get where they want on your website and have a good experience there.
So, make sure you have a website content writer, who can explain your services or what your business does in simple words. Now, move on to starting your first website with bootstrap templates.
Step by Step guide on creating a website from start to end with Bootstrap themes on Github
Step 1: Make the GitHub account
The very first step you’ll have to do is create a GitHub account. It is not that hard. Open the website, and go for the signup option. Add the email account, set your password, verify the account and it is done. Download GitHub for desktop for free to move ahead with website building using the Bootstrap theme.
Step 2: Login and Create New Repository
Once the desktop application is downloaded, log in with your credentials. Now make a New Repository. How to do it? Go to Files > New Repository. Here you’ll have to add the Repository name, and description and set the local path. Select the folder where you want to store your website files.
Step 3: Choose the Bootstrap theme or template
Now, it’s time to select the bootstrap theme or template for your website. Log on to pxdraft’s marketplace, and browse through the bootstrap website theme options available. Select the theme or template that goes well with your business niche and its nature.
Step 4: Download the theme
As soon as you select the bootstrap theme for your website, download it. Do read all the details regarding the theme you download and the support you’ll be provided if something goes up and down.
Step 5: Unzip and upload the theme files
The next step is to unzip the theme file and upload it on GitHub. Check all the files are editable and in HTML and CSS form. Then move the files to the repository you created. Don’t move the entire folder, just the files from it.
Step 6: Edit theme files
This step is optional if you are satisfied with the design and don’t need to make changes. If you need to do some changes. Open the index.html file in your favorite code editor and make the changes. This is the step where you’ll need the knowledge of HTML and CSS to edit the theme and make it as per your requirement.
Step 7: Commit and push the modified files
If you have done editing in the theme file. Once again, you’ll have to follow this step as well. If not, there will be no need. Now, how to commit and push the modified files?
The modified files are on your PC’s local storage, so the system will automatically detect the changes made. You have to push these files, and for that, you’ll have to add a commit message in the application. You can also add a description if you want to! Then the last step is to click on the button “Commit to Master.”
These won’t make changes. So, the next step is to click on Push origin at the top of the screen. After that, you will see the changes made to the website. Verify for the same in your Repository. There’ll be a timestamp with a commit message on the files you made changes.
Step 8: Do the GitHub pages settings
This step will publish your website. Go to settings and scroll down till you see the GitHub Pages. Turn on the publishing to GitHub Pages and then, set the file to /root as the files will be in the root directory.
Step 9: Merge the Files Into the gh-pages Branch
While you are using GitHub for publishing a website, the gh-pages are the ones that are hosted. So, you’ll have to merge the master files to the gh-pages branch. It’s a no-brainer, let us help you do that quickly. Before that, you will have to check if there’s a branch of gh-pages if yes, you are good to go. However, if not, create a new branch, and name it gh-pages.
Once that is done, you have to click on the New pull request button and your base branch should be master at that time. After clicking, a dialogue box will open and you’ll see the comparison. Set the base to gh-pages and compare will have a master. Then after you will see a message able to merge with a tick mark in green color.
After that, all you have to do is click on create pull request. As soon as that is done, you will see a dialogue box with a message, “This branch has no conflicts with the base branch.” Once you see that, click on the Merge pull request.
With this, you have successfully merged the branches, and now, the gh-pages branch will be identical to the master one. It will take a few minutes for the changes to render on your live website. Verify the changes, and you are done. Also, the GitHub pages will serve your files to a website located at username.github.io/repository-name.
Wrapping Up:
So, this is how you create a website from scratch using Bootstrap themes in GitHub. We hope this article helped you in publishing your very first site effortlessly. Here at pxdraft, our developers are trying their best to give you the best solution for your website design needs. Check our available Bootstrap themes you will get the one you like, and if not, contact us for customization. For more tips and tricks on how to build a website using bootstrap themes, visit the blog section of pxdraft.
Leave a Reply