What's in the bag – työkalut, joilla teen verkkosivustoja

Golfareilla on tapana esitellä, mitä mailoja laukussa on. Tässä on minun versioni: ohjelmat, palvelut ja Chrome-lisäosat, joilla teen verkkosivustoja, verkkokauppoja ja integraatioita. Mukana on myös yksi itse rakennettu työkalu, joka säästää eniten aikaa.

Editorit ja tekoäly

• Sublime Text – nopea ja kevyt editori, kun pitää avata tiedosto heti tai käsitellä isoja tiedostoja.
• Cursor – tekoälyä hyödyntävä koodieditori isompaan kehitystyöhön.
• GitHub Copilot – koodiehdotukset suoraan editoriin.
• Claude – tekoälyavustaja ja Claude Code, jolla tämäkin sivusto on rakennettu.
• ChatGPT ja Gemini – toiset näkökulmat, haku ja vertailu. Eri mallit ovat vahvoja eri asioissa, joten käytän useampaa.

Paikallinen kehitysympäristö

• Laravel Herd – PHP- ja Laravel-kehitysympäristö Macille ja Windowsille. Eri PHP-versiot ja paikalliset sivustot ilman erillistä palvelinasennusta. Uusin lisäys on Herd Studio: selainnäkymä, jossa Herdissä hostattua paikallista sivustoa tai sovellusta kehitetään tekoälyagentin kanssa Lovablen tyyliin esikatselu vieressä.
• DBngin – paikalliset tietokantapalvelimet, kuten MySQL ja PostgreSQL, päälle ja pois yhdellä klikkauksella.
• Sequel Ace – MySQL- ja MariaDB-tietokantojen selaus ja muokkaus.
• Local – paikalliset WordPress-sivustot nopeasti pystyyn.

Palvelimet ja tiedostot

• Google Cloud – tämän sivuston Firebase-hosting ja Cloud Functions sekä Gemini-mallit Vertex AI:n kautta.
• Hetzner + Cloudflare – staging-palvelin Hetznerin Suomen konesalissa Cloudflaren proxyn takana.
• Suomi.fi-palveluväylä – liityntäpalvelin Hetznerin Suomen konesalissa.
• Laravel Forge + Hetzner – Laravel-sovellusten palvelimien asennus, julkaisut ja ylläpito.
• Laravel Cloud – Laravel-sovellusten hosting ilman omaa palvelinta.
• Transmit – tiedostonsiirrot SFTP:llä ja pilvitallennuksiin.

Pienet apurit

• SnippetsLab – oma kirjasto usein tarvittaville koodinpätkille.
• ImageOptim – kuvien pakkaus ennen kuin ne päätyvät sivustolle.
• ColorSlurp – värien poiminta ruudulta ja muuntaminen eri muotoihin.
• Omat pikatoiminnot macOS:ssä – useita itse tehtyjä Quick Actioneita toistuviin tehtäviin suoraan Finderista.

Chrome-lisäosat

• PerfectPixel – asettaa suunnittelijan kuvan sivun päälle läpinäkyvänä kerroksena, jolloin toteutusta voi verrata suunnitelmaan pikselin tarkkuudella.
• GoFullPage – kuvakaappaus koko sivusta yhdellä klikkauksella, myös siitä osasta, joka ei mahdu ruudulle.
• MeetRecorder – itse rakentamani lisäosa, josta lisää alla.

MeetRecorder: palaverista tehtävälistaksi

Rakensin itselleni Chrome-lisäosan, joka tallentaa Google Meet -palaverin äänitiedostoksi. Palaverin jälkeen tallenteesta tehdään tekoälyllä tekstitys ja siitä poimitaan minulle tehtävälista: mitä sovittiin, mitä minun pitää tehdä ja mihin mennessä.

Hyöty on yksinkertainen. Palaverissa voi keskittyä keskusteluun eikä muistiinpanoihin ja mikään sovittu asia ei jää unohduksiin. Tämä on hyvä esimerkki siitä, millaisia pieniä tekoälyagentteja kannattaa rakentaa: selkeä, toistuva tehtävä, jossa lopputuloksen voi tarkistaa nopeasti itse.

Tallentamisesta pitää aina kertoa palaverin muille osallistujille.

Tietoturva

• 1Password – salasanat ja tunnukset.
• NordVPN – suojattu yhteys julkisissa verkoissa.

Miten työ kulkee

Kehitän ensin paikallisesti omalla koneellani. Kun muutos on valmis, se siirtyy Cloudflaren välityspalvelimen takana olevalle testipalvelimelle ja tarkistetaan siellä ennen tuotantoon viemistä. Testipalvelimelle työskentelen SSH-yhteyden yli.

Näin keskeneräinen työ ei koskaan näy sivuston oikeille kävijöille ja jokainen muutos on nähty ja testattu ennen julkaisua. Lisää siitä, miten rakennan sivustoja, löydät WordPress- ja WooCommerce-palvelusta.

Usein kysyttyä

Mikä on paras editori WordPress-kehitykseen?

Se, jota osaa käyttää hyvin. Itse käytän kevyttä Sublime Textiä nopeisiin muutoksiin ja tekoälyä hyödyntävää Cursoria isompaan kehitystyöhön.

Miksi kehittää paikallisesti eikä suoraan palvelimella?

Paikallisesti voi kokeilla rauhassa ilman, että virhe näkyy sivuston kävijöille. Lisäksi työ on nopeampaa, kun jokainen muutos ei kulje verkon yli.

Voiko MeetRecorderin saada omaan käyttöön?

Se on tehty omaan käyttööni. Jos haluat vastaavan työkalun yrityksellesi, voin rakentaa sellaisen sinun tarpeisiisi.