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 calledblog
- Click the + button next to
blog
database and add a collection calledusers
- 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!