Hugo-projektin muokkaus VS Codella SSH:n yli

Tämän ohjeen tavoite:

  • Avaa serverillä oleva Hugo-projekti suoraan VS Codeen
  • Muokkaa HTML/Markdown-lähteitä etänä SSH:n yli
  • Käynnistä hugo server palvelimella
  • Katso kehitysversio omassa selaimessa SSH-tunnelin läpi.

1) VS Coden yhdistäminen palvelimeen

1.1 Asenna lisäosa

VS Codessa avaa:

Extensions → Remote – SSH

Lisäosa mahdollistaa, että editori käyttää palvelimen tiedostoja kuin ne olisivat paikallisia.

1.2 Lisää SSH-kohde

Paina:

F1 → Remote-SSH: Add New SSH Host

Esimerkki:

ssh diary@192.168.1.50

VS Code kirjoittaa tiedot ~/.ssh/config-tiedostoon.

1.3 Avaa projektikansio

Remote-SSH: Connect to Host
File → Open Folder → /home/diary/sites/diary

Nyt muokkaat oikeasti palvelimen lähdetiedostoja:

  • content/
  • layouts/
  • static/
  • config.toml.

2) Hugo-kehityspalvelimen käynnistys etänä

Avaa VS Coden terminaali (SSH-session sisällä):

cd ~/sites/diary
hugo server --bind 127.0.0.1 --baseURL http://127.0.0.1:1313

2.1 Parametrien merkitys

  • --bind 127.0.0.1
    Hugo kuuntelee vain paikallista osoitetta = kehityspalvelin ei ole avoinna internetiin.

  • --baseURL
    Hugon linkit generoidaan oikein tunnelia varten.

Hugo näyttää:

Web Server is available at http://127.0.0.1:1313
Press Ctrl+C to stop

3) Kehitysversion katselu selaimessa SSH-tunnelilla

Koska Hugo kuuntelee osoitetta 127.0.0.1, avaa yhteys omalta työasemaltasi.

3.1 Luo putki

Omalla koneellasi:

ssh -L 1313:127.0.0.1:1313 diary@192.168.1.50

Rivi riviltä

  • -L = Local port forward
  • ensimmäinen 1313 = oman koneen portti
  • 127.0.0.1:1313 = palvelimen kuuntelema portti.

3.2 Avaa selain

http://127.0.0.1:1313

Näet nyt etäserverin kehitysversion suoraan.

4) Vaihtoehto: kuuntele verkko-osoitetta

Jos haluat katsoa kehitysversiota myös muilla laitteilla kotiverkossa:

sudo ufw allow 1313
hugo server --bind 0.0.0.0 --port 1313

Tämä sopii vain suljettuun lähiverkkoon.

5) Tyypillinen workflow

  1. VS Code auki SSH-folderissa
  2. Muokkaat tiedostoa ja tallennat
  3. hugo server päivittyy automaattisesti
  4. Selain näyttää muutoksen reaaliajassa tunnelin läpi.

6) Mitä ei pidä muokata

  • Älä editoi public/-kansiota käsin
  • Kaikki muutokset tehdään lähteisiin
  • public/ luodaan aina uudelleen.

7) Ongelmatilanteet

7.1 Löytyykö Hugo

which hugo

7.2 Portti varattu

lsof -i :1313

7.3 Tunnelin testaus

ssh -T git@github.com

8) Turvamuistutus

  • Kehitys tunnelin yli on turvallisin tapa
  • Pidä sivujen lähteet GitHubissa
  • Sertifikaatit lisäksi erillisessä backupissa.

Nyt sinulla on toimiva tapa muokata ja testata Hugo-sivustoa etänä.


---

### Käyttö sivustossa

Hugo-puolella voit:

- luoda tälle oman sivun  
- linkittää menusta:

**layouts/partials/menu.html**

```html
<a href="/pages/vscode-ssh-hugo/">VS Code SSH</a>

Tuo Markdown on valmis julkaistavaksi ja toimii suoraan Hugo-sisältönä ilman muutoksia.