Lollypop blog - Φτιάχνοντας το νέο lollypop.gr σε λίγες ώρες.

Ο λόγος που αποφάσισα να ξαναφτιάξω το lollypop.gr είναι γιατί πολύ απλά δεν με αντιπροσώπευε ούτε στο ελάχιστο αυτό που υπήρχε πριν. Ο λόγος που δεν το τολμούσα τα τελευταία έξι χρόνια που το σκέφτομαι, είναι γιατί θα έπρεπε να φροντίσω με 301 Redirects παλιά URL που είχαν σημαντικό Traffic και έπρεπε κάπως να διαφυλάξω.

Επιπλέον είχα μια αναθεματισμένη σελίδα που ήταν πρώτο αποτέλεσμα στην Google τα τελευταία 15 χρόνια αν έψαχνε κάποιος : "Προγραμματισμός ιστοσελίδων". Είναι προφανές ότι μην γνωρίζοντας τι σκάλωμα είχε φάει ο αλγόριθμος της Google, σίγουρα δεν ήθελα να διαταράξω ούτε κόμμα σε αυτή τη σελίδα.

Και φτάσαμε στο σήμερα, που ένιωσα ότι ήταν καιρός και τελικά πολύ σημαντικότερο από τα side-effects (όπως χάσιμο ranking) το να αλλάξω την σελίδα σε κάτι που με αντιπροσωπεύει . Πως το κάνω αυτό όμως πολύ γρήγορα;

Για αρχή θα αγοράσω ένα έτοιμο template σκέφτηκα. Δεν είναι ντροπή, και ας μπορώ να το κάνω μόνος μου. Θα κερδίσω άπειρο χρόνο, πράγμα και που έγινε αλλά όπως πάντα με τα έτοιμα templates πρέπει στο τέλος να βάλεις από λίγο έως και πάρα πολύ χέρι.

Στην προκειμένη λοιπόν, ήθελα μεν ένα template αλλά δεν ήθελα να στήσω ένα wordpress για να κάνει τα πάντα. Ήθελα όμως ένα Blog, shit. Και αυτό η αλήθεια είναι πως το κάνει πολύ καλά το άτιμο, γι' αυτό φτιάχτηκε εξ αρχής κιόλας. H αλήθεια είναι πως παραλίγο να το στήσω εξ' ολοκλήρου σε wordpress και να τελειώνουμε όμως είχα πάντα την περιέργεια πως θα μπορούσα να το χρησιμοποιήσω σαν back-end και μέσω κάποιου API να παίρνω τα δεδομένα και να τα κάνω ότι μου 'ρθει. Κάτι σαν και αυτό που έχει δημόσια ανακοινώσει ότι έχει κάνει και το laravel-news.com δηλαδή.

Έτσι λοιπόν, λίγο ότι είχα περιέργεια, λίγο ότι η ποιότητα του κώδικα που παράγει το Wordpress δεν είναι του γούστου μου, ψώνισα ένα HTML template και όχι ένα Full Wordpress template και έστησα ένα ολοκαίνουργιο Laravel 5.7 από το μηδέν.

Το Template ήταν πραγματικά ότι χρειαζόμουν σχεδιαστικά, όσο Minimal το ήθελα, με όσες κατηγορίες το ήθελα και φιλικό προς κινητές συσκευές. Έλειπαν κάποια πράγματα για SEO, πρόσθεσα αρκετά meta και έφτιαξα ένα blade master template. Το "blade" template engine του Laravel με βοήθησε στο να σπάσω την μια σελίδα σε ενότητες, μια για κάθε επιλογή από το μενού. Αυτό έκανε πολύ πιο ξεκάθαρο τον κώδικα και περιόριζε τον τομέα ενδιαφέροντος ανάλογα με το που ήθελα να επέμβω.

Το δεύτερο που έκανα ήταν να αντικαταστήσω το συνηθισμένο send.php που υπάρχει σε αυτά τα έτοιμα templates με το Flow που έχει γι' αυτά τα πράγματα το Laravel. Έφτιαξα ένα Mailable Class και τελείωσα. Επιπλέον έβαλα και ένα έλεγχο Capcha στην φόρμα επικοινωνίας γιατί μέσα σε λίγες ημέρες τα spam bots είχαν ήδη στήσει πανηγύρι και με βομβάρδιζαν. Να αναφέρω ότι δεν χρησιμοποίησα ούτε έναν Controller, τα πάντα γίνονται μέσα στο αρχείο που κάνει το routing, κάτι που γενικά δεν θεωρείται καλή τακτική, αλλά σε περιπτώσεις όπως αυτή που μιλάμε για 4,5 σελίδες, δεν τρέχει κάστανο, σας διαβεβαιώ. Αυτό εδώ λοιπόν είναι όλο το Routing:

Route::get('/', function () {
    return view('master')->with('articles', Corcel\Model\Post::published()->get());
});

Route::get('/blog/{slug}', function ($slug) {
    $postId = explode("-", $slug);
    return view('article')->with('article', Corcel\Model\Post::find($postId)->first());
});

Route::post('/contactme', function (\Illuminate\Http\Request $request) {

    if(is_null($request->get('g-recaptcha-response'))){
        return "Error";
    }

    try {
        $recaptcha = new \Vinkla\Recaptcha\Recaptcha(getenv('RECAPCHA_SECRET_KEY'));
        Mail::to('*****')->send(new \App\Mail\ContactForm($request->name, $request->email,
            $request->message));
        return "SENDING";
    } catch (\Vinkla\Recaptcha\RecaptchaException $e){
        return "Error";
    } catch (\Exception $e) {
        return "Error";
    }
});

Όποιος δεν έχει χρησιμοποιήσει Laravel, μπορεί να πάρει μια μυρωδιά για το πόσο όμορφος είναι ο κώδικας με αυτό. Εμφανέστατα το πιο περίεργο κομμάτι είναι αυτό της Contact form, όμως εκεί η αλήθεια είναι ότι γίνονται πολλά. Η εφαρμογή στέλνει με Email τα δεδομένα και επιπλέον γίνεται έλεγχος για το RECAPCHA. To "return Error" έμεινε σαν λογική, γιατί ο δημιουργός του Template έκανε AJAX requests και έδειχνε ανάλογα τα σφάλματα στην φόρμα. Κάτι που προφανώς δεν ήθελα να ξαναγράψω.

Ωραία όλα αυτά. Με τις παλιές σελίδες που έπρεπε να μην χαθούν τι κάνουμε; Είχε πάρει κάπου το μάτι μου ένα composer πακέτο από την SPATIE ειδικά γι' αυτή την δουλειά, το 301 redirect σελίδων δηλαδή.

Αποφάσισα παρόλα αυτά να το κάνω με το Laravel framework που το κάνει πλέον τόσο μα τόσο αστεία εύκολο:

Route::redirect('web-services-gr/web-development-gr', '/web-development', 301);

Μια γραμμή για κάθε redirect, σε μερικά λεπτά είχα τελειώσει και με αυτό!Σε τι άλλο θα μπορούσε να φανεί χρήσιμο το Laravel; Έχοντας το Laravel Mix με δυο εντολές και ένα setup με καμιά δεκαριά γραμμές ακόμα, κατάφερα σε λίγα λεπτά να ενώσω και να συμπιέσω (concat & minify ) και να περάσω από versioning τα πραγματικά δεκάδες αρχεία Css και JS που είχε το Template. To "versioning" είναι χρήσιμο γιατί μπορεί να κάνεις Hard caching και βέβαια τα request από 25 έγιναν 2,3. Άρα σημαντικά καλύτερο φόρτωμα στην σελίδα, απλά και μόνο από αυτό. Πως είναι αυτό το αρχείο Mix που κάνει όλα αυτά; Έτσι:

const mix = require('laravel-mix');

mix.styles([
'public/assets/css/bootstrap.css',
'public/assets/css/splitlayout.css',
'public/assets/css/animations.css',
'public/assets/css/responsiveslides.css',
'public/assets/css/slick.css',
'public/assets/css/slick-theme.css',
'public/assets/css/magnific-popup.css',
'public/assets/css/style.css',
'public/assets/css/responsive.css',
], 'public/css/all.css');

mix.scripts([
'public/assets/js/jquery-migrate-1.2.1.min.js',
'public/assets/js/jquery.matchHeight-min.js',
'public/assets/js/jquery.alterclass.js',
'public/assets/js/bootstrap.min.js',
'public/assets/js/modernizr.custom.js',
'public/assets/js/typed.min.js',
'public/assets/js/responsiveslides.min.js',
'public/assets/js/jquery.fittext.js',
'public/assets/js/isotope.pkgd.min.js',
'public/assets/js/slick.js',
'public/assets/js/jquery.magnific-popup.min.js',
'public/assets/js/custom.js'
], 'public/js/all.js');

if (mix.inProduction()) {
mix.version();
}

Αφού μάζεψα ότι υλικό από κείμενα και φωτογραφίες ήθελα ( διαδικασία που κράτησε πολύ περισσότερο απ' ότι τεχνικό έκανα για όλο αυτό), το μόνο που έμενε ήταν το κομμάτι του Blog. Έστησα ένα Wordpress blog και εγκατέστησα στο Laravel project ένα composer dependecy ακόμα που θα βοηθούσε πολύ, το Corcel.

Αυτό το πακέτο κάνει γελοίο το να τραβάς τα δεδομένα από μια Wordpress βάση. Χρησιμοποιείς μια πολύ Eloquent και φιλική προς το Laravel σύνταξη και έτσι έχεις στην ουσία ένα headless wordpress. Στο αρχείο του Routing που δείχνω νωρίτερα φαίνεται και η απλή σύνταξη του.

Έτσι λοιπόν το μόνο που έμενε ήταν να το δει και ο υπόλοιπος κόσμος. Επειδή ο Server που θα ανέβαινε η τελική έκδοση τρέχει Cpanel , δεν εκανα το Deployment που κάνω συνήθως με GIT, γιατί ειναι λίγο περίπλοκο και θα απαιτούσε απο μόνο του τουλάχιστον 2 επιπλέον άρθρα. Απλά χρησιμοποίησα για αρχή το απλό , παλιό, αξιόπιστο.... wait for it... SFTP!

Και αυτό ήταν; Όχι.

Σηκώνει πολλές βελτιώσεις αλλά σίγουρα είναι δεκάδες φορές καλύτερα από πριν, οπότε όταν βρεθεί αντίστοιχα χρόνος θα γίνουν και τα επιπλέον. Σε πρώτη φάση με προβληματίζει το όλο θέμα με τo Wordpress. Τραβώντας τα δεδομένα από την βάση και κάνοντας όλα τα υπόλοιπα μόνος μου, καλούμαι να κάνω αρκετή δουλειά που ήδη κάνει μια χαρά το wordpress. Γλίτωσα φυσικά το Backend της διαχείρισης και αυτό είναι σπουδαίο πράγμα. Όμως σίγουρα εκεί, νιώθω ότι σηκώνει πολύ βελτιωση και με πρώτη ευκαιρία θα ασχοληθώ ειδικά με ένα άρθρο για αυτό το setup./

Τέλος και το ίδιο το template αποδείχτηκε λίγο "τσαπατσούλικο" όσο αφορά το section του blog, γιατί όντας SPA ( μια σελίδα ) το όλο load time γίνεται πολύ αργό μόνο και μόνο γιατί οι εικόνες απο τα άρθρα το καθυστερούν. Αρα εκεί θα χρειαζόταν pagination και Lazy loading και παρόμοιες τέτοιες τεχνικές ώστε να μην έχουμε πρόβλημα στο αρχικό φόρτωμα. Σε πρώτη φάση πέρασα όλες τις εικόνες από το TinyPng optimizer ( https://tinypng.com ) πάντως και αυτό βοήθησε ήδη, πάρα πολύ, ειδικότερα όταν μπήκε και μπροστά απ' όλα το Cloudflare

UPDATE ~ 26/1/2019

Τελικά αποφάσισα να αντικαταστήσω πλήρως το Wordpress Blog με κάτι πιο "Laravel". Χρησιμοποίησα το πακέτο Wink και στη συνέχεια έφτιαξα ένα Theme το οποίο όποιος θέλει μπορεί να κατεβάσει δωρεάν από εδώ. Η αλήθεια είναι ότι το πακέτο αυτό με καλύπτει απόλυτα και βέβαια έχω πολύ καλύτερο έλεγχο και λιγότερα πράγματα να σκέφτομαι.