In this article, I will show you how to create a website with Github based on your own HTML extremely easy. The best part of this article is that you just need to use your browser. Thanks to a new feature on GitHub named Github pagesbut we can do this.
Join the channel Telegram belong to Anonyviet 👉 Link 👈 |
Your site will not be built on available platforms or samples. I will use HTML to build anything, from printing your name, to responding to animations and making a cat flying by using all the tricks on the Internet. Your creativity has no limit.
This tutorial assumes that you do not have any knowledge about the website. But I hope this will be the beginning of your web development journey.
Just 15 minutes, you will have a website like this. I know it’s very simple but you can customize your website in the future.
Create a website with github
First, please visit Github and create accounts. After creating, click “New Repository” In github and create a new project. I call this new repo is Create website in 15 minute.
When you create a repo, remember to accumulate “Initialize this repository with a readme”. If you are not like that, you will have to initialize the project on your computer and then push the code on the device to GitHub. If you do not know how to use github, you should Download free course on how to use git & github On anonyviet to see it
Create an index.html file
To create an index file as well as the website structure, you need to have basic knowledge about HTML. Anonyviet also shared HTML course Let you study at home.
Our all files will only have HTML file. It is important that our file must be named Index.HTML. This is because GitHub searches a file called Index.html to use for our site. So we will create this file right away, just click on the word “Create new file” is okay.Simple, followed by the new file is Index.html and enter the code below. The funny things are placed in the <> called HTML card. HTML cards usually have open cards <> and closed cards> like this. And everything between the two cards is called the content of the card.
Observing the code, we see there are two words Anonyviet. The first one in head, is in the tag
And the second is in the body, in the tag là thẻ tiêu đề 1, thường dùng để làm tiêu đề cho bài viết, còn tag
is the title of the website, displayed as the title of the tab in the browser.
After you have finished typing the code above, you need to save this file. In GitHub, we must press the “Commit” button to save the file. Commit helps you track the versions on your file, which is quite convenient because we can manage the file much easier. Therefore, you can enter the commit information to explain the changes you made for your file and then click “Commit New File”.
Turn on GitHub Pages
The next thing to make is to turn on GitHub Pages and your site will be available on the Internet right away. To turn on GitHub Pages, first in the tab “Settings” In your repo and roll down the part GitHub Pages. Select “Master Branch” in the part Source.
After doing that, Github will create a link for your website. And your site is already on the internet.
Additional decoration
After we have successfully run the web, we will decorate a little to make the web look more eye -catching. With some basic CSS lines, you can make Anonyviet more prominent.
We have just changed the background to black, giving the word Anonyviet larger and turning that arrow into yellow (#EEEE33 this is called Color Code). You can choose your favorite color Hex code by typing “CSS Color Picker” into Google Search.
To edit the file, you just need to click on the index.html file and click on the pencil icon on the right to edit. Finally press “Commit Changes” To save the file.
Done, I just showed you how to create a personal website with GitHub within 15 minutes. This will start the journey of your web development. In the coming, I will public code web front-end creates matrix effects for you to use. In the meantime, you can also use Website code introduces yourself aboutme2 okay.
Closing the lesson, anyone who is studying the web and back-end, the advice I should not abuse these ways to create a fast web. It is best to learn from the beginning to know how to create a web, a few steps, what to learn, understand how the web and the server work.
Frequently asked questions
What knowledge do I need to follow this guide?
This guide is designed for even those who do not have knowledge about the website. However, the basic knowledge of HTML will help you understand more.
What is GitHub Pages and how does it work?
Github Pages is a service of GitHub that allows you to create a website directly from the archive on GitHub. It uses the file `index.html` in your archive to display the website.
If I have an error, where can I find support?
The article has provided links to HTML course and using Git/Github to support you. You can also search for information on GitHub’s support community.