Halusin uusia verkkosivujemme ulkonäköä rankalla kädellä, mutta pohjana toimiva Wordpress alkoi ärsyttämään. Koska sivut ovat meidän omat, eli sisällöntuottajilla ei ole teknisiä rajoitteita, niin halusin tehdä asiat omalla tavalla. Plussaa olisi, mikäli saamalla oppisi jonkin uuden mukavan teknologian. Samalla tavalla aikoinaan opettelin Wordpressinkin, eli tein sillä oman firman sivut.
TAGS:
Ensimmäisenä vaatimuksenani oli, että sisällön syöttäminen mielellään ihan suoraan HTML-koodina, sillä koodaajana koen sen luontevaksi tavaksi saada ulkonäöstä juuri halutunlaisen. Toisena vaatimuksena oli, että uusien blogikirjoitusten lisääminen olisi helppoa. Mieluiten kirjoittelisin vain HTML-tiedoston, jonka järjestelmä jotenkin itsestään lisäisi blogien joukkoon.
Erilaisia teknologioita tovin pengottuani päätin kokeilla Flaskia (https://flask.palletsprojects.com/en/1.1.x/), joka on kevyempi Djangon kaltainen systeemi. Siinä missä Djangossa on valmiina paketoituna kaikki teknologiat, Flask on ennemminkin runko, jonka ympärille voi poimia tarvitsemiaan lisäpalikoita. Esim sivujen renderöinti on Djangossa valmiina, mutta Flaskissa piti asentaa mukaan Jinja2 (https://jinja.palletsprojects.com/en/2.11.x/). Hyvin pian huomasin tykkääväni Flaskin suoraviivaisuudesta ja yhtäläisyyksistä Djangon kanssa, joten tekeminenkin oli nopeaa ja tuntui kotoisalta.
Käyttöliittymän (Frontend) tekoon otin tutun Bootstrapin, jolla varsinkin responsiivisuus (näkyy hyvin myös mobiililaitteella) on näppärä saada toteutettua. Vähän SCSS tyylisäätöjä, ripaus JavaScriptiä ja sivusto alkoi olla paketissa, blog-systeemiä lukuunottamatta.
Blogille en löytänyt sopivaa systeemiä valmiina, joten päätin tehdä sellaisen itse. Kyseessä kuitenkin niinkin pieni asia, kuin että HTML tiedostoista pitäisi jotenkin nätisti saada pääotsikko, ingressi, linkki ja ehkä kuva napattua nätiksi listaksi https://eeku.fi/blog -sivulle. Eli aina kun kirjoitan uuden blogin HTML-muodossa, haluan että siitä ilmestyyy automaattisesti uusi "kortti" tuonne Blogien pääsivulle, josta lukijoiden on se helppo löytää.
Blogivirityksestäni lopputuloksena syntyi pieni Python koodi, joka kaivaa blogi-kansiosta kaikki HTML-tiedostot ja kaivaa niistä tarvittavat tiedot blogi-sivulle. Ensimmäinen H1-kenttä otsikoksi, eka kappale ingressiksi, eka kuva kuvaksi, jne. Muutamia erikoisempia juttujakin tein, eli HTML ID-koodeilla voi myös määritellä kirjoituksen tekijän, päivämäärän ja tägit. Tuli melkein niin mukava koodi, että pitää harkita sen tekemistä avoimeksi lähdekoodiksi, jos vaikka joku muukin kaipaisi vastaavaa. Jos joskus tästä blogisysteemistä teen itsenäisen open source -projektin, niin varmaan kirjoittelen siitä blogiin erikseen.
Ai niin. Piti mainita erikseen, että Blogien pääsivun yläosan taustakuva on täysin erilainen kuin muilla sivuilla. Syynä oli, että halusin mukavaa tekemistä 7v poikani kanssa, joten teroitimme noin 50 puuväriä, järjestelimme ne ja napsimme niistä kuvia erilaisissa valaistuksissa. Visiona oli vain, että alareunassa kynäkuva loppuu valkoiseen taustaan, jotta se jatkuisi saumattomasti sivuun. Lopputulos siis löytyy täältä. Molemmat ollaan kuvaan tyytyväisiä, vaikka menutekstit näkyvätkin vähän huonosti tuota taustaa vasten.
11.3.2021
