Ryan Thompson

Background

I am migrating this website, made with Laravel 8, Streams, and an HTML template theme, to a fresh copy of Laravel 9 and cleaning it up. The following process also applies to new template or theme-based websites.

Getting Started

I first installed a fresh copy of Laravel and Streams to get started.

# Create a new Laravel project
composer create laravel/laravel ryanthepyro.com

cd ryanthepyro.com

# Install Streams
composer require streams/core:2.0.x-dev

Streams Migration

I copied and pasted the /streams directory to move my stream definitions and file-based data.

cp -r ../ryanthepyro.com.bak/streams ./

https://github.com/RyanThompson/ryanthepyro.com/tree/master/streams

This website does not use any SQL or non-file-based databases, so that is all that is needed for migrating content.

Migrating Templates

I used Blade templates to slice up an HTML theme I purchased. So, I copied and pasted the /resources/views directory to migrate them from my old build. They still need more slicing and organization, which I will share later.

cp -r ../ryanthepyro.com.bak/resources/views/* ./resources/views

https://github.com/RyanThompson/ryanthepyro.com/tree/master/resources/views

The post and welcome Blade templates are the main entry points to the view layer for this website. Each extends the default layout, which includes various common partials.

Migrating Images

I keep images in resources, so I need to copy those over as well:

cp -r ../ryanthepyro.com.bak/resources/img ./resources

https://github.com/RyanThompson/ryanthepyro.com/tree/master/resources/img

Integrating with Vite

This website comes with some baggage to sort through, which I had to copy over first:

cp -r ../ryanthepyro.com.bak/public/assets ./public

https://github.com/RyanThompson/ryanthepyro.com/tree/master/public

Laravel comes with a basic Vite configuration. In my case, I just opened /resources/css/app.css and dumped the un-minified contents of /assets/css/app.css into it and commented out the original inclusion of it.

// resources/views/partials/head.blade.php
{!! Assets::style('/assets/css/vendor/bootstrap.min.css') !!}
{!! Assets::style('/assets/css/vendor/fontawesome.css') !!}
{!! Assets::style('/assets/css/vendor/lightbox.css') !!}
{!! Assets::style('/assets/css/plugins/plugins.css') !!}
{{-- {!! Assets::style('/assets/css/style.min.css') !!} --}}

I import the CSS in resources/js/app.js and include the resulting file with the vite directive:

// resources/views/partials/assets.blade.php
@vite(['resources/js/app.js'])

Running the Website

I could now locally serve the website, and that is mission accomplished. I will organize and optimize everything next, and it will be ready for the long haul.

npm run build
php artisan serve

Website Refresh