Ninja Space Content Blog

I can't believe it. With AI integrated, I built a website in 10 minutes using Yola!

I was in utter shock how quickly it generated my website. I've been building simple websites for over a decade but CMS is really the way to go if you have a small business needing a website. 

I know it is easier for me because I have been using CMS tools for many years, and can build a website from scratch. However, you really don't need to know or create any code with the AI integrated with Yola (CMS) at all. It does it for you.

Steps on getting a quick website up:

1. Find a domain name. Whether you do it from Godaddy or directly through Yola, you should purchase this as soon as you know what domain name you want to claim it! This takes some thought because your domain name is also like your brand. Hopefully the name of the business that you're thinking of forming does not have the domain name taken. For example, if you own a donut shop and it is called "Sam's Donuts", ideally you'd want your domain name to be www.samsdonuts.com. That makes the most sense! If that is taken, you're in tough luck and will need to see if other extensions are available like a .us instead of a .com. However, I always encourage obtaining the .com version when possible. If a domain name is taken and it's for sale by the owner, I really don't know if it's worth buying it if it's like an outrageous amount. I never spend more than $20 a year for a domain name. That's just me personally.
2. Then, create a Yola account. I subscribe to the middle tier, which includes like 20 something sites. It's a pretty good deal if you plan on publishing many websites, like for yourself or family members. This website (ninjaspacecontent.com) is hosted by Yola. I created this website before AI tools were available so it took me longer to get it first published.
3. The website that took me 10 minutes to create is pismoweb.com, which is currently hosted by Yola and created with Yola's AI building tool. I bought the pismoweb.com domain first through GoDaddy. I could have done it through Yola as well but I am just used to doing it through Godaddy. With Yola, the AI builder generated what it thought my business type would need as far as layout and content. It took minutes but was super quick, considering if I did this manually instead!
4. After you have used the AI tool integrated with Yola to create your website. Go in and edit places where it seems necessary. AI creates the skeleton but it is still dependent on the author or website owner to personalize it to you and/or your business. This will take some time. I spent a good 30 minutes editing content to make it fit to my needs. You might not have to do that. Of course, you can always go back and edit after you publish it at any given time.
5. After you're happy with how it looks, publish it. Yola will give you guidelines on how to point your domain to their servers for hosting or it will prompt you to buy a domain through them to publish it that way. 

Today for 3 hours in the middle of the night between 2AM - 5AM, I was on a mission to update my react app to use Vite!

I had to use about 3 different resources to get my app to render correctly. In the past, I've only mainly used npm commands and had never used yarn or Vite before so I've beefed up my stack today!

I followed these instructions by slushman to almost a "T".

What I got stuck on was getting my components to render. I had to change how I was importing reactDOM. The line that I had to change to was the following in the main index.jsx file: import ReactDOM from "react-dom/client";

Then, at the end of my index.jsx file, I had to make sure I rendered it like this:

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( .... );

After I was able to get the components showing, I wanted to update my Godaddy Cpanel to reflect the changes that I made immediately. I knew that if I waited for the next day, I might not get to it until way later.

Because I had uploaded a React App on Cpanel before (read this blog entry that I wrote), I only had to change 3 files that were located in the Build folder after I had built it out with the 'yarn build' command! What a night, err...almost morning now! I will have to delete my old files later from the 'public html' directory on Cpanel. I'm currently curious if it'll affect how my pages are served with those old file names still in the directory. However, I'll wait a couple of days before removing them.

Although you can read my blog entry about how to upload your React App using the Cpanel on Goddady, here's another great resource on how to use Godaddy to deploy an app: https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6. that may be helpful as well.

This year has started out very interestingly.

I had realized my Google Adsense ads were not showing anywhere on my other higher trafficked blog. I never had this problem before and I've had Google Adsense ads on the website for over 5 years. The first thing I did was looked into the auto-ads configuration. I didn't have it activated before, so I went ahead and did that and copied and pasted the script to the header. That didn't fix it. 

New Adsense Rules for 2025

Then, this morning, I looked under my 'Sites' list under Google Adsense under my account and noticed that my Ads.txt status was "Not found"! I don't know why I never saw this before, but it never stopped my ads from showing up prior to January 2025.

A Solution By Using Page Rule Under Cloudfare and Hosting Via Cpanel for a Different Site

Since I use a CMS to create my higher trafficked site, my domainame.com/ads.txt could not serve this ads.txt file as intended. The way that my CMS sets up my website is there is another directory for all media and files. Any of my files are not uploaded to the root level, including TXT files. I had to figure something out.

I clicked on the question mark bubble next to the Ads.txt status and it said I needed to upload the ads.txt file in a particular format at the root level.

Here's the article on how to do that from Google Support:
https://support.google.com/adsense/answer/12171612?sjid=15529272850796857791-AP#create. The content of the ads.txt should look like this:
google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

The pub-0000000000000000 needs to be your personal Google Adsense publisher ID. Since I use Cloudfare to have an SSL on my domain, I went in there and attempted to add the file under the root directory. Of Course, that didn't work because my pages are hosted from my CMS. So, after doing some research, I attempted to add a Page Rule under my Cloudfare account.

I also have a React web app that I use Godaddy Hosting to host the pages. I pay over a hundred dollars each year for hosting for that. I might as well take advantage of it and use it as the main way to store other files to help my other sites. Using the Cpanel, I uploaded my ads.txt file at the root level of that web app with the goal to create a Page Rule under Cloudfare for my higher trafficked website so that it will redirect there. Well, today, I've successfully done that so now, I'm just waiting for Adsense to crawl the page. The waiting game begins...

According to Google Adsense, "It may take a few days for AdSense to automatically crawl and verify your ads.txt file. Wait at least a few days for your ads.txt status to update. " So I just had to be patient.

Google Adsense Successfully Crawled the Ads.txt File the Next Day

The next day, I checked my Google Adsense account under 'Sites', and saw that it's been successfully authorized. My screenshot is below. So, if you add the ads.txt file property or in my case, add a Page Rule redirect properly, it could take just 1 day.

And now, I'm not panicking as much, but I still can't see my ads and I wonder if it has to do with my VPN?

Later in the evening, I worked from my other laptop. All of a sudden, my ads from this tech blog finally showed up. I did not add any auto-ads code from Google Adsense. However, I did add the auto-ads code to my other higher trafficked site and Google Adsense ads were still not showing. So, I decided to do a test. I removed all of the code for auto-ads from Google Adsense from my higher trafficked site, and all of my Google Adsense ads finally showed up! I think Google Adsense was just malfunctioning yesterday. It's unclear? For some reason, those auto-ads made it worse, and didn't help.

I just realized today that I cannot create a react app with the 'create-react-app' command in my terminal anymore. It has been deprecated by Meta and they manage React.js!

After some research and reading their documentation, I've attempted to learn to use Next.js for the first time, which works with React.js and ran into my first issue. I kept getting this error in my terminal: Cannot find module 'fs/promises'.

Installing Next.js for the First Time and Updating my Node Version

After I installed Next.js in my working directory, I had to figure out how to get rid of the error message: Cannot find module 'fs/promises'. So, my first attempt was to upgrade node because my machine was still at v12.18.3 and the current version today is v20.10.0. I had to catch up!

My first attempt worked to fix that error message in my terminal worked! After I upgraded my node version, the Cannot find module 'fs/promises' error message went away. Here are the questions you'll see and have to answer in the terminal when typed the following command: npx create-next-app@latest to use Next.js:

--copy and pasted from terminal--
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … winter-portfolio
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
? Would you like to use Tailwind CSS? › No / Yes
✔ Would you like to use `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) › No
✔ Would you like to use App Router? (recommended) … No / Yes
? Would you like to customize the default import alias
✔ Would you like to customize the default import alias (@/*)? … No / Yes

It asked a lot of prompts, which I appreciated because I realized that I was going to be using Tailwind CSS for the first time!

After everything was installed, I ran the dev command to see it on localhost 3000 on my machine. See the package.json file for the exact script command! I liked the broiler plate and started editing it right away to make my simple portfolio site.

Deploying Manually with an 'Out' Folder by Modifying the next.config.js File

After editing the html and content in the page.tsx and the css in the global.css file with my own stuff, I was ready to deploy it. I like deploying manually in Netlify so I did a bit of research online and realized all that I needed to do was edit the next.config.js file to create an 'Out' Folder and when I run my build command, it'll automatically create one. This is what needs to be changed in that next.config.js file before running the build command in the terminal: /** @type {import('next').NextConfig} */ const nextConfig = {output: 'export'} module.exports = nextConfig

After I edited that file with the code above, I ran the build command and found the 'Out' Folder in my directory. I just drag that 'Out' Folder to the deploy page in Netlify and it was done and published! It was quite easy. I had a already bought a domain from Netlify and had to drag it to the right site.

This was all in a day's work. If you've used the create-react-app command for React in the past, learning Next.js should not be too hard.

Installing Google Analytics Tag for Google Analytics G4

After deploying successfully, I spent the next few hours figuring out the easiest way to get Google Analytics tracking installed on my Next.js website. The simplest way is create a new tag for the Google Analytics GA4 property that you want to use under Google Tag Manager and copy that script (will need to change the format a bit so it's compatible). Then, using that code that you copy, you'll create a Script tag in your code editor with that code. I saw it in real-time reports immediately. Before being able to generate a Google Analytics tag, you'll need to make sure you have a Google Tag Manager and Google Analytics account already set up. Thankfully, they are both currently free to have an account with.

When I was in a coding bootcamp, we were using Heroku with heroku-18 on a free version to deploy projects. However, Heroku is drastically changing things. Last November, Heroku eliminated the free version and heroku-18 is now deprecated and will reach end-of-life on April 30, 2023! 

All of my databases and API end points were down for a month because I was hosting all of them on Heroku via their now deprecated free version. After a couple of hours looking at documentation on upgrading, I got one API back up.

Below are my outlined steps that I took to upgrade my heroku-18 to heroku-22 and subscribe to their lowest tier plan, Eco Dynos. For Steps #1 - #5 below, I followed the steps from Heroku, which you can view on their website from this link: https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack. I made a couple of modifications because of the way my app was already set up. They recommend that you do a test first which you should, especially if a lot of users are currently visiting your app.

Steps:

1. I went into my folder where my app sits on my computer and opened it up in VSC. I use Visual Studio Code (VSC) as my IDE.
2. In the command line, I typed the following to upgrade to heroku-22: heroku stack:set heroku-22 -a 
3. After that was successful, in my command line within the app in VSC, I typed: git commit --allow-empty -m "Upgrading to heroku-22"
4. Then, I pushed it to heroku master for deployment with this command: git push heroku master
5. Unlike the instructions, I had originally deployed this with heroku master and not heroku main. Yours might be different. Then, I typed in the command line: heroku info to make sure it is listing heroku-22 for Stack and it did.
6. Then, I logged into my Heroku Account via their website and now went through the app to add the postgres add on for an additional $5 per month so that I can use my database and also subscribed to the Eco Dynos plan for $5 a month under the "Resources" section. Good bye, money. 
7. After adding my postgres package to the heroku under my plan, I now have to seed the data onto heroku on the command line. Uniquely for me, it is: heroku run npm run seed because I had set up my app this way and I use Node.
8. To test that my postgres add on has been done successfully, I did a query on the Dataclips interface from Heroku and saw data when I did a query like this: select * from activities; because one of my tables is named 'activities'. Great, I saw data on Dataclips via Heroku! However, I could not see anything on my API end point URL. I was racking my brain for like 25 minutes because I knew I added the Eco Dynos subscription and so I went back to my Heroku Log-in to check under the "Resources" section and noticed that it didn't automatically toggle it to the right to turn it on!
   
   Therefore, remember to turn it on and by toggling to the right side. After I did that, my API ends point worked again. JSON never looked so beautiful.

Pro

There is one pro from this heroku-18 deprecation. There is a lot of APIs that I created and don't care to keep up with so when heroku-18 deprecates and all of my app names under those disappear, it is just cleaning out the trash for me. I'm only concerned with 2 sets APIs and I finished deploying the first one today with the upgrade and subscription (see my 8 steps above).

Con

The con from all of this change is I'm going to have invest and pay the $5 per month (I chose the cheapest plan called Eco and Basic) for the APIs that I want to still work on and also the additional $5 a month on top of that for the postgres database add on. 

Cost

It is going to take cost me $120 for this server and database to run on Heroku per year but since it is my main full stack portfolio piece, I'd like to keep it up on Heroku for now.

It took a good full 2 hours for me to read the documentation on upgrading, subscribing and adding on today on Heroku and to also go through my 8 steps above. I know if I decide to still do this for my second database, it'll be faster the next time around.