Hosting a html+css+js webpage on statichost.eu using a private github repository

Note

Hi, my name is Roman and I am a hobbyist at web hosting. I might sometime not use the correct wording here or state some contradicting things.

Please note that I am not advertising any of the brands below. I mention them only so you can follow my steps. There might be plenty of other services.

The objective

I created a webpage using bootstrap (html+css+JavaScript). There is no build process needed here. I wanted to host this webpage but being GDPR-compliant. The hoster should be in the European Union. And happily I found statichost. Here I explain what I did to successfully have my personal webpage up and running.

Webpage

The webpage was built using a bootstrap template and only displays static content. It is ready to run and does not need a build process. It contains only plain html+css+JavaScript.

Source repository

I manage my source on github. There is a comprehensive how to get started page. The repostitory I am using is private. So there are some additional steps I had to take (see below).

Hosting

The hoster is statichost. So I can be GDPR-compliant.

Domain

I bought and registered my domain at a German provider. I guess most providers will do.

A step by step guide

Here I leave out the part of webpage creation and the part of managing it on github, since this is not the main objective of this post. I am leaving out my trial and error (I am a hobbyist :-)) here as well, which where very quickly solved by Eric from statichost. He was very responsive.

Config for statichost

In the root folder of the webpage you have to provide a config file to tell statichost build process what to do. The file is called statichost.yml. The basic structure of my webpage folder looks like this, where my-page is the root of the webpage:

* my-page/
    * css/
    * fonts/
    * img/
    * js/
    * index.html
    * statichost.yml

Since the page does not need any build process, there is no build configuration here. However, since I am using a custom domain I have to configure it as described in the statichost documentation. Let’s say the domain is mypage.com, then the following would be the configuration:

# Public directory points to the webpage root
# folder and, in this case, is a dot using 
# the github repository root
public: .

# This configures the custom domain
domains:
    # Primary domain
    - www.mypage.com
    # Domains that redirect to the primary
    - mypage.com

Lines starting with # are comments. You can leave them out.

Additionally to this, I had to configure my domain hosters site. As described in the statichost documentation, I added a CNAME DNS record to sites.statichost.eu.

Eric from statichost told me to add an A record with the IP Address 95.217.26.94 to my DNS records as well to use the root domain as described in the docs.

Signing up to statichost

First you have to sign up:

1. go to statichost
2. click the Sign up button in the top right corner
3. enter your email address
4. look for the email with the link to log in

There is no user password here. All is done via the magic email link.

Adding a webpage

Then you have to add your webpage after logging in:

1. click the Add site button
2. enter your github repository and a name for your page
3. click the Build now button

Since I am using a private github repository, the build was not successful. However, the build log gave me the public key I had to add to the github repository.

Adding the public key to github

1. go to your github (or other git) repository
2. click on Settings of the repository menu
   • the menu with Code, Issues, …, Insights, Settings
   • not the github settings of your account
3. at the left menu click Deploy keys
4. at the top right click Add deploy key
5. fill in a title (any is fine) and the key
6. click Add key

Now you should be able to build your site at statichost.

Build your site (again)

1. log into your page at statichost
2. at the menu on your left click Builds
3. at the next page click Build now

Automatic deployment from github

If you prefer your page being automatically built/uploaded after you committed changes to github you can do so by configuring a webhook. This is described in the statichost documentation. For me this is the way I do it. I do some changes on my page locally. Then I commit it to github and a few seconds later the fully automated process is finished and my webpage is up to date.

Final note

A big thank to statichost and especially to Eric.