GitHub Pages – julkaise ensimmäinen verkkosivusi

Tiivistelmä

Ensimmäisen verkkosivun julkaiseminen tekee HTML- ja CSS-harjoittelusta konkreettista. Omalla tietokoneella avautuva tiedosto muuttuu sivuksi, jonka osoitteen voi lähettää kaverille tai liittää portfolioon. Samalla…

GitHub Pages tarjoaa tähän yksinkertaisen lähtökohdan. Voit säilyttää sivuston tiedostot GitHubissa ja julkaista ne verkkoon samasta tietovarastosta. Ensimmäiseen kokeiluun riittävät GitHub-tili, selain ja pieni HTML-tiedosto.

Tässä oppaassa rakennetaan oma esittelysivu ja julkaistaan se vaihe vaiheelta. Et tarvitse komentoriviä, erikseen ostettua verkkotunnusta tai tietokoneelle asennettavaa kehitysympäristöä.

Mikä GitHub Pages on?

GitHub Pages on staattisten verkkosivustojen julkaisupalvelu. Se tarjoaa selaimelle esimerkiksi HTML-, CSS- ja JavaScript-tiedostoja, jotka on tallennettu GitHubin tietovarastoon.

Staattinen sivusto voi sisältää kuvia, navigaation ja selaimessa toimivia vuorovaikutteisia ominaisuuksia. Sana staattinen ei siis tarkoita, että sivulla olisi pelkästään muuttumatonta tekstiä.

GitHub Pages sopii esimerkiksi:

Henkilökohtaiseen portfolioon.
Ohjelmistoprojektin esittelyyn.
Käyttöohjeiden julkaisemiseen.
HTML- ja CSS-harjoituksiin.
Harrastusprojektin tietosivuksi.

GitHub Free -tilillä palvelua voi käyttää julkisista tietovarastoista. Yksityisten tietovarastojen tuki riippuu käytössä olevasta tilauksesta. GitHub Pagesin esittely.

Tunnista palvelun rajat ennen rakentamista

GitHub Pages ei suorita sivupyynnön yhteydessä PHP-koodia tai tarjoa tavallisen palvelinympäristön tietokantaa. Siksi WordPressiä ei voi asentaa sinne samalla tavalla kuin webhotelliin. Myöskään pelkkä HTML-lomake ei lähetä viestejä ilman erillistä käsittelyratkaisua. GitHubin sivustonluontiohje.

Aloita siis sivusta, jonka toiminta voidaan toteuttaa selaimessa. Esittelyteksti, kuvat ja linkit ovat hyvä ensimmäinen kokonaisuus.

GitHub Pagesin käyttöehdot rajaavat myös käyttötarkoituksia. Palvelua ei ole tarkoitettu esimerkiksi verkkokaupan tai kaupallisen SaaS-palvelun maksuttomaksi hosting-alustaksi. GitHub Pagesin käyttörajat.

Pidä ensimmäisen harjoituksen tavoite pienenä: toimiva sivu, jonka osaat julkaista ja päivittää itse.

Valitse sivustolle sopiva tietovarasto

GitHub Pagesissa henkilökohtainen sivusto ja projektisivusto saavat erilaiset oletusosoitteet.

Henkilökohtaisen sivuston tietovarasto nimetään muodossa kayttajanimi.github.io. Sen osoite muodostuu samasta nimestä.

Projektisivustossa tietovaraston nimi voi olla esimerkiksi oma-sivu. Tällöin osoitteen loppuun tulee myös projektin nimi: kayttajanimi.github.io/oma-sivu/. GitHub Pagesin sivustotyypit.

Tässä harjoituksessa käytetään projektisivustoa nimeltä oma-sivu. Näin voit myöhemmin tehdä muitakin harjoituksia omiin tietovarastoihinsa.

Valitse lyhyt nimi ilman välilyöntejä. Nimi näkyy oletusosoitteessa, joten helposti kirjoitettava vaihtoehto helpottaa myös linkin jakamista.

Luo uusi tietovarasto GitHubissa

Kirjaudu GitHubiin ja aloita uuden tietovaraston luominen New repository -toiminnolla.

Täytä asetukset seuraavasti:

Valitse omistajaksi oma käyttäjätilisi.
Kirjoita nimeksi oma-sivu.
Lisää halutessasi lyhyt kuvaus.
Valitse näkyvyydeksi Public.
Ota README-tiedoston lisääminen käyttöön.
Paina Create repository.

README voi kertoa, että kyseessä on ensimmäinen verkkosivuharjoituksesi. Varsinainen etusivu tehdään seuraavaksi erilliseen HTML-tiedostoon.

Julkisen tietovaraston sisältö on muiden nähtävissä. Lisää sinne ainoastaan julkaistavaksi tarkoitettuja tiedostoja.

GitHubin ohjeessa uuden Pages-sivuston perustaminen alkaa juuri tietovaraston luomisesta ja julkaistavan sisällön lisäämisestä. GitHubin perustamisohje.

Lisää ensimmäinen HTML-sivu

Avaa tietovaraston Code-näkymä. Valitse Add file ja sen jälkeen Create new file. Anna tiedoston nimeksi index.html.

Kopioi tiedostoon seuraava esimerkki:

<!doctype html>
<html lang="fi">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="description"
        content="Ensimmäinen oma verkkosivuni GitHub Pagesissa.">
  <title>Oma verkkosivuni</title>
  <style>
    body {
      margin: 0;
      background: #f3f5f7;
      color: #202630;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    main {
      max-width: 720px;
      margin: 48px auto;
      padding: 24px;
      background: white;
      border-radius: 12px;
    }

    h1 {
      line-height: 1.2;
    }

    a {
      color: #174ea6;
    }
  </style>
</head>
<body>
  <main>
    <h1>Tervetuloa omalle sivulleni</h1>
    <p>Opettelen verkkosivujen tekemistä ja julkaisemista.</p>

    <h2>Mitä harjoittelen?</h2>
    <ul>
      <li>HTML-sivujen rakentamista</li>
      <li>Ulkoasun muokkaamista CSS:llä</li>
      <li>Versionhallintaa GitHubissa</li>
    </ul>

    <h2>Seuraava tavoitteeni</h2>
    <p>Lisään sivulle oman projektini esittelyn.</p>
  </main>
</body>
</html>

Esimerkki sisältää rakenteen ja ulkoasun yhdessä tiedostossa. Näin ensimmäisessä julkaisussa ei tarvitse selvittää erillisen tyylitiedoston sijaintia.

Vaihda tekstiä omaan aiheeseesi sopivaksi. Säilytä aluksi HTML-elementtien rakenne, jotta mahdolliset virheet on helpompi löytää.

Tallenna sivu kuvaavalla commit-viestillä

Valitse editorissa Commit changes. Kirjoita viestiksi esimerkiksi ”Lisää ensimmäinen esittelysivu”.

Tässä omassa harjoitusprojektissa voit tallentaa tiedoston suoraan main-haaraan. Jos GitHub tarjoaa tallennuksen yhteydessä uuden haaran luomista, varmista valinneesi haluamasi vaihtoehdon.

Tallennuksen jälkeen tiedoston pitäisi näkyä tietovaraston tiedostoluettelossa README-tiedoston rinnalla.

Tarkista nimi huolellisesti. Sen pitää olla index.html, ei esimerkiksi Index.html tai index.html.txt. Pagesin aloitustiedoston nimi ja sijainti vaikuttavat siihen, löytyykö etusivu oikein. GitHubin 404-virheohje.

Tässä vaiheessa tiedosto on GitHubissa, mutta julkaisemisen asetukset täytyy vielä määrittää.

Ota GitHub Pages käyttöön

Avaa tietovaraston Settings ja valitse sivupalkista Pages.

Määritä julkaiseminen näin:

Etsi Build and deployment -osio.
Valitse Source-kohdasta Deploy from a branch.
Valitse haaraksi main.
Valitse kansioksi /(root).
Tallenna asetukset Save-painikkeella.

Juurikansio tarkoittaa tässä tietovaraston ylintä tasoa, johon index.html tallennettiin.

GitHub tukee myös erillistä GitHub Actions -työnkulkua julkaisemiseen. Tavalliselle HTML-harjoitukselle haarasta julkaiseminen on kuitenkin suoraviivainen vaihtoehto. GitHubin julkaisulähteen ohje.

Anna julkaisun valmistua ennen asetusten muuttamista uudelleen. Keskeneräinen julkaisu ei vielä tarkoita, että määrityksissä olisi virhe.

Avaa sivusto ja tarkista lopputulos

Julkaisun valmistuttua Pages-asetuksissa näkyy sivuston osoite tai Visit site -painike. GitHubin mukaan muutosten julkaiseminen voi kestää enintään noin kymmenen minuuttia. GitHubin julkaisuohje.

Avaa osoite ja käy läpi perusasiat:

Näkyvätkö otsikot ja kappaleet oikein?
Toimivatko ääkköset?
Mahtuuko sisältö puhelimen näytölle?
Näkyykö selaimen välilehdellä oikea otsikko?
Onko teksti helposti luettavaa?

Pienennä selainikkunaa ja kokeile sivua myös puhelimella. Ulkoasu, joka näyttää hyvältä leveällä näytöllä, voi tarvita tarkennuksia pienessä koossa.

Varmista lisäksi, että avasit julkaistun sivuston. GitHubin tiedostonäkymä näyttää lähdekoodia, eikä se ole sama asia kuin Pages-sivu.

Lisää kuvia ja erillinen tyylitiedosto

Kun ensimmäinen sivu toimii, voit siirtää CSS-säännöt omaan style.css-tiedostoonsa. Korvaa silloin HTML:n koko style-elementti seuraavalla rivillä:

<link rel="stylesheet" href="./style.css">

Tallenna tyylitiedosto samalle tasolle kuin index.html.

Kuvat voi järjestää images-kansioon. Kuvan lisääminen onnistuu esimerkiksi näin:

<img
  src="./images/retkimaisema.webp"
  alt="Metsäpolku järven rannalla"
  width="800"
  height="500">

Käytä kuvan todellisia mittoja ja lisää tyylitiedostoon:

img {
  max-width: 100%;
  height: auto;
}

Suhteellinen polku ./images/retkimaisema.webp sopii tähän projektisivuun. Alussa oleva pelkkä kauttaviiva ohjaisi haun verkkotunnuksen juureen, jolloin projektin nimellä alkava osoitepolku jäisi pois.

Päivitä sisältö pienissä kokonaisuuksissa

Sivuston päivittäminen onnistuu muokkaamalla tiedostoja ja tallentamalla uusi commit julkaistavaan haaraan. GitHub käynnistää julkaisun määritetyn lähteen perusteella. GitHubin julkaisulähteen ohje.

Tee aluksi yksi selkeä muutos kerrallaan. Lisää esimerkiksi esittelyteksti, tarkista julkaisu ja jatka vasta sitten kuviin.

Kuvaavat commit-viestit helpottavat historian lukemista:

Lisää projektin esittely.
Korjaa kuvan tiedostopolku.
Paranna mobiilinäkymän reunuksia.

Jos sivu näyttää vanhaa sisältöä, tarkista ensin julkaisun tila Actions-välilehdeltä. Päivitä selain vasta onnistuneen julkaisun jälkeen.

Näin erotat toisistaan tallennetun muutoksen, valmistuneen julkaisun ja selaimessa näkyvän version.

Selvitä tavallisimmat julkaisuongelmat

Jos saat 404-virheen, tarkista aloitustiedoston nimi, valittu haara ja julkaisukansio. Projektisivun osoitteeseen kuuluu myös tietovaraston nimi.

Jos teksti näkyy mutta ulkoasu puuttuu, tarkista tyylitiedoston polku. Kuvien kohdalla vertaa tiedostonimeä HTML:ssä olevaan nimeen kirjain kirjaimelta. Isot ja pienet kirjaimet voivat ratkaista, löytyykö tiedosto. GitHubin 404-vianmääritys.

GitHub Pages tukee HTTPS-yhteyttä. Käytä myös ulkoisissa kuva- ja skriptilinkeissä HTTPS-osoitteita, jotta sivulle ei synny sekoitettuun sisältöön liittyviä ongelmia. GitHubin HTTPS-ohje.

Kun julkaiseminen sujuu, voit halutessasi liittää sivustoon oman verkkotunnuksen. Se edellyttää Pages-asetusten lisäksi verkkotunnuksen DNS-määrityksiä. Ensimmäiseen harjoitukseen GitHubin tarjoama osoite riittää hyvin. GitHubin verkkotunnusohje.