create account

Deploy Simple Blog in Firebase Cloud Part 1 of 2 by taradraz1

View this thread on: hive.blogpeakd.comecency.com
· @taradraz1 · (edited)
$3.38
Deploy Simple Blog in Firebase Cloud Part 1 of 2
### <center>Deploy Simple Blog in Firebase Cloud Part 1 of 2</center>
<div class="text-justify">
<center>


Hello people of Hive, I wanted to bring a couple of guides that I had to do, just by practicing different things it occurs to me to share topics, in this case I wanted to bring in 2 simple post, a guide on how to deploy for free with Firebase a Blog, in this first post I will briefly explain the code which is quite simple since basically we have no functionality beyond entering the blogs and return from them.

![firebaseportada.png](https://files.peakd.com/file/peakd-hive/taradraz1/23uEzR8XotG2uczvhnAAFS5PKkh95BWouXymkD3YZWxX5Uf3MpHcvb9vS6EmRqTZgi7qa.png)

This page is extensible and modifiable very simply as you can see for those who are and not programmers as it uses basic Web languages. This way we will have our main page and inside the blogs we will be able to place our images as we will show in the next guide.


![firebase1.png](https://files.peakd.com/file/peakd-hive/taradraz1/23yJVVNBA5SLGSXJ47yAeNbeBxcCCDWWU9R1vVAXu2LzwaoS51Z5arjxUBzaFTaLcpvKr.png)


First we have our index.html file where we declare what we can see in the previous picture, we have each one a list with the Blogs and each one of these is going to give us the reference to the other html page varying only the id. 

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>App for Firebase </title>
</head>
<body>
  <div class="container">
    <h1 > My App for Firebase </h1>
    <h2> Take a look at the blogs</h2>
    <ul class="blog-links">
      <li><a href="blog.html?id=1">Blog 1 </a></li>
      <li><a href="blog.html?id=2">Blog 2</a></li>
      <li><a href="blog.html?id=3">Blog 3</a></li>
      <li><a href="blog.html?id=4">Blog 4</a></li>
    </ul> 
  </div>
</body>
</html>


```
The important thing to understand the id needed is so that in our script.js file we take the id and so we can choose between our images and so we simply create a single blog.html.
we also declare inside our JS the button to return to the main menu and basically these are our only functionalities with Javascript.

```
const urlParams = new URLSearchParams(window.location.search);
const blogId = urlParams.get('id');
const blogImage = document.getElementById('blog-image');
const backButton = document.getElementById('back-button');

const getImageForBlog = (id) => {
  // Use absolute path to the image
  return `img/image${id}.jpg`;
};


blogImage.src = getImageForBlog(blogId);

backButton.addEventListener('click', () => {
  window.location.href = 'index.html';
});


```

Finally we have our blog.html in this we simply receive the image with what was previously done in the javascript and present the user with a varied photo for each blog is a simple functionality to understand.

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>Blog Post</title>
</head>
<body>
  
  <div class="container2">
    <h1>Web App </h1>
    <img id="blog-image" alt="Blog Image">
    
    
    <button id="back-button">Back</button>
  </div>
 
  <script src="js/script.js"></script>
</body>
</html>


```
Finally i add the photo of the files as i said i will put all this in github next


![fire2.png](https://files.peakd.com/file/peakd-hive/taradraz1/23t76kXYaqaJFxLEP5gdk98QZhi8jo4FxjCUrNvi5xmqeU93mbovJemS5bD1LLkr5HQ2c.png)


In the next post we will see the css and also the deploy in firebase, also I hope to upload everything to a git so you can download and see much easier.


Thank you very much to all for the attention in the next part will be the Deploy in Firebase which you can see that it is even easier than this first part.

You can check my blog here: https://peakd.com/@taradraz1



</div>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 279 others
properties (23)
authortaradraz1
permlinkdeploy-simple-blog-in-firebase-cloud-part-1-of-2-eng-esp
categoryhive-196387
json_metadata"{"app":"peakd/2023.11.3","format":"markdown","description":"A guide on how to deploy for free with Firebase a Blog, in this first post i explain the code which is quite simple","portfolio":true,"tags":["dev","stem","stemsocial","chessbrothers","development","programming","ocd","ocdb","stem-espanol","tutorial"],"users":["taradraz1"],"image":["https://files.peakd.com/file/peakd-hive/taradraz1/23uEzR8XotG2uczvhnAAFS5PKkh95BWouXymkD3YZWxX5Uf3MpHcvb9vS6EmRqTZgi7qa.png","https://files.peakd.com/file/peakd-hive/taradraz1/23yJVVNBA5SLGSXJ47yAeNbeBxcCCDWWU9R1vVAXu2LzwaoS51Z5arjxUBzaFTaLcpvKr.png","https://files.peakd.com/file/peakd-hive/taradraz1/23t76kXYaqaJFxLEP5gdk98QZhi8jo4FxjCUrNvi5xmqeU93mbovJemS5bD1LLkr5HQ2c.png"]}"
created2023-12-02 22:56:18
last_update2023-12-02 22:57:06
depth0
children2
last_payout2023-12-09 22:56:18
cashout_time1969-12-31 23:59:59
total_payout_value1.722 HBD
curator_payout_value1.659 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,973
author_reputation14,630,618,255,247
root_title"Deploy Simple Blog in Firebase Cloud Part 1 of 2"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id129,361,149
net_rshares6,984,819,963,254
author_curate_reward""
vote details (343)
@chessbrotherspro ·
<h3>Congratulations!</h3><hr /><div class="pull-right"><img src="https://images.hive.blog/DQmQLssYuuJP2neoTVUbMRzvAu4Ptg7Vwt92aTM7Z3gNovg/cb-logo-150.png" alt="You have obtained a vote from CHESS BROTHERS PROJECT"/></div><div class="text-justify"><h3>✅ Good job. Your post has been appreciated and has received support from <a href="/@chessbrotherspro"><b>CHESS BROTHERS</b></a> ♔ 💪</h3><p><br>♟ We invite you to use our hashtag <b>#chessbrothers</b> and learn more <a href="/@chessbrotherspro/introducing-chess-brothers-project-the-most-innovative-community-combining-chess-fitness-and-more"><b>about us</b></a>.</p><p>♟♟ You can also reach us on our <a href="https://discord.gg/73sK9ZTGqJ" rel="noopener" title="This is going to take you to the Discord of Chess Brothers"><b>Discord server</b></a>  and promote your posts there.</p><p>♟♟♟  Consider <a href="/@chessbrotherspro/teamwork-is-worthwhile-join-the-chess-brothers-healing-trail-supporting-the-work-being-done-and-earning-rewards"><b>joining our curation trail</b></a> so we work as a team and you get rewards automatically.</p><p>♞♟ Check out our <a href="/@chessbrotherspro"><b>@chessbrotherspro</b></a> account to learn about the curation process carried out daily by our team.</p><p><br>🏅 If you want to earn profits with your HP delegation and support our project, we invite you to join the <i>Master Investor</i> plan. <a href='/@chessbrotherspro/master-investor-plan-or-programa'>Here you can learn how to do it.</a></p></div><div class="text-center"><p><br>Kindly</p><p><strong><em>The CHESS BROTHERS team</em></strong></p></div>
properties (22)
authorchessbrotherspro
permlinkre-deploy-simple-blog-in-firebase-cloud-part-1-of-2-eng-esp
categoryhive-196387
json_metadata""
created2023-12-03 12:35:09
last_update2023-12-03 12:35:09
depth1
children0
last_payout2023-12-10 12:35:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,598
author_reputation78,000,753,163,525
root_title"Deploy Simple Blog in Firebase Cloud Part 1 of 2"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id129,372,783
net_rshares0
@stemsocial ·
re-taradraz1-deploy-simple-blog-in-firebase-cloud-part-1-of-2-eng-esp-20231203t120142828z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.&nbsp;<br />&nbsp;<br />
</div>
properties (22)
authorstemsocial
permlinkre-taradraz1-deploy-simple-blog-in-firebase-cloud-part-1-of-2-eng-esp-20231203t120142828z
categoryhive-196387
json_metadata{"app":"STEMsocial"}
created2023-12-03 12:01:42
last_update2023-12-03 12:01:42
depth1
children0
last_payout2023-12-10 12:01:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,918,491,691,707
root_title"Deploy Simple Blog in Firebase Cloud Part 1 of 2"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id129,372,181
net_rshares0