Perjantaina, 26.11.2021

Lentävä lähtö WordPress-projekteihin automatiikan avulla

Dude toteuttaa WordPress-projektinsa ison maailman tehokkuudella automatisoimalla kaiken minkä voi. Lue lisää miten kaikki tapahtuu.

IoT:n ja koneoppimisen kehittymisen myötä chatbotit ja automatisointi on noussut ihmisten huulille. Digitoimisto Dude Oy:ssa automatisointia on kuitenkin harrastettu ensimmäisestä päivästä lähtien, vaikka web-maailmaa eletäänkin. Automatisointi on tyypillisempää etenkin softaan, robotiikkaan ja tekoälyyn liittyvillä aloilla, mutta sitä voi harrastaa myös modernien verkkosivujen kehityksen workflowssa.

Tähän väliin jargonivaroitus, sillä nyt seuraa teknistä jargonia. Itse asiassa tämä koko kirjoitus on sitä. Mutta järkevää sellaista. Haluan nimittäin kertoa miten meillä tehostetaan projektin läpivientiä jo heti alussa.

Dudella on ollut alusta asti tarkoituksena noudattaa DRY-periaatteita (Don’t Repeat Yourself). Ideana on laittaa komentorivisovellus tekem√§√§n sen apinaty√∂n, jonka muuten joutuisi nakuttelemaan ty√∂l√§√§sti itse k√§sin l√§pi. Puhun siis esimerkiksi WordPressin yll√§pitopuolella asetusten p√§ivittelyst√§. Esittelen n√§ihin automatisoitaviin asioihin liittyvi√§ teht√§vi√§ t√§ss√§ kirjoituksessa kohta v√§h√§n tarkemmin.

Vaikka teemme perinteistä WordPressiä, teemme sitä modernilla tavalla. Työkalumme ovat uutuuttaan huokailevia ja aina ajan tasalla. Näistä voit lukea lisää esimerkiksi Handbookistamme. GitHub-profiilimme alta löydät työkalut ja tekniikat keskeisimmistä repoistamme kuten devpackages, dudestack ja air-light.

Automatisoinnilla raapaistaan henkilötyötunteja kokonaisten päivien verran

Koska olemme vanhan liiton Linux/unix-ihmisiä, luotamme automatisoinnissa vanhaan kunnon GNU Bashiin. Kävin aikoinaan automaatiotyökaluja läpi kuten Ansible ja Puppet, mutta ne tekivät liikaa ja liian monimutkaisesti. Osa nörteistä on sitä mieltä, että bashia ei tulisi käyttää tällaiseen, mutta mielestäni vanha kunnon komentoriviscripti on kaikista luotettavin erityisesti silloin kun sen on itse kirjoittanut. Bash on ollut suoraviivainen ja ymmärrettävä ja sillä on menty. Tietää ainakin tasan tarkkaan mitä tapahtuu.

Kun saamme aloittaa uuden projektin, ajamme siis bash-komennon. Sitten menemme ottamaan kahvia. Prosessi näyttää tältä (katso pidempään niin näet tapahtumat suoraan, video kestää noin 5 minuuttia):

Projekti laitetaan käyntiin yksinkertaisella komennolla:

createproject

Komento kysyy ensin millä nimellä projektia kutsutaan. Yleensä tämä on sivuston tai asiakkaan nimi pienillä kirjaimilla ilman erikoismerkkejä. Tämän jälkeen kone ryhtyy töihin ja seuraavat asiat tapahtuvat:

  1. Tarkistetaan onko työkalut kuten git ja composer asennettu
  2. Haetaan tuorein versio WordPressistä ja uusimmat versiot Duden käyttämistä oletuslisäosista sekä siirretään ne oikeille paikoilleen
  3. Päivitetään riippuvuudet edellä olevista
  4. Luodaan projektille MySQL/MariaDB-tietokanta
  5. Luodaan projektille sisäänkirjautumista varten WordPress-tunnus ja salasana
  6. Poistetaan oletusartikkelit (WordPress luo asennuksessa ”Moikka maailma!” -testiartikkelin ja muuta vastaavaa pient√§ turhaa)
  7. Päivitetään sivuston nimi ja kuvaus
  8. Vaihdetaan kieli suomeksi
  9. Poistetaan WordPressin oletusteemat ja vaihdetaan oma oletukseksi
  10. Päivitetään pysyvät linkit
  11. Päivitetään aikamääreet ja aikavyöhyke
  12. Otetaan pois päältä turhat toiminnallisuudet kuten pingbackit
  13. Poistetaan kommentointi oletuksena käytöstä sieltä mihin se ei kuulu
  14. Päivitetään ylläpitäjän sähköpostiosoite
  15. Luodaan HTTPS-sertifikaatti
  16. Luodaan projektille GitHub-repo
  17. Päivitetään tiedostojen käyttöoikeudet
  18. Lisätään kehityspalvelimelle toimiva osoite (projekti.test) teknistä työstöä varten
  19. Käynnistetään palvelin uudelleen asetusten voimaan saattamiseksi
  20. Tarjoillaan osoite, josta WP-sivusto löytyy

Sitten luodaan projektille WordPress-teema komennolla:

newtheme

Tämä komentorivisovellus tekee seuraavaa:

  1. Kysyy projektin nimen, johon teema luodaan sekä varsinaisen luotavan teeman nimen (samalla projektilla voi olla useampikin teema, jos kyseessä on monia sivustoja sisältävä sivustojen verkko eli Network/Multisite)
  2. Hakee uusimman version pohjateemastamme Air-light
  3. Luo ACF:lle valmiudet toimia ja laittaa käyttöoikeudet kuntoon
  4. Hakee projektiin mukaan uusimmat versiot teemakehitystyökaluistamme, joita käytetään CSS/JS/HTML-ohjelmointiin.
  5. Asentaa npm-paketit (tässä yleensä kestää pisimpään)
  6. Siivoilee ylimääräisiä tiedostoja, jos niitä on
  7. Testaa että kaikki varmasti toimii työstöä ajatellen
  8. Pyöräyttää teeman alustavat JavaScriptit ja CSS-tyylitykset kasaan
  9. Tarjoillaan kansiopolut, joista tiedostot löytyvät ja toivotetaan työn iloa koodailuun.

Yll√§ olevat asiat pit√§isi ilman automatiikkaa takoa joka ikinen kerta k√§sipelill√§ l√§pi. Voit kuvitella miten vaivalloista on menn√§ selaimella fi.wordpress.org, etsi√§ nappi ja ladata zip-paketti, purkaa se, k√§ynnistell√§ palvelimia, luoda kansioita, siirt√§√§ tiedostoja, t√§ytell√§ wp-config.php-tiedosto, keksi√§ tai generoida tunnus ja salasana, kirjautua sis√§√§n, asentaa WordPress kliksuttelemalla l√§pi asennus, sen j√§lkeen kirjautua sis√§√§n, asettaa sivuston nimi, ja niin edelleen…

Mitä seuraavaksi

Onneksi kehitys kehittyy päivittäin. Yllä olevaan prosessiin on vuosien varrella lisätty asioita, joita joutuisimme muuten toistamaan. Jokaisessa manuaalisessa työssä kysymme teknisessä tiimissä itseltämme: Voiko tämän automatisoida? Jos voi, se lisätään osaksi automaattista prosessia.

Seuraava kehitysaste on komento:

newblock

Tämä komento tulee tekemään seuraavaa:

  1. Kysyy ensin mikä lohko tuodaan
  2. Tuo teemaan mukaan lohkon tiedostot, eli PHP-, JS- ja CSS-tiedoston
  3. Tuo teemaan mukaan lohkon riippuvuudet, eli mahdolliset JS-moduulit, SVG-tiedostot jne.
  4. Asentaa lohkon mahdollisesti vaatimat lisäosat composerin kautta ja aktivoi ne
  5. Lisää lohkon vaatimat importit JS:ään ja SCSS _blocks.scss-tiedostoon, joka tuo lohkon tyylin ja toiminnallisuuden näkyviin myös Gutenbergin puolelle
  6. Tuo lohkon vaatimat ACF-kentät mukaan projektiin
  7. Lisää lohkon esimerkkidatalla kaikkien lohkojen esikatselusivulle

Tämän jälkeen päästään räätälöimään lohkoa asiakkaan ilmeeseen sopivaksi.

Lohkokirjastomme on vielä vahvasti työn alla. Tätä kirjoittaessa osoitteesta blocks.airwptheme.com löytyy kaksi valmista lohkopohjaa, mutta lisää on tulossa. Edistymisen näet reaaliajassa GitHubista.

Tulevaisuus on valoisa

Tekninen prosessimme WordPress-kehityksessä on hiottu viimeisen päälle ja toimii kuin rasvattu koneisto, mutta aina kun uusi aallonharja on saavutettu, löytyy seuraava kehitysaskel. ACF + Gutenberg ovat ovat viitoittaneet meille tien kestävässä ja toimivassa kehityksessä. Kehitämme omia tapojamme, mutta myös käyttämämme työkalut kehittyvät koko ajan. Niin ACF kuin WordPressin Gutenberg-puolikin vihjaavat molemmat siitä, että vielä parempaa on tulossa:

Näillä tekniikoilla ja työkaluilla saamme asiakkaallemme kaikista helppokäyttöisimmän ja selkeimmän sivuston aikaan. Hallintapaneeliamme avasimme viime kesänä artikkelissa Duden WordPress-hallintapaneelin avulla verkkosivujen päivittäminen sujuu kuin tanssi. Haluamme olla alallamme niin hyviä, että ei jää epäilystä siitä kenen tekemä sivusto on kyseessä.

Heräsikö kiinnostus ammattimaisten työkalujemme myötä? Haluaisitko uudistaa verkkosivunne? Ota yhteyttä!