This is the source code for my two part Blog website challenge project. It was initially created using Node and EJS, and then was later upgraded to include the use of a MongoDB database to store new blog posts. This project pulled together many of the tools used in previous lessons, resulting in a clean and minimal website in both design and code.
Upon opening the website, you'll see a simple navigation bar containing links to the about, contact, and home page. Below this, I've included a basic overview text area, followed by a list of blog posts.
Take a look at the live project
The Homepage On the Homepage, all of the posts are displayed in ascending order by date created. They are each shown with their title, as well as a truncated sample of the post body, followed by a 'read more' link. Clicking this link will take you to a dynamically created page for the post.
Creating A Post
Each of these blog posts are created using the 'compose' page, which is a hidden feature of the website, allowing the content creator to add posts to the homepage. To access this page, simply add /compose to the end of the main web address.
(optional setup with local database)
- install and setup MongoDB (installation guide)
-
clone the repository to your desired location.
-
Install the required packages in the terminal
$ npm install -
To run the website as is, start the app from your terminal with,
$node app.js -
In you browser's address bar, navigate to
http://http://localhost:3000/
Enable Local Database Controls To enable the MongoDB controls on your local machine, you will need to install and configure MongoDB on you local machine before running the application. Once you have done that, go ahead and run the application normally following step 3 and 4.
Once you have the node server running successfully, the app.js file will have created a new database on your local machine. Check to see that this MongoDB server is running properly.
-
In a separate command terminal, open the mongo shell
$ mongosh -
show the current list of active databases. you should see a new database called "BlogDB"
$ show dbs -
Here you can control the stored blog posts or delete the database entirely using standard MongoDB commands. Check out the documentation for more info!
Folder containing CSS style sheet linked to the HTML document
Contains all pages and components used in the website
/partials contains reusable components ( ex. header, footer )
Jake Brunner - jbbrunner10@gmail.com
LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/
This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp