Blog Software Setup

For those who may be interested in setting up their own personal blog, here is instruction on how this blog was created.

Web Hosting Service

NameCheap.com - I use the shared user account called Stellar. It is free for the first 30 days and then I chose the yearly rate at $1.98 per month. You can also purchase and setup your domain name (example: your_name.com).

Free Apps Available

Once you have your domain and hosting account setup then you can begin building your blog site. At this point you can log into your account and access something called cPanel. Here you can install your software apps using a link to Softaculous Script Installer. Here are the apps that I have installed on this site.

Setup Email Accounts and Contact Page

In your cPanel you can also setup your email accounts. You can have up to 30 seperate email accounts. HTMLy does not have an easy way to create a contact page submission form. So I did a work around using a free service called FormSubmit.co. HTMLy does not allow you to insert forms on the static pages that you can create. The work around is to create a file called contact.html and copy the FormSubmit form code there. You can create the file using the FileManager inside the cPanel. Then in the contact page created in HTMLy copy and past this code:

<style>
#iframeWrapper {
  width: 100%;
  height: 500px;
  position: relative;
}

#iframeWrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.expand-link,
.expand-link:hover,
.expand-link:focus,
.expand-link:active {
  position: absolute;
  top: -40px;
  right: 15px;
  z-index: 0;
  color: black;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 24px;
}
</style>
<div id="iframeWrapper">
  <iframe src="https://meansreport.com/contact.html"></iframe>
</div>

Creating The Chat Rooms

Once you have Blab! AX installed then you can create a Chat page and paste the following code. You will need to change the iframe source url link to match your site location.

These are real time multi user chat rooms. I thought it might be interesting to have some group chats if enough people are interested.  It's possible to schedule times for meetings. The rooms are all generalized but in the future I could make them more topic specific.
<style>
#iframeWrapper {
  width: 100%;
  height: 500px;
  position: relative;
}

#iframeWrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.expand-link,
.expand-link:hover,
.expand-link:focus,
.expand-link:active {
  position: absolute;
  top: -40px;
  right: 15px;
  z-index: 0;
  color: black;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 24px;
}
</style>
<div id="iframeWrapper">
  <a href="#" class="expand-link" id="expandLink" title="Expand Full Screen"><i class="fas fa-expand-alt"></i></a>
  <iframe src="https://meansreport.com/blab"></iframe>
</div>
<script>
const wrapper = document.getElementById("iframeWrapper");
const link = document.getElementById("expandLink");

link.addEventListener("click", function(e) {
  e.preventDefault(); // prevent page jump
  if (wrapper.requestFullscreen) {
    wrapper.requestFullscreen();
  }
});

document.addEventListener("fullscreenchange", function() {
  wrapper.classList.toggle("isFullscreen", !!document.fullscreenElement);
});
</script>

Creating the Picture Albums Page

Once you have Piwigo installed then you can create a Pictures page and paste the following code. You will need to change the iframe source url link to match your site location.

I use this to store pictures for some of my blog posts. It's also a repository for private personal pictures of family and friends. Contact me if you wish access.
<style>
#iframeWrapper {
  width: 100%;
  height: 500px;
  position: relative;
}

#iframeWrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.expand-link,
.expand-link:hover,
.expand-link:focus,
.expand-link:active {
  position: absolute;
  top: -40px;
  right: 15px;
  z-index: 0;
  color: black;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 24px;
}
</style>
<div id="iframeWrapper">
  <a href="#" class="expand-link" id="expandLink" title="Expand Full Screen"><i class="fas fa-expand-alt"></i></a>
  <iframe src="https://meansreport.com/gallery/index.php?/category/17"></iframe>
</div>
<script>
const wrapper = document.getElementById("iframeWrapper");
const link = document.getElementById("expandLink");

link.addEventListener("click", function(e) {
  e.preventDefault(); // prevent page jump
  if (wrapper.requestFullscreen) {
    wrapper.requestFullscreen();
  }
});

document.addEventListener("fullscreenchange", function() {
  wrapper.classList.toggle("isFullscreen", !!document.fullscreenElement);
});
</script>

Other Useful Information

Chat