I was looking for a way to integrate Google site search on my Hugo sites and wasn’t happy with most of what I found, like this which brings your users to Google.com.

Not finding any tutorials, I decided to do this on my own.

Go to https://programmablesearchengine.google.com/

Click Get Started.

Fill out the form and click Create. You’ll get some code like this:

Find the file within your Hugo theme where you want to add the code.

If you use the code as is, you’ll get a search box with results appearing underneath the search box, which might be good for some use cases. The Programable Search engine provides a few other layouts which you can get if you go back to the Programmable Search Engine, edit your search engine, and go to Look and Feel > Layout.

Personally, I like the Overlay and Two page layouts.

Just be sure to get the code for the new layout, as it changes depending on what you select.

Lastly, be sure to modify the search form and search results appearance thru the Look and Feel > Customize section or by editing your CSS.

What a quick and easy way to add search to a site and it doesn’t need a server to run!

The post Add Google Search to a Hugo Website appeared first on Jason Jalbuena.

The post Marcy Design websites appeared first on Jason Jalbuena.

Kinsta Academy currently offers 4 WordPress courses, comprised of 90 training videos and tests. The courses are:

• How to Speed Up Your WordPress Website
• The Basics of Maintaining Client Sites at Scale
• How to Optimize Your WooCommerce Store
• Custom Gutenberg Block Development With the WordPress Block Editor

It should be noted, and obvious from their course titles, that their courses are not aimed at WordPress developer newbies. They are targeted toward current WordPress developers. There is no boot camp, start-with-no-knowledge type WordPress courses (as of the time of this writing).

So, I’ve been doing WordPress development professionally for a good while now, but as a self-taught WordPress developer, I’ve never received certification or anything official. I figured I’d make it my goal to start the courses now and be certified by the end of the year.

After signing up, I noticed that they let you take the tests before watching any of the course videos, so I figured I’d take them first so I can compare my results after completing the courses. I took all the tests, did really well, and passed them all!

So, am now certified and it didn’t take weeks and weeks of doing the courses as expected. See my Kinsta Academy certificates below:

The post Am now a certified WordPress developer appeared first on Jason Jalbuena.

Copy cells directly from a spreadsheet (such as Google Sheets or Libreoffice Calc) and paste it into this block. Spreadsheet cells will be displayed and formatted properly.

The block will not retain any of the source spreadsheet’s formatting such as fonts and colors – it will take the copied data and use WordPress and your theme to format and display it.

You can install the plugin by either…

• going thru the WordPress admin by going to Plugins -> Add New and searching for Spreadsheet Paste Block
• download it at the WordPress.org repository here: Spreadsheet Paste Block.
• searching for Spreadsheet Paste Block in the WordPress Block Directory while editing a post, as shown here:

You can contribute to or fork the plugin thru its page on GitHub: Spreadsheet Paste Block.

The post WordPress Plugin: Spreadsheet Paste Block appeared first on Jason Jalbuena.

Years after I published my plugins to the WordPress plugin repository, I finally wanted to make updates – I basically forgot about the plugins after publishing them. As I no longer have access to a Windows or Apple computer, I only have my Linux laptop now – I found there are no free GUIs for SVN. It was time to finally learn to use SVN using the command line!

I won’t go over the basics, like folder structure or installing SVN, as there are a ton of articles and guidance out there. This is just my personal reminder for the commands needed for future plugin updates – this also works as is for brand new plugins that still need their first SVN upload.

First, we need to download and “initialize” the SVN repo on your machine. Go to a folder where you’d like your plugin files to be downloaded and use:

svn co https://plugins.svn.wordpress.org/your-plugin-slug/

This needs to be done just once.

After that’s all done, go into the folder that was created:

cd your-plugin-slug

Go ahead and make your changes to the trunk and tags folders. See a list of changed files using:

svn stat

From the output, “M” means modified and “?” means new.

Commit/save your changes using:

svn add --force trunk/*
svn add --force tags/*
svn add --force assets/*

Not using “–force” gives an error, so use it.

Lastly, push your changes to the WP repo and add your commit/log message:

svn --username=WPUSERNAME ci -m "Commit/log message"

Change WPUSERNAME to the username you use in WordPress.org and change the “Commit/log message” appropriately. It will prompt you for your WordPress.org password.

Done.

If it matters, am using Pop!_OS 20.04 LTS, which is based on Ubuntu 20.04 LTS.

The post SVN command line to update WordPress plugins appeared first on Jason Jalbuena.

My great designer friends at Hybrid Studios designed the site while I took care of turning their design into a working website. We used a very customizable premium WordPress theme as a base.

Project Highlights

WordPress Theme Customization

Hybrid provided mockups of the design and the theme to use. Some WordPress themes are very intuitive and straight-forward to install, properly set-up, and customize. Other themes are a direct opposite and are tricky to figure out. This theme was confusing, I’d put it in the middle of the easy to hard to customize scale. It took a while, but I was eventually able to properly set-up and customize the website to the design specifications.

Custom CSS

While most theme customizations will need some custom CSS to get some design elements to look or work in a way different than the theme was programmed for, the CSS required for this site was quite tricky.

Custom CSS was used to give the images used the diagonal cut – i.e. they are not rectangles, but have one or more sides at an angle. Because of the way the theme handles the responsiveness (adaptability to different screen sizes, like from desktop to mobile) of images used in backgrounds, simply cropping the images or adding a white section on top of the images themselves could not be used.

CSS was used so that a white overlay is put on top of the images. This white overlay gives the impression that they have one or more sides on an angle. They are also responsive and works/looks well for devices from the smallest of mobile phones to full-HD screens.

The post World Harvest appeared first on Jason Jalbuena.

So, just how do you have and use different Hugo versions on the same machine?

First, download the proper Hugo release from github for your machine. In my case, it’s the .deb for version 0.80.0 for Linux 64-bit.

After downloading it, I rename the file to something easier to type, so I rename it to ‘hugo.’

Install Hugo:

sudo dpkg -i hugo

go to the location where it was installed:

cd /usr/local/bin

Rename it so it has the version number. For v0.80.0, I renamed it hugo0800

sudo mv hugo /usr/local/bin/hugo0800

If all I want is one version, I’d be done, but I want to have another version which is what this blog post is about. Download the other version (the 0.76.3 version this time), rename it, and install just like the 0.80.0 version.

sudo dpkg -i hugo

I got a warning, but I suppose it doesn’t matter.

Proceed to rename the binaries…

cd /usr/local/bin
sudo mv hugo /usr/local/bin/hugo0763

Ok, now we have 2 versions installed. We use them the same way as plain ‘hugo’ but with the new names. Let’s confirm they work as expected. First, let’s see if they report the right versions…

hugo0763 version

hugo0800 version

It’s looking really good. Then let’s test with an actual site….

hugo0763 server -D

hugo0800 server -D

Browsing to http://localhost:1313/ shows that the site works for either version

Done! Repeat for other Hugo versions as needed.

Small side note:
I’ve switched from a 2013 Macbook air with macOS 10.15.7 Catalina, 1.7 GHz dual-core Intel i7 and 8GB RAM. For this site am working on, it took that machine 8000-9000 ms to build…

My new machine is a System76 Lemur Pro running Pop!_OS 20.04 with an 11th Gen 4.7 GHz Intel i7 (4 cores, 8 threads) with 25 GB RAM and it takes it 61ms to build! What a huge difference!!

The post How to run multiple Hugo versions appeared first on Jason Jalbuena.

A website was already started with Wix.com but wasn’t completed because of complications with receiving donations and design.

Project Highlights

Server, WordPress, and setup

Because the old site was on Wix, a new server on another host was created and a new install of WordPress was deployed for this project. To keep costs low, an applicable non-premium theme was installed together with all the plugins that this website would need.

Content from the first site was imported over and the theme was customized. The site layout and outline were implemented to make a very clean website.

Contact form and donations

One requirement was for there to be a contact form present on the site so that visitors could contact Travis and volunteer for his campaign. A forms plugin was installed and a contact form was configured.

Another requirement was for the website to be able to receive donations thru First Data’s Payeezy. A suitable solution was used, which also enabled the collection of the donor’s place of employment for donations over $250.00.

The post Travis Stauffer for State Representative appeared first on Jason Jalbuena.

I’ve been playing around with Jamstack sites and really like them. Yes, I was interested in a few of the JS frameworks but nothing like this. Those frameworks fell short with on-site SEO. Sure, ways around the SEO issues were developed later on but I haven’t seen or heard of them proving they worked thru SEO experimentation. Not that I looked too deep, just a few times here and there. Anyway, I never did get to really learn any of them because of this and thus haven’t moved far from my WordPress focus.

Until now. I like Gatsby but am really enjoying Hugo. I also found Stackbit, which helps you set-up Jamstack sites. It makes setting new production sites as easy as click, click, click – choose a theme, what SSG (static site generator, Hugo is my current choice) to use, which headless CMS to use, and connect your github and Netlify hosting accounts – and it auto-magically sets it all up for you.

So much more can be said about Jamstack and what makes it so great, but that’s not what this post is about.

The problem

As a dev working on a site, I need to be able to work on its theme and to do so I need to be able to work on it locally. Stackbit provides instructions for how to do this but I hit a wall because it doesn’t work on Windows (no issues getting it working on my Mac). Googling didn’t find me any help, so am documenting what I did to help others and my future self.

To be clear, I used Stackbit to start a Hugo site paired with the Netlify CMS. It works great in production but I couldn’t get the site to work locally in my Windows machine. The git repo for the site (created in my Github account by Stackbit) has the following instructions:

In a Windows machine, steps 1 and 2 are no problem. Step 3 and 4 (maybe) won’t work as the instructions are for Macs. I should note that you already should’ve cloned your site’s repo locally. So what to do…

The solution

STEP 3

The ‘export’ command doesn’t work in Windows. This command is for assigning environment variables. To assign environment variables in Windows, follow the instructions here. Add a new variable STACKBIT_API_KEY with your API key as the value.

Skipping step 4, the site will run fine. Run ‘hugo server -D’ in the root folder of your site. Go to https://localhost:1313/ to see the local version of your site. Edits to files immediately appear. I got an error trying to use the local Netlify CMS at https://localhost:1313/admin, so I proceeded with step 4.

STEP 4

If you have Node installed, then this step should work for you. Otherwise, install Node first. I have chocolatey installed so I used choco install nodejs in PowerShell. Restart your computer and test Node to make sure it is installed.

In PowerShell, go to your site’s folder and run the command for Step 4. Then start up your site with the ‘hugo server -D’ command.

The local site ran fine again but trying to login to the local CMS still gave me an error. I revisited the admin URL again (https://localhost:1313/admin) and it logged me in.

A note on using the local CMS while working on the local site: Making content changes will cause it to commit to the live Github repo, which will then deploy changes to your live website. Therefore, don’t use the CMS if you’re testing locally. Use your local tools to work on the theme and content files.

The post How to run a Stackbit Hugo site locally on Windows 10 appeared first on Jason Jalbuena.

You cannot configure HTTPS support on your origin, even with a certificate that is not valid for your site. Visitors will be able to access your site over HTTPS, but connections to your origin will be made over HTTP.

I don’t remember the exact issues I faced, but I concluded that I wouldn’t try again until I had a proper SSL certificate installed on my server.

I’d pretty much forgotten all about getting SSL, but Google’s push for all websites to have SSL has urged me try again. A lot has changed since then, including the launch of Let’s Encrypt and my now using Serverpilot.

I manage a couple of websites using the free plan of Serverpilot, which doesn’t provide a way to automatically configure SSL certificates on your servers. So, here’s how I managed to install Let’s Encrypt SSL certificates on my servers on the free Serverpilot plan on sites already active on Cloudflare.

But first, a brief introduction to those services in case you don’t know what they are:

Let’s Encrypt – provides free, automated SSL certificates.

Serverpilot – is a secure control panel optimized for hosting WordPress and PHP websites on cloud servers.

Cloudflare – is a CDN & security provider that protects and accelerates any website online.

All of these services have tiers that are free and paid.

Ok, let’s start:

For your own purposes, please change the following when applicable:
appname to your own Serverpilot app’s name
user@domain.com to your email address
example.com to your domain name

1. Sign in as root using SSH:

ssh root@yourserverip

2. Download the Let’s Encrypt client from its GitHub repository:

git clone https://github.com/letsencrypt/letsencrypt

3. Enter the newly downloaded directory:

cd letsencrypt

4. Execute the downloaded client and set a couple of flags:
To add additional domains/subdomains, add an additional -d www.example.com

./letsencrypt-auto certonly --webroot --webroot-path /srv/users/serverpilot/apps/appname/public --renew-by-default --email user@domain.com --text --agree-tos -d example.com

Ok, you should have your SSL certificates ready to use. You should’ve received an onscreen confirmation message like so:

Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/appname/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/appname/privkey.pem
Your cert will expire on YYYY-MM-DD. To obtain a new or tweaked
version of this certificate in the future, simply run
letsencrypt-auto again. To non-interactively renew *all* of your
certificates, run “letsencrypt-auto renew”

Now, we need to configure the server to use the SSL certificates:

5. Go to the nginx configuration directory:

cd /etc/nginx-sp/vhosts.d

6. Create/edit a new configuration to use:

sudo nano appname.ssl.conf

7. Paste the following in:

server {
	listen 443 ssl http2;
	listen [::]:443 ssl http2;
	server_name example.com;

	ssl on;

	# letsencrypt certificates
	ssl_certificate      /etc/letsencrypt/live/appname/fullchain.pem;
	ssl_certificate_key  /etc/letsencrypt/live/appname/privkey.pem;

        #SSL Optimization
	ssl_session_timeout 1d;
	ssl_session_cache shared:SSL:20m;
	ssl_session_tickets off;

        # modern configuration
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK'; 

        # OCSP stapling 
        ssl_stapling on; 
        ssl_stapling_verify on; 

        # verify chain of trust of OCSP response 
        ssl_trusted_certificate /etc/letsencrypt/live/appname/chain.pem;

        #root directory and logfiles 
        root /srv/users/serverpilot/apps/appname/public; 

        #index files
        index index.php index.html index.htm;

        access_log /srv/users/serverpilot/log/appname/appname_nginx.access.log main; 
        error_log /srv/users/serverpilot/log/appname/appname_nginx.error.log; 

        #proxyset 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-SSL on; 
        proxy_set_header X-Forwarded-Proto $scheme; 

        #includes 
        include /etc/nginx-sp/vhosts.d/appname.d/*.nonssl_conf; 
        include /etc/nginx-sp/vhosts.d/appname.d/*.conf; 
}

Note:
A) This configuration is copied from https://bjoernfranzen.com/how-to-set-up-a-letsencrypt-ssl-certificate-for-your-wordpress-website-on-a-digital-ocean-server-managed-with-a-serverpilot-free-account/, an excellent write-up and a worthwhile read.
B) I added the #index files section as my server was causing index files to save on my browser’s downloads folder and was not simply opening them in the browser.
C) to add additional domains/subdomains, simply list them on the server_name line, like so: server_name example.com www.example.com;

8. Restart nginx

service nginx-sp restart

On the cloudflare side, be sure to switch SSL on via the Crypto tab, like so:

And that’s it! Go to the https:// version of your website to test. If you’re using WordPress, the Really Simple SSL pluginis an excellent plugin to use to rewrite all your URLs and generally use SSL on your website.

Renewing all your certificates is as easy as SSH’ing as root again and using:

cd letsencrypt
./letsencrypt-auto renew

The post Install Let’s Encrypt SSL on Free Plan of ServerPilot on a Site Already Active on Cloudflare appeared first on Jason Jalbuena.