Prerequisites

• Basic knowledge of JavaScript and HTML
• Node.js and npm installed on your computer
• Code editor (e.g., VS Code)

Step 1: Setting Up the Development Environment

1. Install Node.js and npm:

Download and install Node.js from nodejs.org. This will also install npm (Node Package Manager).

2. Install Create React App:

Open your terminal and run the following command to install Create React App globally:

npm install -g create-react-app

Step 2: Creating the React Application

1. Create a New React Project:

In the terminal, navigate to the directory where you want to create your project and run:

npx create-react-app my-blog

This will create a new directory called my-blog with the necessary files and dependencies.

2. Navigate to the Project Directory:

cd my-blog

3. Start the Development Server:

npm start

This will start the development server and open your new React app in the default web browser.

Step 3: Creating Blog Components

1. Create Blog Post Component:

Inside the src directory, create a new folder called components.

Inside the components folder, create a file called BlogPost.js with the following content:

import React, { useState } from 'react';

const BlogPost = ({ title, content }) => {
  const [comments, setComments] = useState([]);
  const [comment, setComment] = useState('');

  const handleCommentChange = (e) => setComment(e.target.value);

  const handleCommentSubmit = (e) => {
    e.preventDefault();
    setComments([...comments, comment]);
    setComment('');
  };

  return (
    <div className="blog-post">
      <h2>{title}</h2>
      <p>{content}</p>
      <div className="comments">
        <h3>Comments</h3>
        <ul>
          {comments.map((c, index) => (
            <li key={index}>{c}</li>
          ))}
        </ul>
        <form onSubmit={handleCommentSubmit}>
          <input
            type="text"
            value={comment}
            onChange={handleCommentChange}
            placeholder="Add a comment"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  );
};

export default BlogPost;

2. Create Blog List Component:

Inside the components folder, create a file called BlogList.js with the following content:

import React, { useEffect, useState } from 'react';
import BlogPost from './BlogPost';

const BlogList = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data.slice(0, 5))); // Limiting to 5 posts for simplicity
  }, []);

  return (
    <div className="blog-list">
      {posts.map(post => (
        <BlogPost key={post.id} title={post.title} content={post.body} />
      ))}
    </div>
  );
};

export default BlogList;

Step 4: Integrating Components into the App

1. Modify App.js:

Open src/App.js and modify it to use the new components:

import React from 'react';
import './App.css';
import BlogList from './components/BlogList';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Blog</h1>
      </header>
      <BlogList />
    </div>
  );
};

export default App;

2. Style the Blog:

Open src/App.css and add some basic styling:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.blog-list {
  padding: 20px;
}

.blog-post {
  border: 1px solid #ddd;
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.blog-post h2 {
  margin: 0 0 10px;
}

.comments {
  margin-top: 20px;
}

.comments h3 {
  margin: 0 0 10px;
}

.comments ul {
  list-style: none;
  padding: 0;
}

.comments li {
  margin: 5px 0;
  padding: 5px;
  background: #eee;
  border-radius: 3px;
}

.comments form {
  display: flex;
  flex-direction: column;
}

.comments input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.comments button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.comments button:hover {
  background-color: #0056b3;
}

Step 5: Adding SEO-Friendly URLs with React Router

1. Install React Router:

Run the following command to install React Router:

npm install react-router-dom

2. Set Up Routing:

Modify src/App.js to set up routing:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import BlogList from './components/BlogList';
import BlogPost from './components/BlogPost';

const App = () => {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <h1>My Blog</h1>
        </header>
        <Switch>
          <Route exact path="/" component={BlogList} />
          <Route path="/post/:id" component={BlogPostPage} />
        </Switch>
      </div>
    </Router>
  );
};

const BlogPostPage = ({ match }) => {
  const { id } = match.params;
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(response => response.json())
      .then(data => setPost(data));
  }, [id]);

  return post ? <BlogPost title={post.title} content={post.body} /> : <p>Loading...</p>;
};

export default App;

3. Modify BlogList to Link to BlogPost Pages:

Modify src/components/BlogList.js:

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const BlogList = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data.slice(0, 5))); // Limiting to 5 posts for simplicity
  }, []);

  return (
    <div className="blog-list">
      {posts.map(post => (
        <div key={post.id} className="blog-post-summary">
          <h2>{post.title}</h2>
          <Link to={`/post/${post.id}`}>Read More</Link>
        </div>
      ))}
    </div>
  );
};

export default BlogList;

Step 6: Setting Up Let’s Encrypt for SSL

1. Install Certbot:

Follow the instructions on Certbot’s website to install Certbot for your server environment.

2. Obtain an SSL Certificate:

Run Certbot to obtain an SSL certificate:

sudo certbot --nginx

Follow the prompts to complete the SSL certificate installation.

3. Renew SSL Certificate Automatically:

Certbot sets up a cron job to renew your certificate automatically. You can check this by running:

sudo systemctl status certbot.timer

Step 7: Running the Application

1. Start the Application:

If the development server is not already running, start it with:

npm start

2. View the Blog:

Open your browser and navigate to https://yourdomain.com to see your simple blog with comments functionality, SEO-friendly URLs, and secured with SSL.