DEV Community: Kinsta

Jekyll Tutorial: How To Create a Static Website

Kinsta — Wed, 25 Oct 2023 13:00:00 +0000

Jekyll is a free open-source SSG that is built and runs on the Ruby programming language. You don’t need to understand how Ruby works to use Jekyll; you only need to have Ruby installed on your machine.

Jekyll can be used to build various types of static sites such as a personal blog, portfolio website, and documentation website without needing a database or using a content management system like WordPress.

How To Install Jekyll

You first need to install Ruby on your machine before you can proceed to install the Jekyll as stated in the Jekyll documentation.

How To Install Jekyll on macOS

By default, Ruby comes preinstalled with macOS, but it’s not recommended you use such a version of Ruby to install Jekyll because it’s old. For example, on Ventura, Apple’s latest operating system, the version of Ruby that comes preinstalled is 2.6.10, of which the latest version is 3.1.3 (as of when this article is written).

To fix this, you’d need to install Ruby correctly using a version manager such as chruby. You’d need to install Homebrew on your Mac first using the command below in your terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once the installation is successful, quit and restart Terminal, then check if Homebrew is ready to go by running this command:

brew doctor

If you get “Your system is ready to brew”, you can now move on to install chruby and ruby-install with the command below:

brew install chruby ruby-install

You can now install ruby’s latest version which is 3.1.3 using the ruby-install package you just installed:

ruby-install 3.1.3

This will take a few minutes. Once it’s successful, configure your shell to automatically use chruby with the command below:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

You can now quit and relaunch your terminal, then check that everything works by running this command:

ruby -v

It should say ruby 3.1.3.

You now have Ruby’s latest version installed on your machine. You can now proceed to install the latest Jekyll and bundler gem:

gem install jekyll bundler

How To Install Jekyll on Windows

To install Ruby and Jekyll on a Windows machine, you’d use the RubyInstaller. This can be done by downloading and installing a Ruby+Devkit version from RubyInstaller Downloads and using the default options for installation.

On the last stage of the installation wizard, run the ridk install step — which is used to install gems. Read more via the RubyInstaller Documentation.

From the options, choose MSYS2 and MINGW development toolchain. Open a new command prompt window and install Jekyll and Bundler using the command below:

gem install jekyll bundler

How To Verify That Jekyll Is Installed Correctly

To verify that Jekyll is installed correctly on your machine, open your terminal and run the following command:

jekyll -v

If you see the version number, it means that Jekyll is installed and working correctly on your system. You’re now ready to use Jekyll!

How Do You Create a Static Website on Jekyll?

Now that you have Jekyll installed on your machine, it’s now possible to create a Jekyll static website with one command within a few seconds. Open your terminal and run this command:

jekyll new joels-blog

Ensure you replace “joels-blog” with your preferred site name.

Jekyll static website

Next, navigate to the website folder. You will notice a basic Jekyll site structure that includes directories and files like these:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

Here’s what each of these directories and files is for:

_config.yml: The Jekyll configuration file containing your site’s settings and options.
_posts: A directory that contains your site’s content (can be blog posts). These can be Markdown or HTML files with a specific file naming convention: YEAR-MONTH-DAY-title.MARKUP.
Gemfile and Gemfile.lock: Bundler uses these files to manage the Ruby gems on which your site relies.
index.md: The default homepage for your site, generated from a Markdown or HTML file.

But there are more files/folders that can be used to customize your Jekyll website. These folders include:

_includes: A directory that contains reusable HTML snippets that can be included in your layouts and pages. Such as navbar, footer, e.t.c.
_layouts: A directory that contains HTML layout templates that define the structure of your pages.
assets: A directory that contains any files that are used by your site, such as images and CSS files.
_sass: A directory that contains Sass files that can be used to generate CSS for your site.

This file structure provides a solid foundation for a Jekyll project, but you can modify it as needed to suit the specific needs of your project.

Quick Start Option: Use Our GitHub Template

As an alternative to starting your project using the Jekyll CLI, you can create a Git repository using Kinsta’s “Hello World” Jekyll template on GitHub. Select Use this template > Create a new repository to copy the starter code into a new repository within your own GitHub account.

How To Preview a Jekyll Site

You now have a Jekyll site, but how can you preview the website to see what it looks like before you maybe start customizing it to suit your needs? Open your terminal and move into your project’s directory, then run the following command:

jekyll serve

This will generate a _site folder that includes all static files generated from your project. It will also start the Jekyll server, and you can preview your site via http://localhost:4000.

If you visit the URL in your web browser, you should see your Jekyll site with the minima theme:

Default appearance

How To Customize a Jekyll Site

When you create a site with Jekyll and use a theme, you can customize the site to suit your needs. For example, you may want to add new pages, change a page’s layout, or adjust how some items are displayed. All these are possible with Jekyll.

How Front Matter Works in Jekyll

When you open each page or blog post of your project folder, you will notice a block of information within three dashes (—) at the top of the page. This is referred to as front matter.

It is a metadata format used in Jekyll, to store information about a page or post — it can be written in either YAML or JSON.

---
title: " \"Welcome to Jekyll!\""
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

In the example above, the front matter includes variables, such as the post’s title, description, and date. These variables can be used in the page or post’s layout or content.

Jekyll parse’s the front matter and uses it to generate the output HTML for your site. You can use front matter to specify various options, such as layout, permalink, published status, etc.

How To Configure Default Front Matter

You can also configure default front matter, so you don’t need to define the same front matter for similar files. For example, if each blog post uses the same author’s name and layout. You can define a custom front matter in your _config.yml file to serve all your blog posts.

The way it’s structured it’s a little bit complex, but here is what it will look like. Paste this below the last configuration in your _config.yml file:

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

When you now run the jekyll serve command, you will notice that even when you don’t define the layout and author on each post, you still have access to them within your files.

Note: When you don’t define a path, all files will use the defined front matter values.

Creating Pages in Jekyll

When you create a file in the root directory of your project, it is considered a page. The name you give to the file is most times used in the URL, so you’ll name each page file a name that resonates well.

For example, if you want to create a page with the URL https://example.com/about, create a file named about.html or about.md. The file extension determines the markup language to use for the page content (HTML or Markdown).

Once you have created a file, add appropriate front matter and content. Save the file and refresh your Jekyll site in the browser. The new page should now be accessible at the URL corresponding to the filename.

Front matter and content

Creating Layouts in Jekyll

You can use Layouts to define the structure and design of your site’s pages and posts. This is usually done majorly with HTML code. You can include a header, footer, meta information with the page’s metadata.

The first step would be to create a _layouts folder in your project’s root directory. Then create a file for each layout — the file should have a descriptive name that reflects the purpose of the layout. For example, you might create a file named page.html to define the page layout for all pages on your site.

It’s best to define the overall structure of your layouts with HTML or another markup language.

You can include placeholders for any dynamic content that will be inserted into the layout, such as the page title, content, and metadata. For example, you might create a basic layout that includes a header, footer, and content area like this:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                <!-- Navigation menu goes here -->
        </header>
        <main>{{ content }}</main>
        <footer>
            <!-- Footer content goes here -->
        </footer>
    </body>
</html>

In this example, the {{ page.title }} and {{ content }} placeholders will be replaced with the actual title and content of the page being rendered.

At this point, any page or post that uses page as its layout value in its front matter will have this layout. You can create multiple layouts within the _layouts folder and style your layouts however you like. You can also override a theme’s layout by defining a layout with a similar name.

How the _includes Folder Works in Jekyll

The _includes folder contains reusable snippets of code that you can include in different parts of your website. For example, you can create a navbar.html file in your includes folder and add it to your page.html layout file using the {% include %} tag.

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             <!-- Footer content goes here -->
         </footer>
     </body>
 </html>

At build time, Jekyll will replace the tag with the content of navbar.html.

The _includes folder can contain any type of file, such as HTML, Markdown, or Liquid files. The principal aim is to keep your code DRY (Don’t Repeat Yourself) by allowing you to reuse code across your site.

Looping Through Posts in Jekyll

You might want to create a dedicated blog page to hold all your blog posts, this means you’d want to fetch all the posts on your site and loop through them. With Jekyll it’s easy to achieve using the {% for %} tag.

All posts on any Jekyll website are stored in the site.posts variable. You can loop through and use the {{ post.title }} Liquid variable to output the title of each post this way:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

You can also use additional Liquid variables to output other information about each post, such as the post’s date or author:


{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

Notice that in the example above, the date Liquid filter formats each post’s date in a more human-readable format.

Now, you have an idea of some basic formatting that can be done to your Jekyll site. But you may not need to use all these to build a Jekyll site from scratch because you can always search for a theme that meets your needs and add it to your Jekyll site.

How To Add a Theme To a Jekyll Site

There are various easy-to-add themes, but the good thing is that for each theme, there is always clear information about how to install them in the ReadMe file on GitHub. You can decide to clone the theme, or if it is a gem-based theme, the process is easier.

For this article, you would install a blog theme and customize it to have a blog site deployed to Kinsta. This is a gen-based theme and you can access its source code and instructions on GitHub.

To add a gem-based theme, open your site’s Gemfile and add the gem for the theme you want to use. The theme we will use is the jekyll-theme-clean-blog. You can replace the default minima theme in the Gemfile:

gem "jekyll-theme-clean-blog"

Run the bundle install command in your site’s directory to install the theme’s gem and its dependencies.

In your site’s _config.yml file, add the following line to specify the theme you want to use:

theme: jekyll-theme-clean-blog

At this point, your theme is ready for use.

You will want to remove all layouts in the _layouts directory to avoid them overriding the theme’s layout.

You can then find the layout names for your files in the theme’s documentation. For example, if you’re using the jekyll-theme-clean-blog theme, the layout names for the index.html file is home, other pages is page, and all posts is post.

Finally, run jekyll serve to build and serve your site using the new theme.

Jekyll blog static site

That’s it! Your Jekyll site should now be using the new gem-based theme you added. You can customize the theme further by modifying its layout in your site’s _layouts directories.

Customize a Jekyll Theme

You now have your theme added to your site, the next action would be to customize the site to meet your needs and work as it is intended to work. For example, the images for each page and post are not displayed rather it displays a grey background.

You can fix this by adding a front matter option to each page and post by specifying the path to an image you wish to use. In Jekyll, assets such as images are stored in the assets folder. In this folder, you can decide to create sub-folders to organize your images.

Image folder

You can now add a background option to the front matter block and a path to its image. For example, on the about page, this is the front matter:

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Do this for all pages and posts and your page will look like this:

Background image is shown on the About page

Another customization you can do is adjust the navbar options. For example, you may not need a contact page, meaning you should remove its link from the navbar options. You can do this by studying the theme’s source code, noticing the file responsible for the nav links, and replicating the file exactly in your project, removing the option you don’t need.

The nav links are in the _includes folder’s navbar.html file. You can create this file, paste the code from your source code, and remove the contact option or add any new option you wish.

Customizing the navbar from the Jekyll theme

When you save your project, you will notice the nav options will be customized:

Fully customized nav bar

Finally, one last customization would be creating a posts page that will hold all your blog posts — which means you will loop through all the posts on this page.

Create a file, posts.html and paste the following code:

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

Feel free to adjust the background image to reflect your saved image. In the code above, you are looping through all the posts to display all posts on this page. This is what the posts page will look like when saved.

Posts page

How To Add Content To a Jekyll Site

You have now created a Jekyll site and configured the site to meet your needs. The last step would be to add content or learn how content can be added to a Jekyll site.

All content is stored in the posts folder. Each content is stored in a file with a similar naming convention of YYYY-MM-DD-title.md (or .html for HTML files). For example, if you want to create a post called “My First Post”, create a 2023-03-08-my-first-post.md in the posts directory.

Next, for each post/content file, ensure you add front matter about the post at the top. This will include the layout, title, description, date and other information.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

Then you can add your content below the front matter block with HTML tags or markdown syntax.

Adding new posts to the _posts folder

Save the file, and Jekyll will automatically build and include it in your site.

Summary

So far, you have learned how Jekyll works and the various customizations that you can do with Jekyll. It’s now safe to agree that Jekyll is an excellent tool for creating static websites due to its simplicity, flexibility, and powerful features.

Jekyll’s intuitive templating system, liquid templates, and built-in support for markdown and other markup languages make it easy to create and manage content-rich sites quickly.

Feel free to host all your static websites with Kinsta’s Application Hosting for free, and if you like it, opt for our Hobby Tier plan, starting at $7/month.

What is your thought on Jekyll? Have you utilized Jekyll to build anything? Please feel free to share your projects and experiences with us in the comments section below.

The 3 Best Svelte Static Site Generators You Need to Try

Kinsta — Wed, 18 Oct 2023 13:00:00 +0000

In recent years, static site generators (SSGs) have experienced a surge in popularity among developers because of their simplicity, speed, and security benefits. They’re often used for blogs, documentation, portfolios, and ecommerce sites.

Take a closer look at several static site generators that use Svelte and discuss why they could be a game-changer for your next web development projects.

Top 3 Svelte Static Site Generators

Before we review some of these static site generators, you should understand that SSGs will always generate static files, which you’d need to host online for your users to have access to the website.

With Kinsta, you can host your static website through our Application Hosting solution which offers you scalability, reliability, and security. We’re currently working on adding new, dedicated static site hosting services that will allow you to deploy your SSGs more efficiently and serve your content even faster.

Let’s now explore some best static site generators that use Svelte and what makes them stand out.

1. SvelteKit

SvelteKit

SvelteKit is a popular SSG built on top of the Svelte framework that takes advantage of Svelte’s unique features, such as:

Compiler-based approach
Reactive updates
Component-based architecture
Smaller bundle sizes
Easy to learn

It was built by the Svelte team and is widely considered one of the best SSGs that use Svelte for the following reasons:

SvelteKit has built-in serverless functions, making it easy to add backend functionality to your website. For example, you could use a serverless function to handle form submissions, process payments, or interact with a database.
SvelteKit automatically code-splits your application, which means that it only loads the code that’s needed for each page. This results in faster load times and better performance.
SvelteKit can pre-fetch data for a page before it’s loaded, which means that the page can be rendered faster.
SvelteKit comes with built-in routing, which makes it easy to create complex multi-page applications.

SvelteKit is used by many popular websites, including Yarn and Brilliant. If you’re looking for a Svelte SSG, SvelteKit is definitely worth a try. Make sure to check out their official documentation which provides comprehensive documentation on how to get started and more.

How To Deploy a SvelteKit Static Site on Kinsta

SvelteKit quick start

You can set up a SvelteKit static site on Kinsta by forking our quick start example and deploying it to our Application hosting. This will provide you with a URL that loads up your SvelteKit static site within minutes.

2. Astro

Astro

Astro is a modern static site generator that provides a flexible and efficient way to build static websites. It is designed to be fast, lightweight, and easy to use, making it a great choice for developers who want to build performant and easy-to-maintain websites.

Astro is designed around a component-driven development model, which makes it easy to create reusable components and manage their state and data flow. You also have the ability to use your favorite frontend frameworks like Svelte, React, and Vue to create components that you can easily integrate into Astro pages and templates.

It also utilizes the Island architecture, a unique approach that separate pages and components into isolated “islands” of code (CSS, JavaScript, and HTML).

Astro also gives you access to so many integrations, such as:

MDX Integration
Image optimization Integration
Tailwind Integration
Sitemap Integration

Astro is used by many popular websites like The Guardian Engineering. You can check out other popular platforms that use them on their showcase page.

The documentation for Astro provides detailed information on how to use the framework, including its integration with the Svelte framework.

How To Deploy an Astro Static Site on Kinsta

Astro quick start

You can easily set up an Astro website by forking Kinsta’s hello-world quickstart example on GitHub. Then deploy it to Kinsta’s Application hosting, which would provide you with a unique URL.

3. Elder.js

Elder.js

Elder.js is a static site generator built with SEO in mind. A small team of SEOs and developers designed it from the ground up to solve the unique challenges and complexities of building flagship SEO sites with 100k+ pages.

One of the key features of Elder.js is its ability to work seamlessly with Svelte, giving developers the possibility to create reusable UI components and use them across multiple pages or even projects.

On top of being able to integrate with Svelte, Elder.js has other interesting features:

Elder.js uses a highly optimized build process that utilizes as many CPU cores as possible, making it incredibly fast and efficient. For instance, according to their documentation, it can easily generate a data-intensive 18,000-page site in just 8 minutes using only a 4-core VM.
With Elder.js, developers have complete control over how they fetch, prepare, and manipulate data before sending it to their Svelte template.
Elder.js supports a range of official and community plugins that can be added to a site to extend its functionality.
Elder.js supports shortcodes, which are smart placeholders that can be used to future-proof content whether it lives in a CMS or static files. These shortcodes can be asynchronous, making it easy to include dynamic content on a site.
Elder.js allows developers to hydrate just the parts of the client that need to be interactive, reducing payload size and improving site performance.

Check the official Elder.js documentation for more information.

Summary

Static site generators (SSGs) are becoming increasingly popular due to their speed, simplicity, and enhanced security. They are particularly useful for building websites that don’t require dynamic content or functionality from a server.

Using Svelte-based SSGs could give you even more advantages because it provides additional features from the Svelte framework, including a smaller bundle size and rapid rendering. As a result, Svelte-based SSGs are an excellent choice for creating static sites that load quickly and operate efficiently.

You can host your static website with Kinsta’s Application Hosting for free, and if you like it, upgrade to our Hobby Tier plan.

What Is Astro? An Introduction to the Popular Static Site Generator

Kinsta — Wed, 11 Oct 2023 13:00:00 +0000

Web development has evolved significantly from static single-page websites to offering a variety of languages, frameworks, and systems for every niche.

Now we have Astro, a new and easy-to-use tool by Fred K. Schott and a group of other contributors. Developers love it because it’s simple like old-school web pages but powerful.

We'll explain why it's popular and how you can use Astro to easily make a blog!

What Is Astro?

Astro, or Astro.js, is a popular static site generator conceived for those who want to create content-rich websites that run quickly and smoothly. Its lightweight nature, intuitive structure, and gentle learning curve make it attractive to developers of all experience levels.

Despite its small footprint, Astro comes with powerful tools that drastically increase your site’s flexibility, saving you hours in content and theme management. In addition, it gives developers the option of working with their preferred frameworks in conjunction with Astro — an appealing prospect for seasoned coders who already have a host of favorites.

Here are just a few of the ways Astro stands out from the crowd:

Island architecture: Astro extracts your user interface (UI) into smaller, isolated components known as “Astro Islands” that can be used on any page. Unused JavaScript is replaced with lightweight HTML.
Zero JavaScript (by default): While you can use all the JavaScript you want to create your websites, Astro will attempt to deploy zero JavaScript to production by transcribing your code for you. This a perfect approach if your focus is on site speed.
SSG and SSR included: Astro started as a static site generator, but along the way, it became a framework that uses both static site generation (SSG) and server-side rendering (SSR). And you can pick which pages will use which approach.
Framework-agnostic: When using Astro, you can use any JavaScript framework you like — even multiple frameworks at once. (We’ll discuss this in greater detail later in this article.)

What’s more, Astro is edge-ready, meaning it can be deployed anywhere, anytime, with ease.

Astro’s Structure

Before we venture any further, it’s important to understand how Astro is set up so you can use it effectively. Let’s take a look at Astro’s core file structure:

├── dist/
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
│       └── index.astro
├── public/
└── package.json

As you can see, the structure itself is quite simple. However, there are some key points you should remember:

Most of our project lives in the src folder. You can arrange your components, layouts, and pages into subfolders. You may add additional folders to make your project easier to navigate.
The public folder is for all the files that live outside of the build process, such as fonts, images, or a robots.txt file.
The dist folder will contain all the content you want to deploy on your production server.

Next, let’s dive deeper into Astro’s main constituents: components, layouts, and pages.

Components

Components are reusable chunks of code that can be included all over your website, similar to shortcodes in WordPress. By default, they have the file extension .astro, but you can also use non-Astro components built with Vue, React, Preact, or Svelte.

The following is an example of what a simple component looks like — in this case, a classed div tag containing an h2:

<!-- src/components/Kinsta.astro -->
<div class="kinsta_component">
    <h2>Hello, Kinsta!</h2>
</div>

And here’s how we can incorporate that component into our site:

---
import KinstaComponent from ../components/Kinsta.astro
---
<div>
    <KinstaComponent />
</div>

As demonstrated above, you first have to import the component. Only then can it be included on the page.

Now it’s time to add some properties to our component. Let’s start with a {title} property:

---
const { title = 'Hello' } = Astro.props
---

<div class="kinsta_component">
    <h2>{title}</h2>
</div>

And here’s how our property would be implemented:

---
import KinstaComponent from ../components/Kinsta.astro
---

<div>
    <!-- This shows "Good day" -->
    <KinstaComponent title="Good day"/>

    <!-- This shows "Hello" -->
    <KinstaComponent />
 </div>

Simple, right?

As you’ve probably already realized, the real power of Astro’s components is in their global and reusable nature. They enable you to make sweeping changes to your entire site by editing only a few lines of code, which can save you countless hours that would otherwise be spent on tedious, painstaking text replacements.

Layouts

Now, let’s talk about layouts. In addition to their familiar thematic function, layouts in Astro are also reusable components, but they’re employed as code wrappers.

Take a look at this example:

---
// src/layouts/Base.astro
const { pageTitle = 'Hello world' } = Astro.props
---

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>{pageTitle}</title>
</head>
<body>
    <main>
        <slot />
    </main>
</body>
</html>

Note the <slot /> tag here. The <slot /> element in Astro acts as a placeholder for actual HTML tags and content.

Let’s see it in action.

The code below shows our <slot /> tag getting replaced with our desired code, all of which is wrapped by our Base.astro layout:

---
import Base from '../layouts/Base.astro';
---

<Base title="Hello world">
    <div>
        <p>Some example text.</p>
    </div>
</Base>

As you can see, our <slot /> tag was replaced by the HTML it represents, which is:

<div>
    <p>Some example text.</p>
</div>

As you can see, layouts, like components, allow you to reuse chunks of code across your site, simplifying the challenge of updating your global content and design.

Pages

Pages are a special type of component that is responsible for routing, data loading, and templating.

Astro uses file-based routing to generate pages, rather than dynamic routing. Not only does the file-based method consume less bandwidth, but it also saves you from having to import your components manually.

Here’s an example of defined routes:

src/pages/index.astro => yourdomain.com
src/pages/test.astro => domain.com/test
src/pages/test/subpage => domain.com/test/subpage

With these routes, our resulting homepage would be rendered as follows:

<!-- src/pages/index.astro -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, Kinsta</h1>
</body>
</html>

But we already know how to use layouts, so let’s convert this into something that’s globally accessible:

---
import Base from '../layouts/Base.astro';
---

<Base>
    <h1>Hello, Kinsta</h1>
</Base>

There – that’s much cleaner.

We’ll discuss routing in Astro in more detail later in this article, but for now, let’s move on to the fun stuff: site construction and customization.

Customizing and Extending Astro

It’s time to learn how to customize your Astro site! We’re going to use Markdown collections, routing, image handling, and an integration with React to build out and personalize our static site.

🎈

Unlock a new level of performance and ease with Kinsta

Find out why bloggers, agencies, and Fortune 500 companies are choosing Kinsta to host, build, and launch their websites, applications, and databases.

Book a Demo

Markdown Collections

With version 2.0, Astro introduced a much better way to maintain Markdown content than before. Thanks to collections, we can be sure that all our frontmatter data is included and has the correct type of association.

Lately, in version 2.5, they added a possibility to also manage JSON and YAML files as collections.

Ready to get your hands dirty?

First, put all your Markdown articles in the src/content/collection_name folder. We’re going to create a blog collection for this project, so in our demonstration, the folder will be src/content/blog.

Now it’s time to define all the required frontmatter fields in our src/content/config.ts file. Our blog will need the following:

title (string)
tags (array)
publishDate (time)
image (string, optional)

This is what it all looks like put together:

import { z, defineCollection } from 'astro:content';

const blogCollection = defineCollection({ 
    schema: z.object({
        title: z.string(),
        tags: z.array(z.string()),
        image: z.string().optional(),
        publishDate: z.date(),
    }),
});

export const collections = {
    'blog': blogCollection,
};

And this is what our article-about-astro.md Markdown file contains:

---
title: Article about Astro
tags: [tag1, tag3]
publishDate: 2023-03-01
---
## Tamen risit

Lorem *markdownum flumina*, laceraret quodcumque Pachyne, **alter** enim
cadavera choro.

True, there’s nothing special about our Markdown file. But there’s some hidden magic here that will manifest if we make a typo.

Let’s say, for instance, that instead of typing publishDate, we accidentally typed publishData. In the case of a misspelling like this, Astro will throw an error:

blog → article-about-astro.md frontmatter does not match collection schema.
  "publishDate" is required.

Amazing, right? This nifty feature can help us find errors relating to frontmatter in a matter of seconds.

The last thing we need to add is a page showing our data. Let’s create a file at src/page/blog/[slug].astro with the following code:

---
import Base from '../../layouts/Base.astro';
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
    const blogEntries = await getCollection('blog');
    return blogEntries.map(entry => ({
        params: { slug: entry.slug }, props: { entry },
  }));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Base>
    <h1>{entry.data.title} </h1>
    <Content />
</Base>

Thanks to getStaticPaths, Astro will create all the static pages for each post in the blog collection.

The only thing we’re missing now is a listing of all our articles:

---
import Base from '../../layouts/Base.astro';

import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog');
---
<Base>
<ul>
    {blogEntries.map(item => <li> <strong><a href={'/blog/' + item.slug}>{item.data.title}</a></strong></li>)}
</ul>
</Base>

As you can see, using collections makes this task remarkably simple.

Now, let’s create a data type collection. First, we must open the src/content/config.ts file again and add a new data collection:

import { z, defineCollection, referenece } from 'astro:content';

const blogCollection = defineCollection({ 
    type: 'content',
    schema: z.object({
        title: z.string(),
        tags: z.array(z.string()),
        image: z.string().optional(),
        publishDate: z.date(),
        author: reference('authors')
    }),
});

const authorsCollection = defineCollection({ 
    type: 'data',
    schema: z.object({
        fullName: z.string(),
        country: z.string()
    }),
});


export const collections = {
    'blog': blogCollection,
'authors': authorsCollection,
};

Apart from creating a new collection, we also added the author reference in the blogCollection.

Time to create a new author. We must create a file called maciek-palmowski.json in the content/authors.json:

{
    "fullName": "Maciek Palmowski",
    "country": "Poland"
}

The last thing left is to grab this data in our Post. To do so, we’ll need to use getEntry:

---
import Base from '../../layouts/Base.astro';
import { getCollection, getEntry } from 'astro:content';
export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug }, props: { entry },
  }));
}
const { entry } = Astro.props;
const author = await getEntry(entry.data.author);
const { Content } = await entry.render();
---
<Base>
<h1>{entry.data.title}</h1>
<h2>Author: {author.data.fullName}</h2>
<Content />
</Base>

Routing

Astro has two different routing modes. We already learned about the first – static (file-based) routing – when we covered pages earlier.

Now we’re going to shift our focus to dynamic routing.

Using dynamic route parameters, you can instruct an Astro page file to automate the creation of multiple pages with the same structure. This is useful when you have a lot of one particular type of page (think author bios, user profiles, documentation articles, and so on).

For this next example, we’ll work on generating bio pages for our authors.

In Astro’s default static output mode, these pages are generated at build time, meaning you must predetermine the list of authors that get a corresponding file. In dynamic mode, on the other hand, pages are generated upon request for any route that matches.

If you want to pass a variable as your filename, add brackets around it:

pages/blog/[slug].astro -> blog/test, blog/about-me

Let’s dive deeper into this using the code from our src/page/blog/[slug] file:

---
import Base from '../../layouts/Base.astro';
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
    const blogEntries = await getCollection('blog');
    return blogEntries.map(entry => ({
        params: { slug: entry.slug }, props: { entry },
  }));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Base>
    <h1>{entry.data.title}</h1>
    <Content />
</Base>

The getStaticPaths route is responsible for generating all the static pages. It returns two objects:

params: Used to fill the brackets in our URLs
props: All the values we’re passing to the page

And with that, your page generation is taken care of.

Image Handling

We can’t talk about performant websites without bringing up modern image formats, correct resizing methods, and lazy loading.

Luckily, Astro’s got us covered here, too. Thanks to the @astrojs/image package, we can introduce all the above in a matter of minutes.

After installing the package, we gain access to two components: Image and Picture.

The Image component is used to create an optimized <img /> tag. Here’s an example:

---
import { Image } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';
---

<Image src={heroImage} format="avif" alt="descriptive text" />
<Image src={heroImage} width={300} alt="descriptive text" />
<Image src={heroImage} width={300} height={600} alt="descriptive text" />

Similarly, the Picture component creates an optimized <picture/> component:

---
import { Picture } from '@astrojs/image/components';
import hero from '../assets/hero.png';
---
<Picture src={hero} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="descriptive text" />

SSG vs SSR

By default, Astro runs as a static site generator. This means that all the content is converted to static HTML pages.

While this is a perfect approach from many perspectives (especially speed-related), we might sometimes prefer a more dynamic approach. If you want a separate profile page for each user, for example, or if you have thousands of articles on your site, re-rendering everything each time would be far too time-consuming.

Luckily, Astro also can work as a fully server-side-rendered framework instead or in a hybrid mode between the two.

To enable side-wide SSR, we need to add the following code to astro.config.mjs:

import { defineConfig } from 'astro/config';

export default defineConfig({
    output: 'server'
});

This is the standard approach.

The hybrid approach means that by default, everything is dynamically generated, apart from the pages with export const prerender = true added.

With Astro 2.5, there is also the possibility to set static rendering as default and select dynamic routes manually.

Thanks to those, we can, for example, create a fully statically generated website with dynamic login and profile pages. Neat, right?

You can read more about this in the official documentation.

Integrating Other JavaScript Frameworks

Another amazing feature of Astro allows you to bring along your favorite framework and use it in concert with Astro. You can mix Astro with React, Preact, Svelte, Vue, Solid, or Alpine (for all integrations, see Astro’s “Add Integrations” documentation).

Let’s say we want to use React. First, we need to install the integration by running the following in npm:

npx astro add react

Now that React has been integrated, we can create a React component. In our case, it will be the counter component at src/components/ReactCounter.tsx:

import { useState } from 'react';

/** A counter written with React */
export function Counter({ children }) {
    const [count, setCount] = useState(0);
    const add = () => setCount((i) => i + 1);
    const subtract = () => setCount((i) => i - 1);

    return (
        <>
            <div className="counter">
                <button onClick={subtract}>-</button>
                <pre>{count}</pre>
                <button onClick={add}>+</button>
                </div>
            <div className="counter-message">{children}</div>
        </>
    );
}

Last but not least, we need to place the counter on our page with the following code:

---
import * as react from '../components/ReactCounter';
---
<main>
    <react.Counter client:visible />
</main>

And voilà: Your React component has been integrated seamlessly into your site.

How To Deploy Astro Using Kinsta

Now it’s time to get our Astro site onto the web. Luckily, Kinsta is the perfect host for a quick and painless deployment.

Start by creating a GitHub repository for your site’s files. If you’re not ready to use your own files, you can clone this Astro starter site template our team created.

GitHub repo of Astro starter site template by Kinsta

Once your repo is ready, log in to MyKinsta, select Applications at the left, and then choose Application from the purple Add service dropdown.

Add an application in MyKinsta

The final step involves you supplying Kinsta with the details of your build and deployment.

Most of what you’ll be asked, such as Process name and Payment method, will have obvious or simple answers. Note that you may leave the Start command field empty if you choose; Kinsta will automatically assign npm start as the command.

If you’re unsure how to respond to any other prompt, refer to Kinsta’s documentation for field-specific guidance and Astro deployment examples. You can also check out Astro’s own guide to deploying at Kinsta.

Once you’ve finished entering your build’s details, click the Confirm payment method button to initialize your build.

And that’s it! You now have a live, fully functioning static site created with the Astro framework.

Our live Astro homepage

You can find your live URL and other deployment details under Deployments in your MyKinsta account.

A successful Astro deployment

Summary

Astro’s clear structure, simple syntax, and global components make building and running an application really easy. , Its lightweight nature and dual use of static and dynamic routing dramatically increase site responsiveness, while its capacity for cooperating with and alongside other JavaScript frameworks makes it all the more appealing to experienced coders.

If your goal is to create a content-rich site that loads quickly, grants modular functionality, and provides both static and dynamic generation, then Astro could be the right choice for you.

You can host your static website with Kinsta’s Application Hosting for free, and if you like it, upgrade to our Hobby Tier plan.

💡 What are your thoughts on the Astro static site generator? Have you used it on a project of your own? Let us know in the comments section below.

What Is a Static Website? The Absolute Beginner’s Guide

Kinsta — Wed, 04 Oct 2023 16:00:00 +0000

Trying to decide between a static website vs a dynamic website for your next project? We got you.

In this series, we'll cover what static websites are, how they function, how they differ from dynamic websites, and the respective pros and cons of both.

By the end, you should have a good idea of which approach might be the best fit for your project, as well as how you can get started.

What Is a Static Website?

A static website is a website that serves pages using a fixed number of pre-built files composed of HTML, CSS, and JavaScript.

A static website has no backend server-side processing and no database. Any “dynamic” functionality associated with the static site is performed on the client side, which means the code is executed in visitors’ browsers rather than on the server.

In non-technical terms, this means that your hosting delivers the website files to visitors’ browsers exactly as those files appear on the server.

What’s more, every single visitor gets the same static file delivered to their browsers, which means they’ll largely have the exact same experiences and see the exact same content.

How Do Static Websites Work?

We’ll go over how to make a static website in more depth later on, but the basic approach that most static sites use is as follows:

Choose how to build your site – while you could just manually create your static HTML, CSS, and JavaScript files for very simple websites, many modern static websites will use some type of static site generator tool or headless CMS.
Set up your site – you’ll build your site using your chosen tool. Unlike something like WordPress, you won’t control your site from a live production server.
Deploy your site – this means that you move your site’s static files onto live hosting so that users can access them. You could use application hosting or you could deploy your HTML files directly to a content delivery network (CDN). Because your static site doesn’t require a database or server-side processing, there’s no need to store it on a single web server.

Examples of Static Websites and Tools

When looking at a website, there’s no hard and fast rule to tell whether it’s static or dynamic. Instead, it’s more helpful to look at examples of tools that help you build and manage static websites.

Hugo is a popular example of a static site generator.

Here are some of the most popular static website examples when it comes to software for creating static websites:

All of these tools let you create static websites, but they go about it in very different ways. For example, Publii gives you a code-free desktop interface, while some other tools require you to use the command line.

How To Build a Static Website

If you think the advantages of building a static website might make it a good fit for your next project, here’s a quick guide on how to create a static website.

We’re intentionally keeping this guide high level so that you can adapt it to your own use case.

1. Choose a Static Site Generator or CMS

To start, you’ll want to choose a static site generator or a content management system that allows you to deploy a static site.

If you have the technical knowledge, you can always create a static site from scratch using your own HTML, CSS, and JavaScript, along with your favorite HTML editor software. However, this can quickly become unwieldy as your site grows and you may or may not have the technical knowledge to do everything from scratch.

A static site generator gives you a simpler way to build your static site. It will also make it easier to update your site in the future.

Rather than needing to edit every single HTML file when you make a change (such as adding a new item to your navigation menu), the static site generator can help you deploy new versions of all your site’s files that reflect the changes.

Here are some popular static site generators that you can consider:

Jekyll – one of the most popular open-source static website generators. Can work for a variety of sites and supports blogging. We have a whole post on how to create a static site with Jekyll.
Hugo – another popular open-source generator that can work for all different types of sites. We also have a post on how to create a static site with Hugo.
WordPress + a static site generator plugin – you can use WordPress to build your site but then deploy it as a static HTML site using your preferred static site generator plugin.

For more options, check out our post with the top static site generators.

2. Build Your Website

Once you’ve chosen your preferred tool, you’ll use that tool to build your website.

How that works will depend on which tool you choose, so there’s no single guide that will apply to all static site generators.

If you’re coming from a WordPress background, using WordPress itself as a static site generator offers one of the simplest ways to get your toes wet and create your first static site.

Here’s an example of what it might look like to build a static website with WordPress:

Create a local WordPress site using DevKinsta. This will not be the site that your visitors actually interact with – it’s just where you’ll manage your content and website design.
Set up your site using your favorite design tool. You could use the native WordPress block editor or you could use your favorite page builder plugin such as Elementor or Divi.
Install a static site generator plugin. This is what you’ll use to deploy your static website in the next step. Popular options include Simply Static and WP2Static, though there are also newer alternatives such as Staatic.

The Simply Static plugin lets you use WordPress as a static site generator.

Or another option would be to pair WordPress with Gatsy using GraphQL.

3. Deploy Your Website to Hosting

Once you’ve built your website, you need to “deploy” it to your hosting. Essentially, this means you need a way to get the static HTML files from your static site generator to your live hosting environment.

There are a couple of different routes you can take here.

One approach is to set up some type of automatic/continuous deployment using GitHub. You store your site’s files in a GitHub bucket. Then, whenever you push a new version of your site to GitHub, GitHub notifies your server and your server automatically deploys the new version of your site.

For example, pushing new files to GitHub might automatically trigger a process like this:

When you make a change in GitHub, it automatically notifies your server.
Your web server pulls the latest files from GitHub and runs a Hugo build.
Your server moves the files into the live site environment.

For another Git-based option, some people also like to use GitHub pages for static websites.

As an alternative approach, some people also like to deploy directly to a CDN rather than using any type of web server. This approach might look something like this:

You upload your site’s files to some type of online storage environment. Many tools can do this automatically or via the command line.
You set up a CDN to pull from that storage.
When you publish new files to your storage, the CDN will automatically start pulling in those new files.

If your tool doesn’t offer any special features to simplify deploying your site, you would need to:

Generate your site’s static HTML files.
Manually upload those files to your static website hosting service, such as Kinsta’s Application Hosting service (which offers support for static website hosting).

Should You Use a Static Website As Your Next Project?

Whether or not a static website is a good fit for your next project depends on the purpose of your website and your own knowledge level.

As such, there’s no single one-size-fits-all answer here.

Instead, let’s go through some situations when it might or might not make sense to use a static website.

When a Static Website Might Make Sense

A static website works best for websites where all visitors see the same content and the content doesn’t change very often – especially for smaller websites with not a lot of content.

Here are some types of websites that can work very well with the static approach:

Portfolio websites
Basic business brochure websites
Resume websites
Simple blogs that don’t publish that often
Documentation content/knowledge bases
Landing pages

These types of websites are able to achieve all of the benefits of the static approach but with very few tradeoffs.

For example, you’re unlikely to need to personalize a basic business brochure website, so you’re not “losing” any functionality by using the static approach.

Similarly, these types of sites don’t change very often, so you won’t need to worry about constantly redeploying your static pages.

When a Dynamic Website Might Make Sense

To start, dynamic websites are generally always the best choice for situations where you need the ability to personalize the site experience, such as ecommerce stores, membership websites, online courses, and so on.

Basically, if you want users to be able to see different content on a page, you’ll typically want to use a dynamic website.

While there are ways to build the aforementioned types of websites using a static website, the tradeoffs that you have to make usually aren’t worth it, which is why a dynamic website might be a better choice.

Dynamic websites can also often make more sense for content-heavy sites, especially sites with lots of taxonomies and other methods of organization

Similarly, if you’re regularly publishing new content all the time, that might be a reason to go with a dynamic website.

For example, a personal blog where you only publish 1 new post every 2 weeks might be fine as a static website, but a monetization-focused blog that’s publishing 5 new posts every day will probably be better as a dynamic website.

💡Get all your applications, databases, and WordPress sites online and under one roof.

Our feature-packed, high-performance cloud platform includes:

Easy setup and management in the MyKinsta dashboard
24/7 expert support
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
An enterprise-level Cloudflare integration for speed and security
Global audience reach with up to 35 data centers and 260 PoPs worldwide

Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

Why Your Site's Slow: The Cookie Problem & How to Fix It

Kinsta — Wed, 27 Sep 2023 16:00:00 +0000

Is your website feeling a bit slow? Using up more data? Often, 'cookies' are to blame. They're useful, but too many attached to your site can drag it down.

Good news: There's a simple fix. Using cookie-free domains can speed things up. If you're using WordPress, this guide's for you.

Let's understand how domains and cookies work together – both the good and bad.

How To Use Cookie-Free Domains

The general idea of a cookie-free domain is to deliver static content without delivering cookies. Though creating a separate static domain or subdomain is the most direct way to do this, it’s also possible with CDNs and a couple of WordPress tricks.

Create a Separate, Cookie-Free Domain

With this method, you’ll create a separate domain for hosting your website’s static components, such as images and CSS.

While you can register an entirely separate domain name, it’s usually easier and more cost-effective to create a subdomain of your existing domain name. Most cookie-free domains simply use a static prefix (e.g., “static.yourdomain.com”) as their subdomain.

Note that this will only work if the “www” version of your domain (e.g., “www.yourdomain.com”) is the root domain in your website’s root file.

To make the subdomain cookieless, you’d normally have to find and edit your .htaccess file directly using special code. However, as we’ll see later, it’s much easier to simply reconfigure your WordPress site or use a plugin.

However you configure your cookie-free subdomain, you can upload static components, such as your CSS components, images, text, and JavaScript.

Use a Content Delivery Network (CDN)

Using a content delivery network or CDN is an extremely convenient way to use cookie-free domains.

Here, rather than having to create separate subdomains and edit configuration files, you can simply tell your CDN to ignore and strip cookies from the response headers of your static components. That may sound a bit complicated, but it’s actually a simple feature in many CDNs.

Note that not every CDN provides this functionality. As a result, it’s generally better to change your website’s configuration unless you’re already using a CDN that allows you to disable cookies.

Reconfigure Your WordPress Site

If you’re using WordPress, you’re in luck: All it takes to designate a cookie-free domain is to update a couple of lines in your wp-config.php file. Skip ahead to the next section (Configuring WordPress to Use Cookie-Free Domains) for complete instructions.

Use a WordPress Plugin

Another easy WordPress option is to use a plugin for creating static versions of WordPress websites.

One popular plugin for doing this is WP2Static (literally “WordPress-to-Static”). After installing the plugin, simply open it in your WordPress dashboard and configure the settings to export your website to a static version:

WP2Static

Configuring WordPress to Use Cookie-Free Domains

As mentioned above, WordPress offers an easy way to implement cookie-free domains. The process boils down to a few simple steps:

Adding an alternate subdomain and associated DNS
Telling WordPress which domain will serve up static assets
Updating existing WordPress database records to reflect this new address

Kinsta customers can use the MyKinsta dashboard to accomplish some of these tasks. Many other WordPress users will be able to do the same in cPanel.

We’ll cover both below.

Using MyKinsta To Set up a Cookie-Free Domain

Kinsta customers can associate subdomains (or completely different domains) with a WordPress instance within the MyKinsta dashboard. Many customers will also use MyKinsta’s tools to configure DNS for those domains.

In this example, we’ll create a cookie-free domain at static.example.com for our website already up and running at www.example.com.

Step 1. Create a Subdomain in MyKinsta

If you initially established your WordPress site at Kinsta using the wildcard option with its domain name (like: *.example.com), you are already set to support any subdomain name. If not, you can add the new domain for cookie-free content like this:

Select WordPress Sites on the left-hand menu.
Click on the name of your WordPress site.
Select Domains on the left-hand menu.
Click the Add Domain button.

Adding a subdomain within MyKinsta.

In the following dialog:

Type the name of your cookie-free domain.
Click the Add Domain button.

Specifying the new subdomain within MyKinsta.

Next, your new static domain will need a DNS record pointing to your existing website. If you manage DNS for your domains through a third-party provider, you will use their tools to do that. If your DNS is provided by us, configure your new domain in MyKinsta like this:

Select DNS on the left-hand menu of the MyKinsta home page.
On the DNS Management page, scroll down to the DNS Records block and click the Add DNS Record button.

We recommend adding your new subdomain to DNS as a CNAME record, allowing you to rely on just the second-level domain name for associations with IP addresses. Below, we are adding a CNAME record for static that points to example.com:

Creating a CNAME record in MyKinsta DNS management.

Step 2. Disable Cookies on Your Static Subdomain

Now we’ll edit your WordPress site’s wp-config.php file so that assets within the wp-content folder are served up from the “static” domain and cookies are delivered only via the “www” address.

Most Kinsta customers will use an FTP/SFTP client to login to their WordPress site and download wp-config.php to their desktop for editing:

Downloading the wp-config.php file to the desktop.

Use a text editor to add the following lines to the wp-config.php file (replacing the example domains with your own own):

define("WP_CONTENT_URL", "https://static.example.com/wp-content");
define("COOKIE_DOMAIN", "www.example.com");

After saving the file, upload it to your WordPress site, replacing the previous version.

Step 3. Redirect Existing Assets to the Subdomain

The steps above will allow cookies to be handed out when browsers load content like pages and blog posts from the “www” address, but will cause content like media uploads and assets like JavaScript, CSS and fonts within themes to be associated with the “static” domain.

However, your website may already have content that contains links to those assets at the “www” address. You can clean that up with a little search-and-replace in the WordPress database itself.

Always back up your WordPress site before working in the database. After that is done:

Select WordPress Sites on the left-hand menu of the MyKinsta dashboard.
Click on the name of your WordPress site.
Select Domains on the left-hand menu.
On the Site Information page, scroll down to the Database Access block. (You can copy database username and password information here if needed.)
Click the Open phpMyAdmin link.
Login to your WordPress database.
Click the SQL tab.

Running an SQL query to update asset links in WordPress content.

Run the following command to be sure that any asset links within your existing posts are directed to your cookie-free subdomain (again, being sure to replace the domains with your own):

UPDATE wp_posts SET post_content = REPLACE(post_content, 'www.example.com/wp-content/', ' static.example.com/wp-content/')

You’ve now successfully configured a cookie-free domain in WordPress with the help of MyKinsta. Use this domain to host any static content for which you don’t want to send WordPress cookies and use your regular domain for everything else.

Using cPanel To Set up a Cookie-Free Domain

Here are the steps to accomplish what we did above in MyKinsta using cPanel or one of the popular cPanel alternatives.

Step 1. Create a Subdomain in cPanel

Navigate to the Domains section of the cPanel main page. In the Subdomains tool, simply create a subdomain connected to the top-level domain of your current WordPress site.

These settings can be seen below to create the subdomain static.example.com.

Creating a subdomain in cPanel

Step 2. Configure the Subdomain as Static in cPanel

With your new static subdomain ready to go, it’s time to make it live up to its name by making it serve static content in WordPress.

We’ll do this by editing your WordPress site’s wp-config.php file. The easiest way to access this file is in cPanel’s File Manager tool.

In File Manager, navigate to your website’s public_html folder and select wp-config.php (1). Then, select the Edit option (2) to edit the file.

Locate the wp-config.php file

In the wp-config.php file, simply add the following lines (being sure to replace the domains with your own!):

define("WP_CONTENT_URL", "https://static.example.com/wp-content");
define("COOKIE_DOMAIN", "www.example.com");

Click “Save Changes.”

Step 3. Redirect Existing Posts to the Subdomain

Finally, you’ll need to redirect your existing posts to the new static subdomain. But first, be sure to back up your WordPress site just in case it doesn’t function properly after.

In the Database section of cPanel, open the PhpMySQL tool. Select your site’s database and then its _posts table.

Click the SQL tab of the _posts table. Run the following command to verify that your post URLs are directed to your cookie-free subdomain (again, being sure to replace the domains with your own):

UPDATE wp_posts SET post_content = REPLACE(post_content, 'www.example.com/wp-content/', ' static.example.com/wp-content/')

Redirecting existing posts to the new static subdomain

And that’s it! You’ve now set up a cookie-free domain in WordPress with the help of cPanel. Use the cookie-free domain for static content like images, CSS, JavaScript, and fonts, while allowing cookies on your site’s primary domain.

Setting up cookie-free domains in WordPress is beneficial. However, only a managed WordPress host like Kinsta can take full advantage of these benefits.

With convenient tools for removing set-cookie headers and direct database access to redirect posts to a static subdomain, it’s never been easier to use cookie-free domains. Kinsta’s APM tools and other performance-monitoring features can also help you track the results.

MEAN Stack Explained

Kinsta — Tue, 26 Sep 2023 18:46:18 +0000

The MEAN stack is an open-source collection of JavaScript technologies that’s gained significant popularity. It makes it easy to build complex, full-stack web applications and is an excellent option for front and backend development.

This article explores the MEAN stack’s components and use cases, highlighting why it’s an intelligent choice for your full-stack applications.

Is the MEAN Stack Right for You?

The MEAN acronym comes from its four key components: MongoDB, Express.js, Angular, and Node.js. Each component plays a vital role in building flexible and efficient JavaScript applications.

MongoDB

MongoDB is a popular NoSQL database that stores data as binary JSON (BSON) documents. Its extensive flexibility and scalability make it well-suited for applications that store large and complex data. It’s also cross-platform, allowing you to use a single language across the entire stack.

Express.js

Express.js is a flexible, lightweight framework for the backend development of Node.js applications. It acts as middleware to ensure smooth interaction between the client and the database. It also offers robust routing capabilities and a default error handler.

Angular

Angular is a JavaScript framework for frontend development. It provides features like two-way data binding and dependency injection to enable dynamic views, simplifying how you build complex and interactive user interfaces.

Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment. It enables server-side JavaScript execution and provides an event-driven, non-blocking I/O architecture. Its asynchronous nature means it can handle multiple concurrent requests without blocking the execution of other code.

Advantages of the MEAN Stack

The MEAN stack makes it easy to build full-stack, real-time web applications. Let’s go over some of its most compelling benefits.

Full-Stack JavaScript

MEAN’s primary advantage is that it lets you build full-stack applications using a single language, allowing you to reuse code and keep it structurally and syntactically consistent. Reusability can significantly accelerate the development process so you can focus on more complex tasks.

Scalability

MEAN is also exceptionally scalable, making it a popular choice for building large-scale web applications. The asynchronous architecture of Node.js enables easy horizontal scaling, and MongoDB supports sharding. You can distribute your data storage across numerous servers and add more servers to your clusters as demand increases.

Community and Ecosystem

As an open-source tech stack, MEAN has a thriving developer community contributing to its ongoing development and maintenance. This culture of collaboration also gives it a well-rounded support system and a low barrier to entry, with many learning resources to help you get started.

In addition, MEAN has a wealth of libraries, frameworks, and other tools within the Node.js package manager (npm). This rich ecosystem enables you to integrate features easily into your application without building them from scratch.

MEAN Stack Limitations

While MEAN does offer several advantages, it may not always be the right choice for certain applications. There are a few drawbacks to keep in mind.

Limited Support for Relational Databases

Relational or SQL databases store data in tables using a rigid schema to ensure data integrity and structure. However, MongoDB is a NoSQL database that stores data in the more flexible BSON format.

Developers wishing to use relational databases with the MEAN stack must integrate additional tools. However, it makes the application more complex, which can detract from its maintainability. Therefore, MEAN may not be ideal for applications that require highly structured data with optimal integrity.

Performance Issues

Unlike how it handles other tasks, Node.js executes JavaScript code one task at a time. While this single-threaded model has its advantages, it can also lead to bottlenecks when dealing with CPU-intensive tasks.

Steep Learning Curve

Despite their supportive communities and resources, Angular and MongoDB can be difficult for new developers to learn.

Angular is a complex and verbose framework with advanced features that require significant time and effort to comprehend. Developers may also need to contend with its continuous evolution and regular updates while they navigate the framework.

Meanwhile, developers with more experience using traditional SQL databases may find it challenging to adapt to MongoDB’s flexibility. Because MongoDB doesn’t require a strict schema, developers may need to learn new techniques and syntax for optimizing indexes and managing transactions.

Use Cases for the MEAN Stack

Despite these minor weaknesses, the MEAN stack is ideal for developing a wide range of applications.

Single-Page Applications

MEAN is great for building single-page applications (SPAs), such as ecommerce applications, content management systems (CMSs), and social networking applications.

SPAs must supply dynamic and (often) personalized updates without requiring end users to reload the page. Angular simplifies this dynamic view creation through its component-based architecture, templating, and two-way data binding. You can customize your UI to your users’ preferences and update it in real time based on their interactions with the page.

Furthermore, you can combine Angular with Express.js to enhance the user experience. While Angular dynamically renders the UI, Express.js provides the routing and middleware to handle client requests and communicate with the database or external services.

Real-Time Web Applications

The MEAN stack is also ideal for building real-time web applications, such as gaming sites, chat applications, and collaboration tools. Node.js supports real-time data processing through its asynchronous I/O model. It also provides web sockets to enable seamless data transfer between the client and server without needing multiple HTTP requests.

This persistent connection enables applications to deliver live messages and updates. When a user sends a message in a chat application, and the server immediately broadcasts it to the intended recipient, they experience the all-but-invisible benefit of the persistent connection.

Data-Intensive Applications

MEAN is also well-equipped to handle the demands of data-intensive processes that drive applications like ecommerce platforms and finance software.

Node.js is an excellent option for processing and managing large amounts of data without impacting performance. Meanwhile, MongoDB is exceptional at handling large and complex data sets. It can also make read-and-write operations to the database, which are crucial functions for applications that must store, update, and retrieve data quickly.

Summary

The MEAN stack is a powerful solution for building robust full-stack applications. It allows you to use a single language to develop the frontend with Angular and the backend using Node.js. MongoDB helps you handle complex data, and Node.js establishes an asynchronous runtime environment for enhanced performance and responsiveness.

From SPAs to chat applications to e-commerce platforms, MEAN lets you build highly responsive and flexible applications that can scale to meet traffic and data demands. It also has a large community of active users and numerous libraries and tools to help you get started.

With Kinsta, you can easily deploy MEAN stack applications, providing a Platform as a Service to ship your application without needing to manage infrastructure. You can deploy changes to your application at every push to your Git repository.

Use Pseudocode for a more efficient (and headache-free) coding

Kinsta — Wed, 09 Aug 2023 16:45:00 +0000

Ever heard of Pseudocode? It's a combination of simple language and programming elements that helps you represent your code.

Understanding it is a time-saving trick you can integrate into your process at any time - so you don't have to be stressed and frustrated when explaining your code to others.

Here's more about Pseudocode, how it's used, and why it's an essential tool for any developer.

What Is Pseudocode?

Pseudocode is a simplified way of explaining coding elements like algorithms, functions, or other processes, using a mix of everyday language and programming-like elements.

It’s called “pseudo” code because it’s not actually executable. Instead, it’s a way for humans to understand and plan out the logic in coding — to describe the steps of a program in a way that’s easy for humans to understand, while still being detailed enough to be rapidly converted into a specific programming language.

Here’s a simple example of pseudocode, in which we’re working out the basic logic to greet a visitor by name when they navigate to our site or app:

PROCESS GreetUser
    INPUT userName
    DISPLAY "Hello, " + userName + "!"
END

As you can see, the above pseudocode isn’t written with syntax from any actual language or framework. Instead, it uses simple, universally understandable language and programming elements — like PROCESS, DISPLAY, and + — to stand in as syntax, making it simple for anyone to follow.

That’s one of the powers of writing pseudocode: By laying the code’s intentions out in a common syntax, you can jump all programming and skill-based language barriers.

How To Write Pseudocode

Pseudocode's flexibility comes from its lack of specific syntax, which means there's no single correct way to write it. While languages like Pascal and Basic provide specific pseudocode rules, you can use any language or terminology, as long as it's universally understood and the logic is clear.

Despite its open-ended nature, developers usually follow some basic pseudocode guidelines. Let's dive into these next.

Sequences

A sequence is a group of statements that are executed in a specific order. They’re used to perform or repeat a series of simple actions. Some familiar sequence commands commonly used in pseudocode include INPUT, SET, PRINT, READ, DISPLAY, SHOW, and CALCULATE.

Here’s an example of pseudocode that uses some of these commands:

PROCESS CalculateCost
    INPUT price, quantity
    SET cost = price * quantity
    PRINT "The cost is: " + cost
END

This pseudocode defines a process called CalculateCost that takes in a price and quantity, multiplies them together to calculate the cost, and then displays the result.

Conditionals

Conditional statements allow a program to make decisions based on certain conditions, then direct the program to execute certain statements if a condition is met (or not met). IF-ELSE, IF-IF ELSE-ELSE, and CASE statements are frequently utilized in pseudocode.

Here’s an example showing an IF-ELSE script in pseudocode:

IF user = returning
    PRINT "Welcome back!"
ELSE
    PRINT "Welcome!"

In the above example, we’re describing a process that shows a “Welcome back!” message to users who have visited before, but shows only “Welcome!” to new users.

Iterations

Iteration statements repeat a set of steps within a larger function or process. They’re often tasked to perform the same operation on multiple items in a list or to repeat a process until certain conditions are met.

Iterations are useful for repeating a set of steps multiple times and can be implemented using various types of loops, including FOR, WHILE, and DO-WHILE loops.

Let’s look at some pseudocode that uses a FOR loop to iterate through a list of numbers:

PROCESS PrintWholeList
    INPUT listOfNumbers 
    FOR each number in listOfNumbers
    PRINT number
    END FOR
END

In the above pseudocode, our PrintWholeList process takes in a list of numbers and then iterates through the list, displaying each number on the screen. The FOR loop allows the process to repeat the PRINT command for each item in the list.

Alternatively, we could utilize the common pseudocode to accomplish the same as our above loop. In pseudocode, it’s more common to use the keywords REPEAT and UNTIL in place of DO-WHILE:

PROCESS PrintWholeList
    INPUT listOfNumbers 
    SET counter = 0
    REPEAT
    PRINT listOfNumbers[counter]
    SET counter = counter + 1
    UNTIL counter = length of listOfNumbers
END

As shown here, we can switch out the names, keywords, and syntax pieces all we like. This is just one demonstration of pseudocode’s flexibility. The key is to ensure that the logic is stable while using names that are ubiquitous enough to be read by anyone.

You can see some of these constructs used in the pseudocode examples we’ll work with later on.

Pseudocode Examples and Translations

Here are some examples of pseudocode, along with their translations into executable code in various languages and frameworks.

PHP

To start, let’s write some pseudocode that’s meant to mimic the logic of adding up all the numbers in a given list:

PROCESS FindTotal
    INPUT listOfNumbers
    SET sum = 0
    FOR EACH number IN listOfNumbers
    SET sum = sum + number
    END FOR
    PRINT sum
END

Our pseudocode logic follows these steps:

Give the function a name.
Get the list of numbers from the end user.
Create a variable called sum to house the numerical total as it gets calculated.
Iterate through every number in the list one by one, adding each number to the sum’s total.
After all the numbers have been added, end the iteration (loop).
Display the final sum obtained from adding all the numbers together.
End the function.

Now that we know the logic of our function, we can translate this pseudocode into any other language or framework. Let’s see what it might look like translated into PHP:

function findTotal($listOfNumbers) {
    $sum = 0;
    foreach ($listOfNumbers as $number) {
    $sum += $number;
    }
    echo $sum;
}

Node.js

Next, let’s write some pseudocode we can use to check what the current time is for our visitors, then send them the appropriate greeting based on their time of day:

PROCESS TimedGreeting
    GET userTime
    IF userTime > 6:00 + < 12:00
    PRINT "Good morning!"
    ELSE IF userTime > 12:00 + < 18:00
    PRINT "Good afternoon!"
    ELSE
    PRINT "Good evening!"
END

Our pseudocode logic follows these steps:

Give the function a name.
Find the user’s time.
If the user’s time is between 6:00 AM and 12:00 PM, show the message “Good morning!”
If the user’s time is between 12:00 PM and 6:00 PM, show the message “Good afternoon!”
For any other time, show the message “Good evening!”
End the function.

Translated into Node.js, it might look like this:

function timedGreeting() {
    const userTime = new Date();
    if (userTime.getHours() > 6 && userTime.getHours() < 12) {
    console.log('Good morning!');
    } else if (userTime.getHours() > 12 && userTime.getHours() < 18) {
    console.log('Good afternoon!');
    } else {
    console.log('Good evening!');
    }
}

Python

For our next example, let’s write some pseudocode to outline the logic for reversing a string (in this case, a sentence) that’s given to us by a user:

PROCESS ReverseString
    INPUT string
    SET reversed_string = reverse of string
    PRINT "The reversed sentence is: ", reversed_string
END

Our pseudocode logic follows these steps:

Give the function a name.
Prompt the user for a string and accept what they provide.
Store the value of the user’s string variable.
Slice the stored string value to reverse it, and store the result in a new variable.
Display the reversed string on the screen.
End the function.

When translated to Python, it might look like this:

string = input("Enter a sentence: ")
reversed_string = string[::-1]
print("The reversed sentence is: ", reversed_string)

In some cases, your actual translated code will be shorter than your pseudocode. That’s fine. As long as your pseudocode’s logic is sound and your translated code functions as it should, you can disregard the discrepancies in length.

💡 Got any other use-case idea for Pseudocode? Drop them below!

Laravel Caching Strategies Every Developer Wishes They Knew Sooner

Kinsta — Wed, 02 Aug 2023 12:00:00 +0000

Caching is essential for fast and efficient websites. Implementing the right caching strategy from the start is crucial to avoid slow APIs and page load times that can harm your SEO, user engagement, and conversion rates.

There are several cache strategies available, and you can even create a custom strategy to fit your needs. Here are some popular caching strategies that you can implement in your Laravel project.

Laravel Caching Strategies

writeThrough

In the writeThrough strategy, the cache server sits between the requests and the database server, making every write operation go through the cache server before going to the Database Server. Thus, the writeThrough caching strategy is similar to the readThrough strategy.