DEV Community: Vignesh Ravichandran

Setting up ghost on Raspberry Pi for free

Vignesh Ravichandran — Mon, 10 May 2021 00:33:00 +0000

This is part of my Today I Learnt series where I share whatever I am learning something new. After having issues with port forwarding in Xfinity I decided to look for alternative solutions. I have used Cloudflare tunnel (used to be called Argo Tunnel) in the past to expose websites running on my laptop to the Internet. So, I decided to try it out for Ghost blogging site which I am setting up for my dad.

Things that I had already set up

Cloudflare free tier account and added the domain
Raspberry pi with Docker installed

The overall architecture looks like this:

Here are the steps which I did:

Create a docker volume

docker volume create ghost-synergywin-net

Create a docker container using ghost image [1]

docker run -d -e url=http://localhost:3001 -p 3001:2368 --name some-ghost -v ghost-synergywin-net:/var/lib/ghost/content ghost

I mapped raspberry pi port 3001 to containers port 2368 and passing environment variable url as localhost. Mounted the location /var/lib/ghost/content to ghost-synergywin-net volume.

Confirm that the ghost site is up

curl http://localhost:3001

Next I replaced url environment variable with the actual domain

docker run -d -e url=https://synergywin.net -p 3001:2368 --name some-ghost -v ghost-synergywin-net:/var/lib/ghost/content ghost

Next is exposing this website securely to the Internet. Because, raspberry pi is running on my Local Area Network (LAN). I need to make it accessible from the Internet. To do that I used Cloudflare tunnel

I added the domain synergywin.net to Cloudflare
Installed [2] cloudflared executable on the Raspberry pi
Authenticate [3] cloudflared which creates cert.pem file
Created a tunnel

  cloudflared tunnel create ghost-synergywin-net

Created a config file for the tunnel

credentials-file: /home/pi/.cloudflared/<uuid>.json
tunnel: <uuid>

ingress:
  - hostname: synergywin.net
    service: http://localhost:3001
  - service: http_status:404

Added a CNAME in the Cloudflare dashboard for the hostname with .cfargotunnel.com
Ran tunnel using the above config

cloudflared tunnel --config config.yaml run &

Actually, that is it. I am able to reach my dad's blog over the Internet now.

Bonus, I also got enabled using Cloudflare itself for free with just a click of a radio button :)

References:

Get Started With Firebase Storage

Vignesh Ravichandran — Mon, 10 May 2021 00:29:45 +0000

Get Started With Firebase Storage (Web)

Firebase is a developing platform provided by Google to the developers to build dynamic web apps or any mobile apps. Moreover, firebase is providing a lot of features such as Firebase authentication to quickly authenticate the user with the auth state change listener, Real-time database to store the relevant data in JSON like format, Cloud Firestore scalable database keeps your data in-sync across client apps through realtime listeners, and lot more features.
Today, I will be going to talk about a feature that is Firebase Storage and how we can implement it in our web apps. I will specifically discuss the core feature of Firebase Storage. So let's get started.

What does Firebase Storage provide to the developers?

Certainly, Firebase Storage is one of the core features to Firebase development platform that lets you upload and share rich content such as images, files, videos into your apps. Cloud Storage lets you securely upload these files directly from mobile devices and web browsers, handling spotty networks with ease. Moreover, the following data is stored in a Google Cloud Storage bucket with a large scale storage solution and high availability.

How to implement Firebase Storage in our project?

First, we need to create a firebase project. Follow the steps to create a firebase project so that we could use Firebase Storage functionality to store the image:

Go to firebase.google.com and sign in
After sign in, click the 'go-to console' tab.
Click 'Add project'; then enter your project name, and click continue.
Disable Google Analytics for this project as of now. However, if you have a google analytics account, then you can enable it for your requirements.
Finally, click create a project button. Wait for creating the project and click continue.

For this tutorial project, I am going to create a directory named 'image-uploader' (you can choose any name). And inside the directory, I will create two files - index.html and app.js. I will be using the Bootstrap 4 framework to build awesome CSS design.

NOTE - For this tutorial, I am using the VSCode editor to implement the code. You can choose any code editor comfortable with it.

We have to create a connection with the firebase project so that we could upload the images to the Firebase Storage. For that, follow the steps:

Click the web icon, enter the app name like image-uploader, and click register app.
Now, you would see the firebase SDK codes. Copy the starting script link and paste it inside the index.html between the head tag.
And lastly, copy the last script code and paste it inside the app.js file.
You need to add Bootstrap 4 CSS CDN link, Firebase Storage CDN link, and connect app.js to index.html file.

Bootstrap 4.1.3 CSS CDN link - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Firebase Storage CDN link - <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-storage.js"></script>

We need to set up the storage so that anybody can upload the image without authentication. For this follow the steps:

Go the project main screen, click the storage option(left panel).
Click get started, click next, and choose the Cloud Storage location and click done.
Go to the Rules tab, replace 'if request.auth != null' with 'if true', and click publish.

Index.html

We are going to create a button to select the image from our local machine. And the image directly uploads to the firebase storage.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-storage.js"></script>
        <title>Image-uploader</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
        <div class="container mt-5">
            <h3 class="mb-4" >Image Upload</h3>
            <div class="jumbotron" >
                <input class="btn btn-primary" type="file" id="imageUpload">
            </div>
            <h5 id="progessIndicator">upload progress: 0%</h5>
        </div>
        <script src="app.js" ></script>
    </body>
</html>

script.js

First, we need to create a storage reference to refer to the storage location. In the code, we can provide content type to upload the exact content to the storage. I have to implement addEventListener to listen to the image changes by the user. Inside the listener function, I used a file variable to get the file i.e image file. With the help of storageRef variable, I am uploading the image to the firebase storage. All the images reside in the child directory named 'images'. And, also progress indicator indicates the current uploading progress in percentage that reflects on the screen.

var firebaseConfig = {
  apiKey: "Your API KEY", //replace with your key
  authDomain: "image-uploader-a5a2c.firebaseapp.com",
  databaseURL: "https://image-uploader-a5a2c.firebaseio.com",
  projectId: "image-uploader-a5a2c",
  storageBucket: "image-uploader-a5a2c.appspot.com",
  messagingSenderId: "1016001991019",
  appId: "1:1016001991019:web:9cd7eb0ebfdbea5e45fc2e",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

//storage reference
const storageRef = firebase.storage().ref();

var imageUploader = document.getElementById("imageUpload");
var progessIndicator = document.getElementById("progessIndicator");

//metadata to store specific file type
const metadata = {
  contentType: "image/jpeg",
};

//listening the on change image file
imageUploader.addEventListener("change", (e) => {
  //holding the img
  var file = e.target.files[0];

  //uploading the img on firebase storage
  var uploadImage = storageRef.child("images/" + file.name).put(file, metadata);

  uploadImage.on("state_changed", function (snapshot) {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    progessIndicator.textContent = `upload progress: ${progress}%`;
  });
});

How to know whether the image is uploaded or not?

Go the project main screen, click the storage option(left panel). Now you can see a folder named image and inside the folder, all the images are stored.
For More Information - Click Here Firebase Storage