Categories
General Topics and tips Sotfware & Developers & DevOps Tools & How-Tos

How to Host WordPress on Linux System?

Updated on: June 8, 2021

This article will show the step-by-step process to host a WordPress site using a Linux-based system. WordPress is a free and open-source content management system (CMS) written in PHP and paired with a MySQL or MariaDB database. Currently, over 35% of the websites on the web are built with WordPress and it is the top amongst all the CMS providers.

Overview:

Here, we’ve taken the RedHat Linux system running on the AWS cloud. The commands for the installation may change by changing the distro type. We’ve performed the steps manually. However, there are many different approaches to getting access to WordPress and some setup processes are more complex than others.

This tutorial is intended for those who desire to install and administer a WordPress instance on an unmanaged cloud server via the command line backed by AWS managed database provider.

WordPress logo

Demonstration:

 Now to ensure a clean installation of WordPress, some SQL, and PHP-based dependencies are required. Also, a web server is required where our front-end will actually run. We’ve taken Apache webserver in this demonstration.

Run below commands to ensure dependencies in the system:

yum module install httpd php mysql
yum install php-mysqlnd
systemctl start httpd
systemctl enable httpd

Here, the latest versions of php, mysql and httpd modules are installed fulfilling all the dependencies, and a package named php-mysqlnd is installed for compatibility. Start the webserver services and batter to make the service permanent.

We’re all set to install WordPress in the system. Install the package file from the online source and extract it in the document root of the webserver. In this case, /var/www/html is the doc root of the apache webserver. The following commands are for reference:

wget https://wordpress.org/latest.tar.gz
tar -xzf latest.tar.gz
mv wordpress /var/www/html

Here, the wget command is installing the package from the online source and tar command is extracting that package, and the mv command is coping all the files in the document root of the apache webserver. The document root is the directory from where all publicly accessible pages are delivered.

If all of the above steps are successful then we can access the front-end using the publicly accessible domain name or IP address. But it doesn’t stop just after installation. Still, we’ve to perform some more steps. The front-end is ready. Besides, we need a database to persistently store the data.

After initial installation, the output screen will look like this:

Initial installation page

Now pass the database-related arguments as the next step to ensure connectivity between the front and back end of the application. On submit, internally it will communicate with the database and add the details in the local wp-config.php file. Before moving on, lets then create the DB:

AWS RDS Setup:

Let’s do the database part. Here, we’ve taken AWS RDS. It is a very powerful relational database service by AWS and fully managed by the provider. Navigate to AWS console and RDS service. This service provides all major SQL-based database flavors with all version compatibility.

As can be seen, select the database installation type and preferred database flavor. We’ve used MYSQL.

AWS RDS select database type

As the next step, pass the admin user credentials for initial login and administration purposes. Surely not suggested working with root privileges all time. Proceed with the “Least privileges” concept and follow best practices.

Pass admin credentials

Likewise, select the type of RDS server and the required storage amount. The instance type consists of the computing unit configuration of the machine and the storage amount will be the actual persistent storage.

Select type of RDS instance

Lastly, select networking configurations next and create a database. As the database is very critical and needs high availability setup with nearly zero downtime, AWS RDS as a fully managed service ensures all the variables and provides database clusters to the end-user. Henceforth it takes around 10-15 mins to spawn the cluster.

Configure Database:

Our database is ready now. In addition, Let’s create a database and tables inside it for connectivity with WordPress instance.

Mysql –h <endpoint of rds> -u username –p password
create database <database name>
CREATE USER ‘wordpressuser’@’%’ IDENTIFIED WITH mysql_native_password BY ‘password’;
GRANT ALL ON wordpress.* TO ‘wordpressuser’@’%’;

Furthermore, log in to the database instance using the credentials and create a database and a database user using the above commands and exit. The database is up and running and we’re good to go. Straightaway head towards the WordPress homepage and pass the above database details and click begin the installation.

Hence after fulfilling all the steps, we’re now ready to configure the site and make it up and running for the end-user. Eventually, after a clean installation, the wp-admin dashboard will look like the image below:

wp-admin page

This is how one can set up and install WordPress on a Linux system and make the site working. Then explore the CMS portal and add powers to your site by adding customized plugins and themes. Now freely post the content and spread it worldwide.

You can also use our very own Cloud Storage system that you can link from your WP so you do not need big servers. Aside from checking out these two posts. Firstly serving regular Content using our cloud. Later, this link recommended lazy loading for big files. By the way, our very own website Sesame Disk is also built with WordPress😇.

Hits: 9

Categories
Cloud Products and services Sotfware & Developers & DevOps Storage Tools & How-Tos

Lazy Loading: Intro

This post has been updated on May 31, 2021.

“A picture is worth a thousand words”. Graphical representation has the ability to impact straight to us and can deliver the intention on point. Do we still need examples like the shinchan cartoon to prove that images can turn conscious human beings into crazy heads? The portion of images and videos in typical web content is significant. And there is no doubt at all of removing such content just for the sake of site performance. Luckily, we have solutions like lazy loading that in a certain context.

Well, there is a cost to having graphical content and soaks huge bandwidth. More importantly, it costs both users and servers in terms of data capturing and bandwidth consumption. And project managers may be unwillingly to cut media resources from applications and end up being in frustrated debates on the optimization of the application. Here comes the lazy load technique.

Lazy load animation
credits

What is Lazy Loading?

Simply, lazy loading means loading the content only when the users need them to display. This means we can delay the loading of the object until the point where we need it. The user won’t have to wait for the elements on the page to load and start working. This leads to potentially save gigabytes of data over high traffic. For example, if a webpage has an image that the user has to scroll down to see, you can display the placeholder initially and lazy load the full image when the user arrives at that location.

As the user scrolls down the page, the image placeholders start coming into the viewport (visible part of the webpage). We trigger the load for these images when they become visible. Google lighthouse is one useful tool to analyze and shortlist the candidate images to implement the approach of lazy loading.

Implementing lazy loading

Usually, lazy loading is implemented in two ways. One is to bind it with the “image” tag and the other is to add the “background” properties. In HTML, the “src” tag triggers the loading of the object at the instance of the request. So whether it is a cover image or footer image, it will be preloaded. As an alternative, use the “data-src” keyword to eliminate upfront loading.
Example: <img data-src="reference to image">

Now let’s move to another way which is using background attributes in CSS. For the “background-image” keyword in CSS, the browser needs to build the Document Object Model and CSS Model to detect that the style is to be applied to the current object or not. If the condition does not apply to an element, then the browser does not load the background image. So here we can put the condition of the viewport and enable loading of images only when it is inside the viewport.

How to know when to trigger the loading?

Now, we’ve to implement when to load the media content. For this, we can use JavaScript event listeners like on scroll, orientation change. When either of the events occurs, we can easily detect that the lazy-loaded images are not yet triggered for loading. So, using the viewport of the screen size we can set the condition that if the image has entered the viewport then invoke the “src” tag and eventually trigger the loading. And once the image is loaded, release the event listeners. Find the below example for reference:

Intersection Observer API is also an efficient and simple way to detect when an element enters the viewport and take actions accordingly. We bind the observer on all images and once the API detects the object in the parameter of the viewport, using the “isIntersecting” property apply the “src” tag on the images to be loaded. Once done, remove the observer from the image. Find below pen for reference:

If we compare both the Event method and Intersection Observer method, we would find that the Intersection method is much more flexible and quicker and gives better performance. While the event method may come with slight variations. However, the intersection observer API is not yet available in all the mediums.

Lazy loading presents a great performance benefit for larges sites like e-commerce vendors where they may need to load thousands of product images. In the latest updates, chromes browser has started supporting lazy loading as a native feature. So, the developer only has to put the relevant attributes and embed them with images.

Benefits of implementing lazy loading in your app:

Improving initial loading time: This approach decreases the wright of payload and allows quicker response

Bandwidth conservation: Only the requested data is loaded that implies saving of data.

Resource conservation: We can save server and use resources on a very large scale because we enable rendering of only required content

jQuery lazy, lazysizes, yall.js, Magento lazy loader, WordPress lazy load, Shopify lazy plugin are some of the popular plugins/libraries which we can use and implement this approach.

The simplest way to test lazy loading is working or not is to analyze the loading order. In Chrome, navigate to Inspect site => Network => images and refresh the page to fetch the whole timeline. Test the lazy loading by scrolling and observing the loading time.

It’s time to get lazy, folks! Lazy load is seriously uncontroversial in the concern of performance. Many customers at Sesame Disk have fairly adopted such an approach in their environments and have got considerably good results.

Hits: 18