How to host your blog for
free
This guide will show you how to set up custom blog software on free
hosting.
Resources:
Here are the three resources we will use.
Step 1: Setting up Mongodb
Useful Promo Code: M1075
Setting up Account/Cluster
- Sign up for mLabs.
- Click create your first cluster
- Select “Developing a new app” if you get the new user popup
- Select a free tier server from AWS, Google Cloud or Azure under
Cloud Provider and Region
- Check to make sure you have M0 Sandbox selected under Cluster
tier
- Set your cluster name to Cluster0 and leave the rest of the settings
as default
Setting up Database
- Go to the Database Access tab and Click new
user
- Create and add a user with read and write access
- Go to the Network Access tab and Click add new ip
address
- For now Click allow access from anywhere and then click
confirm. (You should set this to something more specific later)
- Go to the Cluster tab and click collections
- Click add my own data and add a database call
blog
with a collection called blog
- Click the + button next to
blog
database and
add a collection called users
- Go back to the Cluster tab and click connect
- Click connect to your application then copy the connection
string for nodejs (Save this for later)
Step 2: Setting up the web
server
Zeit Account
- Sign up for Zeit
- Install now on your local computer using
npm install -g now
- Run
now login
and enter your email
- Check your email and click verify
Configuring Blog/Deploying
- Go to the folder you have the nextjs blog files stored in your
terminal
- Open the next.config.js file with your favorite editor
- Change the value of ‘mongodbUrl’ to be the same as the connection
url we copied earlier. Change to be the password of the user
we created. Near the end of the url change
/test
to
/blog
- Next change the value of ‘host’ to match this url schema
https://<foldername>.<zeit username>.now.sh
replacing folder name with the name of the of the folder you are working
and zeit user name being the user name of your zeit account
- Your file should now look like this:
// next.config.js
const crypto = require('crypto');
module.exports = {
env: {
name: "Blog", //Name that will appear in the top left
mongodbUrl: 'mongodb+srv://<username>:<password>@<clustername>.mongodb.net/blog?retryWrites=true&w=majority', //Mongodb host URL
host: "https://blog.copoer.now.sh", //Host name of the server. Set to localhost:3000
db: 'blog', //Data where the blog post are stored
postCollection: 'blog', //Collection where documents are stored
userCollection: 'users', //Collection where accounts are stored
accountCreation: true, //Set to true if you want to allow new accounts to be created
jwtSecret: crypto.randomBytes(21).toString('hex') //JWT secret generated at start for signing keys
}
};
- Go back to the terminal and run
now
Common Errors: If you are getting a 500 Error make sure your host and
mongodbUrl variables are set properly in the next.config.js file.
Setting up blog account
- Go to your new blog website and click the right arrow in the top
right hand corner of the blog page
- Enter a username and password and click create account
- (Optional) You can disable the account creation feature for public
by setting accountCreation to false in your local next.config.js file
then redeploy the app using the
now
command.
Your blog should now be up and running on free hosting. You can now
start creating blog posts!
This page was built with pandoc