you first create a new account or sign in with an existing one.
Now you make your GitHub user known to the locally installed Git by running the commands `git config --global user.name "YourName"` and `git config --global user.email "YourEmail@example.com"`.
For that you need a command line, such as the Command Prompt (Windows), the Terminal (Mac) or a shell (Linux). Fortunately the command line, also called terminal, is integrated into VSCode.
The terminal window appears below the editor and lets you enter commands directly. Adapt the two configuration commands mentioned above by inserting your name and your email address, confirming each with the Enter key.
Once that is done, you can start the process of publishing your repository.
You can confirm the following prompt to allow access to your GitHub account.
Now your browser should open and show the GitHub page where you can authorise the access. Sign in here with the GitHub account you created earlier.
Once that has happened, you should see a prompt in the upper area of the VSCode screen asking for the desired name of your repository. You can accept the suggested name or enter your own name for your repository. You also have to set the repository's visibility to public (Publish to GitHub public repository) here so that your website is accessible to everyone. Then confirm your selection to continue.
Normally your repository should now have been created and published successfully. Corresponding messages in VSCode confirm this. You can now use the generated URL to open your repository in GitHub in the browser. VSCode also asks whether it should regularly check for changes in the repository, which can't hurt.
If you followed the link out of curiosity, your repository on GitHub should now look like this:
Ok, admittedly, all of that sounds a bit technical, but don't worry – with a little practice all of this will quickly feel familiar to you. And above all: all the previous steps were one-off, i.e. editing your website is now almost "child's play".
## On to the content
So far our repository contains only a README file, which serves as a placeholder. What is still missing is the content of your future website, which we will create with an `index.html` file.
### index.html - The foundation of your website
In the next step we add an `index.html` file to create the content of our website. So create this file with the HTML content you want, or use my example code here:
```html
Meine erste Website
Willkommen auf meiner Website!
Dies ist ein Beispielinhalt für deine erste GitHub Pages-Website.
Erstelle deine eigene Website mit nur wenigen Schritten und teile sie mit der Welt!
```
Make sure you save the changes, which also becomes visible by the number 1 lighting up on the left side of VSCode in the 3rd icon (Git).
And at this point the advantage of Git really becomes clear. While you can view the index.html file you created locally in your browser (just open it via your operating system's file manager), it is not yet in your repository. That means you can make all your changes at leisure over days, and you decide yourself when you want to publish.
And to publish then, we switch to the left icon bar for Git (3rd icon) with one click. Then we enter a so-called commit message that documents our changes, e.g. "My first commit.". Then we click the "Commit" button.
In the dialog window that appears once in the following steps, choose "always" to automate future confirmations and simplify the workflow. This saves you time and lets you focus on what matters.
Now our change is recorded as shared, but still not published (synced). We catch up on that by clicking the "Sync Changes" button to upload the changes to the remote repository.
In the following dialog window choose "OK, Don't Show Again" to automate future confirmations and further simplify the workflow.
That synchronises the local state with the remote repository.
**You will repeat these last actions again and again in the future. So for every file change: save it, "commit" the change, then sync.**
## Activating GitHub Pages
Ok, you have now created a rudimentary website and synchronised it with GitHub. The last step to turn it into a real website is activating GitHub Pages for your repository.
To activate GitHub Pages, go to your repository's settings, scroll down to "Pages" and select the branch that should serve as the source for the website ("main"). Save the settings, and your website is published.
Tada! Your website is now live! You can find the link in the right-hand area of your repository's start page, or enter it manually in your browser. The pattern is always the same:
in my example, then:
## Why is all of this free? Where's the catch?
Git is an open-source versioning system written by Linus Torvalds (the "inventor of the operating system Linux") more or less out of frustration over the lack of alternatives. Open source means that anyone can inspect, use and modify the code. The business model behind it consists of consulting services and support.
The GitHub platform and its associated services now belong to the Microsoft Corporation and are only partly open source. Microsoft offers the basic services for free in order to make money with extended services for professional use.
Visual Studio Code was likewise developed by Microsoft as open-source software. It is considered a lightweight alternative to the paid Visual Studio (without "Code" at the end).
The Bootstrap framework comes from Twitter (today X), originating as a byproduct of the development of Twitter itself, and was later published as open source by the team. Similar to Google's Material Design, such popular frameworks define the design guidelines for modern web applications.
All of the ones mentioned have developed over a period of a few to many years into "quasi-standards" in web development and are used by millions of people.
The catch is that open source is free, but often requires technical knowledge and initiative in order to be used effectively.
## Conclusion
With a little patience and work you can achieve impressive results as a beginner too and build your own website professionally!
If you need help creating the HTML content, it is worth looking at the well-structured tutorials at W3Schools , or using a framework like Bootstrap .
As soon as your website contains more than the start page and also dynamic content, you should consider using a static site generator framework or a content management system (CMS) to make development easier. Check this out: .
For questions about the article directly, please use the comment function.
---
## Navigation
- Parent: [How-To's](https://niklas-stephan.de/en/wiki/projects/how-tos.md)
- Previous: [Abacus in VSCode](https://niklas-stephan.de/en/wiki/projects/how-tos/abacus-in-vscode.md)