Tech

Instructions: Host homepage at Github


You don’t need a content management system for simple information on the Internet – and you don’t have to spend money for it. If you only want to publish a little information on the web, you can use a simple alternative.

Small organizations, clubs or private individuals often create websites that only contain opening times, address, directions or event dates. You don’t need Wordpress for this, static HTML pages are sufficient. This also offers maximum security, as only websites that are dynamically generated with PHP scripts can be attacked. Static HTML pages can be used by any web host. There is a free offer at

Github
. Github is primarily aimed at open source developers, but is suitable for any type of website including blogs. However, the size of the website must not exceed one GB and purely commercial use is not permitted.

Simple websites at Github

Github is a service for developers who want to publish and share the source code of their projects. A website can also be set up, which can then be accessed via the address

https: //[Benutzername].github.io

is attainable. In the simplest case, this consists of a few text files into which format instructions for headings, boldings or lists can be incorporated. Markdown is used, which is easy to learn with its minimal syntax. If you have knowledge of HTML and CSS, you can also upload HTML files to Github. However, it is easier to use ready-made themes and adapt them to your own needs. Go to https://github.com and create a user account after clicking on “Sign up”.

The username you choose is part of your Github URLs. So choose it carefully. After logging in, click on “Create a repository”. Under “Repository name” tap

one. The placeholder “[Benutzer]“Replace with your actual github username. Put a tick in front of “Initialize this repository with a README” and click on “Create repository”.

Edit the “README.md” file after clicking on the pencil symbol and include a sample text. An overview of the Markdown commands that can be used can be found under

https://github.github.com/gfm
. The following lines create an HTML document with a heading 1 (

), a heading 2 (

) and a text with the distinction “fat” ().

Pay attention to the spaces after “#” and “##”. You can see a preview of the page after clicking on “Preview changes”. Save the page by clicking on “Commit Changes”.

It may take a while for Github to create the website. When the process is complete, you will see the link “github-pages” at the bottom right under “Environment”. Click on it to find out when the content was published. Then call

https: //[Benutzer].github.io

on. Github rebuilds the website after changing and saving a file. There is a limit of ten changes per hour.

Reading tip:

The best free cloud storage from Germany

Embed images in a website

Formatting with Markdown: The documentation https://github.github.com/gfm explains the Markdown syntax, provides tips and numerous examples for the design of the web pages.

Enlarge

Formatting with Markdown: The documentation https://github.github.com/gfm explains the Markdown syntax, provides tips and numerous examples for the design of the web pages.

If you want images to appear on the website, upload them first. For a better overview, you should put the pictures in a separate folder. Click on “Add File -› Create New File “. Then type in images / .gitkeep and click on” Commit new file “. The folder” images “opens and you click on” Add file – ›Upload files” Drag the files you want from the file manager to the highlighted area.

Then open “Readme.md” for editing. For a picture put a line in the shape

![Alt-Text](images/EinBild.jpg "Bild-Titel")

one. The path to the image is relative to the location of “Readme.md”. In our example, the “EinBild.jpg” file is in the “images” folder.

Use HTML alongside Markdown

Github also processes HTML in a Markdown file. If necessary, an image can be integrated using the “img” tag and the size of the display can be changed:

Alt text

Make sure that there is no space before the final “/>”. By specifying “width =”, the browser reduces the displayed image size to 250 pixels. It is also possible to flow text around images using HTML code:

Lorem ipsum

Design more complex websites with themes

More themes: You can find numerous Jekyll themes at https://jamstackthemes.dev/. Transfer the files to your own repository and make the required changes.

Enlarge

More themes: You can find numerous Jekyll themes at https://jamstackthemes.dev/. Transfer the files to your own repository and make the required changes.

Github generates the websites with

Jekyll
, a generator for static web pages. The tool offers numerous options and can also be used without a Github on the Linux PC (see box). Using ready-made templates, you can create websites for every need, such as portfolios or blogs. The configuration is done via “Settings” and click on “Choose a theme” under “GitHub Pages”.

Based on the preview you decide on a theme and click on “Select Theme”. Anyone who does not find anything here will be happy

https://jamstackthemes.dev/ssg/jekyll
. There are several hundred themes to choose from, including a live demo. Clicking on “Github” will take you to the associated Github repository, which provides information on installation and configuration. It is most flexible to transfer the theme repository to your own Github instance by clicking on “Fork”.

You can then adjust the files as you wish, but this requires a certain amount of training. Change the name of the repository via “Settings” to “[Benutzer].github.io “.

Tags

Related Articles

Back to top button
Close
Close