Nimipalvelin ja nettisivut.
Alkuhuomiot
Omistan isakoff.fi ja iskff.fi domainit. Tekohetkellä ovat osana domainkeskuksen webhotellipakettia joka yhdistetty toiminimeni toimintaan.
Eli tämän läksyn tavoitteena on tehdä tehdä upcloudin ostetulle VPS palvelimelle internetsivut käyttäen perus HTML, CSS ja javascriptiä. Nimipalvelun ja ohjauksen on toimittava. Käytetään kahta A ohjausta ja luodaan h.iskff.fi , sekä hh.isakoff.fi. Meillä perheen kesken käytössä oleva isakoff.fi ohjaa jo tyhjälle sivulle joka ohjaa perheemme muillekin sivuille.
Nyt kertauksena. Upcloudin ipv4 osoite on 94.237.39.181.
Tämä tulevan sivuston päätarkoitus on laajemminkin osoittaa oppimiani kokonaisuuksia, joten haluan, että kokonaisuus toimii natiivisti omissa järjestelmissäni. En halua luottaa välissä virtualisoituihin ympäristöihin.
Pääkoneena itse käytän mac os käyttöjärjestelmää, joten haluan myös käyttää suoraan yhteyttä mäkin natiivilla bash-pohjaisella päätteellä (iterm). Eli mukana myös Mac os pakettienhallintaan liittyvää tekstiä. Laitan tämän kokonaisuuden loppuun.
Jatkossa tavoite on asentaa järkevämpi push järjestelmä tuonne, mutta rsync toimikoot siihen asti.
Nimihotellista Cpanel ja luodaan A yhteydet.
A on ipv4 pohjainen yhteyskaista jossa nimipalvelin ohajataan ip numeroituun ipv4 osoitteeseen.
AAAA on vastaava ipv6 osoitteeseen joka tavoitteena tehdä toimivaksi myöhemmässä vaiheessa.
CNET on ohjaus nimipalvelimen sisällä. Esimerkiksi kalle.sivusto.fi ohjaa suoraan sivusto.fi.
Nyt luodaan kuitenkin suorat A ohjaukset h.iskff.fi ja hh.isakoff.fi. Cnet ohjausta ei luoda väliin, koska isakoff.fi on jo perheeni käytössä muuhun.
Kirjaudun hotellini cpaneliin ja lisään DNS merkinnät.
hh.isakoff.fi. TTL=600 A 94.237.39.181
h.iskff.fi TTL=600 A 94.237.39.181TTL on kuinka usein merkintä tarkastetaan hakupalvelimielta sekunteina. Eli laitetaan 10-minuutin välein. Ja 94.237.39.181 on palvelimeni suora ipv4 osoite.
dig h.iskff.fiTarkastaa toimivuuden.
Virtual based palvelimen nimi
Tämän jälkeen siirsin palvelimeni SSH avaimet suoraan mac os käyttäjäni tilille. Tästä lisää lopussa.
Koska A tietueet on lisätty. Voin suoraan käyttää
ssh henry@h.iskff.fiH4 läksyissä luotu sivusto hh.isakoff.fi toimikoot pohjana tälle. Lisätään kys sivuston hh.isakoff.fi.conf tiedostoon merkintä aliaksesta (toisesta nimisivusta).
ServerName hh.isakoff.fi
ServerAlias h.iskff.fi
DocumentRoot /home/henry/public_html/hh.isakoff.fi...Lisätään myös edellisen lisäksi.
sudoedit etc/hosts
127.0.0.1 h.iskff.fisudo systemctl restart apache2Tarkastetaan toimivuus.
curl h.iskff.fi
Huomatkaa, että kuvassa sivusto jo rakennettu ja curl käytetään https yhteyden yli, koska sivut jo siirretty tässä vaiheessa sertifikaatin taakse.
Sivut, Mac OS paketit, pohjadata ja kansiot.
Tässä vaihessa sivut on tarkoitus rakentaa laajemmin omassa natiivissa ympäristössä. Eli tämä osuus on Mac OS puolen selvitystä.
Vähän sama vastaava Windows puolelta olisi ajaa ssh avaimet suoraan esim puttyyn tjms. Täten voit koodata sivut esimerkiksi Visual Studiolla ja työntää sivuille suoraan kansioon.
(Suurin osa tästä kappaleesta nyt ylimääräistä liittyen Linux järjestelmään. Itse sallin tämän koska joku voikin tästä jotain oppia).
Eli asennamme homebrewin mac oslle. Tämä yleinen linuxilla käytettyjen ohjelmien kirjasto ja paketinhallintajärjestelmä Mac Oslle.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Olen Applen omalla ARM pohjaisella järjestelmällä. Eli asennus ohjautuu /opt/homebrew kansioon.
Lisätään tietue bash järjestelmään
eval "$(/opt/homebrew/bin/brew shellenv)"Otetaan uusi istunto ja testataan toiminta.
source ~/.bash_profile
brew --version
Tämän jälkeen voimme asentaa yleisiä Linux-paketteja mac os järjestelmälle. Asennetaan rsync jolla voidaan työntää paikallisesta kansiosta kokonaisuus suoraan palvelimelle.
brew install rsyncAsennuksen jälkeen varmistetaan.
rsync --version
Tämän jälkeen luon omaan tiedostojärjestelmään kansion hh.isakoff.fi joka sama nimi kuin palvelimella.
Pidän kansion icloudissa joten jokainen muutos voidaan helposti palauttaa mac os time machine tai icloud palvelusta. Kun jotain mokaan. Hyvä myös huomata, että kys. tilanteessa pidettävä aina kansio ladattuna omassa järjestelmässä.
Nyt voin luoda sivustot paikallisella omalla editorillani (nova) ja työntää sivut komennolla.
rsync -avz --delete /Users/henry/Library/Mobile\ Documents/com~apple~CloudDocs/Nettisaitit/hh.isakoff.fi henry@h.iskff.fi:/home/henry/public_html/-avz komenossa A hyväksyy kansiorakenteet. V verbose kertoo mitä on tehty jälkikäteen ja Z hyväksyy pakkauksen. Ensin kansio mistä haetaan ja sitten kansio mihin lähetetään. Mac OS järjestelmissä ”\”+(välilyönti) otetaan yleisenä välilyöntinä. Älä vihaa pelaajaa.
Huomatkaa. --delete komento poistaa kaikki pohjatiedostot VPS palvelimen hh.isakoff.fi kansiosta. Eli komento on vaarallinen ja tarvitsee erityishuomiota. Siksi tehty koodi on oltava aina varmuuskopioitu.
Tässä myös hyötynä, että VPS-palvelun tarjoajan vaihdolla ei oikeastaan merkitystä, koska sivusto pidetään aina omassa järjestelmässä kopitettuna.
Sivut. Natiivi .md tuki ja HTML kontekstit.
Tässä paljon javascriptiin/HTML/CSS liittyvää. En ole vielä ammattilainen näissä, joten koodissa otettava huomioon epäkohdat.
Haluan sivuston olevan mahdollisimman yksinkertaiset ylläpitää ja käytännössä lukevan kirjoittamani .md tiedostot suoraan indexiin.
Lisäksi haluan suoran tuen kuville, jotka haetaan kansiosta /k. Määrään sijainnin itse .md tiedostossa omassa js. tiedostossa kohta.
Löysin Christopher Jeffreyn loistavan marked javascript kirjaston.
Tämä sallii suoraan md tiedostojen käännöksen HTML konteksteihin. Eli otsikot, linkit ym. näkyvät oikein html sivulle.
Lisään tämän suoraan html tiedostoni script osioon. Otan talteen viimeisimmän tallenteen itselleni, mutta html sivussa ohjaan suoraan githubin .js tiedostoon.
Lisään myös merkinnät iconeille, css pohjan, navigoinnin ja loppuun oman js latauksen.
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<title>Porkkanat ja linux</title>\
<-- !!iconit -->
<link rel="icon" type="image/x-icon" href="bin/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="bin/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="bin/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="bin/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="bin/android-chrome-512x512.png">
<link rel="apple-touch-icon" href="bin/apple-touch-icon.png">
<--!! .md tiedostot suoraan toimimaan ja CSS tiedosto -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="bin/css.css">
</head>
<--!! Otsikko ja navigointi aina uusi sivu lisätään uudella rivillä -->
<body>
<h1>// Henry Isakoff</h1>
<div class="nav">
<a href="#index.md" data-page="index.md">Etusivu</a>
<a href="#h1.md" data-page="h1.md">H1</a>
<a href="#h2.md" data-page="h2.md">H2</a>
<a href="#h3.md" data-page="h3.md">H3</a>
<a href="#h4.md" data-page="h4.md">H4</a>
</div>
<div id="content"></div>
<footer>
© 2024 Henry Isakoff
</footer>
<script src="bin/js.js"></script>
</body>
</html>Luon myös javascript kokonaisuuden jossa haetaan #md-tiedosto suoraan #merkinnällä url lopusta. Esimerkiksi h.iskff.fi#h3.md ohjaa h3.md tiedostoon. Käytetään data-page arvoa joka html sivussa ohjaa syntaksiin.
Lisään myös virheilmoitukset jos tiedostoa ei löydy tai on muuten vain ongelmia lukea tiedostoa (helpoin nähdä suoraan sivustosta mitä tapahtuu).
Tämä ei ole javascript kurssi joten en lähde jokaista arvoa avaamaan tässä. Mukana myös esim CSS arvoihin liittyvää.
Lisäksi kyseiset sivut tulevat kehittymään toivottavasti tässä. Eli tämän sivun ohjeet eivät edusta välttämättä yleistä kokonaisuutta joka nyt julki.
class ContentManager {
constructor() {
this.validPages = Array.from(document.querySelectorAll('.nav a'))
.map(link => link.getAttribute('data-page'));
this.init();
}
init() {
window.addEventListener('hashchange', () => this.handleRoute());
if (window.location.hash) {
this.handleRoute();
} else {
this.loadContent('index.md');
}
this.setupNavigation();
}
handleRoute() {
let page = window.location.hash.slice(1);
if (!this.validPages.includes(page)) {
return;
}
this.loadContent(page);
}
async loadContent(page) {
try {
const response = await fetch('../' + page);
if (!response.ok) throw new Error('Sivua ei löytynyt');
const text = await response.text();
const modifiedText = text.replace(
/!\[(.*?)\]\((\/)?k\/(.*?)\)/g,
(match, alt, slash, path) => {
return ``;
}
).replace(
/!\[(.*?)\]\((.*?)\)/g,
(match, alt, path) => {
if (!path.startsWith('http') && !path.includes('/')) {
return ``;
}
return match;
}
);
document.getElementById('content').innerHTML = marked.parse(modifiedText);
this.updateActiveNav(page);
} catch (error) {
console.error('Virhe:', error);
document.getElementById('content').innerHTML = 'Virhe sisällön lataamisessa';
}
}
setupNavigation() {
document.querySelectorAll('.nav a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = link.getAttribute('data-page');
window.location.hash = page;
});
});
}
updateActiveNav(currentPage) {
document.querySelectorAll('.nav a').forEach(link => {
if (link.getAttribute('data-page') === currentPage) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
new ContentManager();
});Luon myös kivan ikonin kokonaisuudelle (suokkaritehtävä!). Tähän käytetään avuksi flux-dev ja comfyui järjestelmää. Niistä tarkoitus tehdä raportti johonkin väliin. Lisäksi toki oma piirtopöytä ja photoshop apuna.
Tämän jälkeen jokainen läksy voidaan kirjoittaa yleisesti md muotoon ja tallentaa icloudin hh.isakoff.fi kansioon.
Kun sivustot valmiina. Työnnetään rsync kommennolla sivut palvelimelle. Sivuston omaan root kansioon läksyt suoraan tiedostoina ja kuvat /k kansioon.
Näyttökuvat ajan Vlad Danilovin tuottaman optimagen läpi vielä ennen julkaisua. Vladista ei ole kuulunut sodan alkamisen jälkeen mitään. Yleinen huomio kuinka sodat ovat aivan turhia kokonaisuuksia.
Kuvassa viimeisin, tämän läksyn työntö sivulle.
Loppusanat
Tämä on hyvä alku mahdollisesti kasvavalle kokonaisuudelle. Vaikka ymmärrän ihmisten innon tehdä muutoksia suoraan micro/nano editoreissa. Käytännössä laajemmat kokonaisuudet on mielestäni helpompi tehdä lokaaleissa editoreissa.
Name based virtual palvelu sallii myös muiden sivustojen perustamisen palvelimelle ja näiden syncronoinnin pystyy myös automatisoimaan rsync avulla.
Lähteet
Dokumentissa käytetty apuna koodissa, tekstinkäsittelyssä ja formatoinnin julkaisussa LLM mistra-small:24b järkeily + gemma2:27b sanoitus malleja sekoitettuna kirjoittajan omalla opetusdatalla (tässä tarkoituksessa pääosin Linux debian, ubuntu ja apt dokumentaatioiden datalla). WilmerAI välissä.
https://ollama.com/library/mistral-small:22b https://ollama.com/library/gemma2:27b https://github.com/SomeOddCodeGuy/WilmerAI
Kuvat optimoitu https://optimage.app
Marked https://github.com/markedjs/marked
Mac os homebrew https://brew.sh
Upcloud VPS http://upcloud.com/
Käytetty aika 2h 30min