Instructions to set up a similar website

1. Domain name

You can register/"buy"/aquire a domain name either at a registry or at a registrar.

Examples for a registry: nominet UK, dns.pl, denic, …

Examples for a registrar: List of registrars authorized to register .de domains, among other TLDs., List of registrars authorized to register .pl domains, among other TLDs., List of registrars authorized to register .uk domains, among other TLDs. EuroDNS, ...
TLD means Top Level Domain and an example for a TLD is .eu

Registering domains works similar to usual "web shopping". Prices to register a domain through a registrar vary mostly between 1€ and 20€ per a domain name per year.

Voilà, now you're a registrant of a domain.

2. Source code example for the website

You can save the following source code as an HTML file on your computer.

<main>
    <section>
        <h1>[Acknowledgements/acknowledgments of/for/∅ human rights] and [Human Rights acknowledgments/acknowledgements]</h1>
        <script>
            const TEXT_CONTENT = 'Acknowledgements/acknowledgments of/for/∅ human rights';
            const TIMES = [ // Dates may never be in the future
                {
                    from: Date.parse("2023-11-24T15:11:05Z"),
                    frequencyMS: 1,
                    placeholderText: "Human [characteristics/specifications/parameters]",
                },
            ]
            const DEFAULT_ENTRIES_PER_PAGE = 10;
            const MAX_ENTRIES = 84_482_267;
        </script>
        <p id="not-exist-message">This page does not exist. Go to <a href="?page=1">first page</a>.</p>
        <ol id="bekenntnis-list"></ol>
        <div id="navigation">
            <legend>
                Number of acknowledgements/acknowledgments/bekenntnisse/entries/items displayed on the home page
                <input id="entriesPerPageInput" type="number" value="4" />
                <button id="changeEntriesPerPage">Submit</button>
            </legend>
            <ul>
                <span style="flex-grow: 1"></span>
                <!-- <li id="page-link-start"><a href="">start</a></li> -->
                <li id="page-link-prev"><a href="">start</a></li>
                <li id="page-link-first"><a href="">1</a></li>
                <span id="start-dots">,…,</span>
                <li id="page-link-current"><a href="">1</a></li>
                <span id="end-dots">,…,</span>
                <li id="page-link-last"><a href="">?</a></li>
                <li id="page-link-next"><a href="">end</a></li>
                <!-- <li id="page-link-end"><a href="">end</a></li> -->
            </ul>
        </div>
        <p style="margin-top: 4rem">
            Number of acknowledgements: <a href="https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244">84,482,267</a> — Population of Federal Republic of Germany. Source: <a href="https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244">https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244</a>
        </p>
        <style>
            #bekenntnis-list li {
                margin-left: 4em;
                margin-bottom: 1em;
            }

            #bekenntnis-list li > span + span {
                margin-left: 1rem;
            }

            #bekenntnis-list li span:last-child {
                vertical-align: top;
                border-bottom: thin solid black;
                width: 30rem;
                display: inline-block
            }

            #bekenntnis-list {
                list-style-type: none;
                padding-left: 0;
            }

            #bekenntnis-list + #navigation {
                margin-top: 4rem;
            }

            #navigation ul {
                list-style-type: none;
                display: flex;
                flex-direction: row;
                gap: 1em;
            }

            #navigation a {
                text-decoration: none;
            }

            #navigation li#page-link-current {
                border: thin solid black;
                padding-inline: 0.1rem;
            }

            #navigation #page-link-current {
                background-color: rgba(240, 128, 128, 0.356);
            }

            .listcomment {
                position: relative;
            }
            .listcomment span {
                position: absolute;
                left: -35px;
            }

            footer {
                border-top: thin solid black;
                padding: 0.4rem;
            }
        </style>
        <div>
            <h2 style="margin-top: 7rem; margin-bottom: 0.2rem">Human Rights:</h2>
            <ul>
                <li>
                    <a href="https://www.bundestag.de/gg/grundrechte">https://www.bundestag.de/gg/grundrechte</a>
                        ;
                    <a href="https://www.bundestag.de/gg/grundrechte">Grundrechte</a>
                </li>
                <li>
                    <a href="https://www.un.org/en/about-us/universal-declaration-of-human-rights">https://www.un.org/en/about-us/universal-declaration-of-human-rights</a>
                        ; 
                    <a href="https://www.un.org/en/about-us/universal-declaration-of-human-rights">Universal Declaration of Human Rights</a>
                        (10.12.1948)
                </li>
                <li>
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights">https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights</a>
                        ; 
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights">International Covenant on Civil and Political Rights</a>
                        (16.12.)
                </li>
                <li>
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights">https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights</a>
                        ; 
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights">International Covenant on Economic, Social and Cultural Rights</a>
                        (16.12.)
                </li>
                <li>
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading</a>
                        ; 
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading">Convention against Torture and Other Cruel, Inhuman or Degrading Treatment or Punishment</a>
                </li>
                <li>
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women</a>
                        ; 
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women">Convention on the Elimination of All Forms of Discrimination against Women New York, 18 December 1979</a>
                </li>
                <li>
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child</a>
                        ; 
                    <a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child">Convention on the Rights of the Child</a>
                </li>
                <li>
                    <a href="https://www.echr.coe.int/documents/d/echr/Convention_ENG">https://www.echr.coe.int/documents/d/echr/Convention_ENG</a>
                        ; 
                    <a href="https://www.echr.coe.int/documents/d/echr/Convention_ENG">European Convention on Human Right</a>
                </li>
                <li>
                    <a href="https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html">Convention on the Rights of Persons with Disabilities</a>
                    :
                    <a href="https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html">https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html</a>
                </li>
                <li>…</li>
                <li>
                    <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT">https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT</a>
                        ; 
                    <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT">Charter of Fundamental Rights of the European Union</a>
                </li>
                <li>…</li>
                <li>
                    <a style="color: red" href="https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm">https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm</a>
                        ;
                    <a style="color: red" href="https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm">Geneva Conventions</a>
                </li>
            </ul>
        </div>
        <script>
            const NOW = Date.now();

            function computeTotalEntries() {
                let totalNumberOfEntries = 0
                for (let i = 0; i < TIMES.length; i++) {
                    const endTime = TIMES.at(i + 1)?.from ?? NOW;
                    totalNumberOfEntries += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
                }
                if (MAX_ENTRIES < totalNumberOfEntries) {
                    return MAX_ENTRIES;
                }
                return totalNumberOfEntries;
            }

            function getPlaceholderTextForIndex(index) {
                let currentMaxIndex = 0;
                for (let i = 0; i < TIMES.length; i++) {
                    const endTime = TIMES.at(i + 1)?.from ?? NOW;
                    currentMaxIndex += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
                    if (currentMaxIndex > index) {
                        return TIMES.at(i).placeholderText;
                    }
                }
            }

            function getTimeOfIndex(index) {
                let currentMaxIndex = 0
                let currentStartIndex = 0
                for (let i = 0; i < TIMES.length; i++) {
                    const endTime = TIMES.at(i + 1)?.from ?? NOW;
                    currentStartIndex = currentMaxIndex
                    currentMaxIndex += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
                    // console.debug({
                    //     index,
                    //     endTime,
                    //     currentStartIndex,
                    //     currentMaxIndex
                    // })
                    if (currentMaxIndex > index) {
                        return new Date(TIMES.at(i).from + (index - currentStartIndex) * TIMES.at(i).frequencyMS);
                    }
                }
                console.error('That should not happen')
            }

            const parsedUrl = new URL(window.location.href);
            const entriesPerPage = (parsedUrl.searchParams.get("entriesPerPage") ?? 10) * 1;

            function getPageNumber() {
                const queryParam = parsedUrl.searchParams.get("page")
                if (!queryParam) {
                    return 10
                }
                if (queryParam === 'last') {
                    return LAST_PAGE
                }
                return queryParam * 1
            }

            const TOTAL_ENTRIES = computeTotalEntries()
            const LAST_PAGE = Math.ceil(TOTAL_ENTRIES / entriesPerPage)
            const pageNumber = getPageNumber()

            function withLeadingZero(number) {
                return String(number).padStart(2, "0")
            }

            function addListEntry(index) {
                const container = document.createElement('li');
                const dateContainer = document.createElement('span');
                const entry_time = getTimeOfIndex(index)
                const dateString = `${entry_time.getFullYear()}-${withLeadingZero(entry_time.getMonth() + 1)}-${withLeadingZero(entry_time.getDate())} ${withLeadingZero(entry_time.getHours())}:${withLeadingZero(entry_time.getMinutes())}:${withLeadingZero(entry_time.getSeconds())}`
                dateContainer.textContent = dateString
                const contentContainer = document.createElement('span');
                contentContainer.textContent = TEXT_CONTENT
                const placeholderContainer = document.createElement('span');

                placeholderContainer.textContent = getPlaceholderTextForIndex(index)

                const indexContainer = document.createElement('span');
                indexContainer.textContent = (index + 1) + "."
                
                container.appendChild(indexContainer)
                container.appendChild(dateContainer)
                container.appendChild(contentContainer)
                container.appendChild(placeholderContainer)
                document.querySelector('#bekenntnis-list').append(container);
            }

            if (parsedUrl.searchParams.get("page") === null) {
                window.location.href = "?page=1"
            }

            if (pageNumber < 1 || pageNumber > LAST_PAGE) {
                document.querySelector('#bekenntnis-list').style.display = 'none';
                document.querySelector('#navigation').style.display = 'none';
            } else {
                document.querySelector('#not-exist-message').style.display = 'none';
            }

            const START_INDEX = ((pageNumber - 1) * entriesPerPage);
            document.querySelector('#bekenntnis-list').start = 1;

            const entriesLeftToDisplay = TOTAL_ENTRIES - ((pageNumber - 1) * entriesPerPage);
            const entriesOnPage = Math.min(entriesLeftToDisplay, entriesPerPage);

            for (let i = 0; i < entriesOnPage; i++) {
                addListEntry(START_INDEX + i)
            }

            const start = document.querySelector('#page-link-first a')
            start.href = `?page=${1}`;
            // start.textContent = `${1}`;

            if (pageNumber <= 1) {
                document.querySelector('#page-link-prev').style.display = 'none';
                document.querySelector('#page-link-first').style.display = 'none';
                document.querySelector('#start-dots').style.display = 'none';
            } else {
                const prev = document.querySelector('#page-link-prev a')
                prev.href = `?page=${pageNumber - 1}`;
                // prev.textContent = `←`;
            }

            const current = document.querySelector('#page-link-current a')
            current.href = `?page=${pageNumber}`;
            current.textContent = `${pageNumber}`;

            if (pageNumber >= LAST_PAGE) {
                document.querySelector('#page-link-next').style.display = 'none';
                document.querySelector('#page-link-last').style.display = 'none';
                document.querySelector('#end-dots').style.display = 'none';
            } else {
                const next = document.querySelector('#page-link-next a')
                next.href = `?page=${pageNumber + 1}`;
                // next.textContent = `→`;
            }

            const end = document.querySelector('#page-link-last a')
            end.href = `?page=${LAST_PAGE}`;
            end.textContent = `${LAST_PAGE}`;


            const entriesPerPageInput = document.querySelector('#entriesPerPageInput')
            entriesPerPageInput.value = entriesPerPage

            const changeEntriesPerPageButton = document.querySelector('#changeEntriesPerPage')
            changeEntriesPerPageButton.addEventListener('click', () => {
                window.location.href = `?page=${pageNumber}&entriesPerPage=${entriesPerPageInput.value}`
            })

            console.log({
                TOTAL_ENTRIES,
                DEFAULT_ENTRIES_PER_PAGE,
                entriesPerPage,
                LAST_PAGE,
                pageNumber,
                entriesLeftToDisplay,
                entriesOnPage
            });
        </script>
    </section>
</main>
            

3. Web Hosting

Now we need to point the domain to a computer that delivers ("serves") that HTML file to clients (all computers accessing the website). To do that we need to rent a computer ("server") which is always online that we can point the domain to. Such a computer is rented from a "web hoster". Now that you have rented a server we need to upload the HTML from the previous step to that server and configure it so that it always delivers the HTML file on all requests.

4. Admire your creation :)

Voilà, now you have your own website displayed under a domain name that you are the registrant of.