Create a Blogging Website and Host it on Github Pages
By Prgmaz 19 May 2021

THUMBNAIL HERE

What we need for this tutorial

  • Git installed
  • NPM and NodeJS installed
  • hexo-cli (globally installed)

Setting up our Project

First let’s install all the modules needed. To install hexo-cli, Just Open cmd, powershell or terminal and type npm install -g hexo-cli. This will install hexo globally on your pc.

THUMBNAIL HERE

Creating a Starter Blogging Website

To create a blogging website starter pack, type hexo init <github_username>.github.io. I’m gonna create a blogging website for my organization on Github.

THUMBNAIL HERE

You have created your starter blog. Now open that directory with your desired code editor.

Setting up our Blogging Website

Open _config.yml, This file contains configuration info for your website. I’m gonna change name, subtitle, description and etc. for my website.

THUMBNAIL HERE

I changed these settings in my website _config.yml file.

Now to serve our website, type hexo server on our terminal or cmd.

THUMBNAIL HERE

You can see our website is now running.

Deploying on Github pages

First you need to initialize git repository on that directory by typing git init. If you want Git guide, you can check out my git for basics guide on previous posts.

Create new repository on github by going to Github and clicking on New.

THUMBNAIL HERE

Now copy the https link for the repository. In my case, It is https://github.com/pace-makers/pace-makers.github.io.git.

Now install a module that will help you to deploy on github pages. Type npm install hexo-deployer-git on cmd in that directory.

Now you need to make changes to _config.yml file. Open and scroll down to the bottom of this file and type this.

...
deploy:
  type: git
  repo: https://github.com/pace-makers/pace-makers.github.io.git # Your repo link goes here
  branch: master

Now deploy to Github pages using these commands hexo clean and then hexo deploy.

THUMBNAIL HERE

If you go to the https://<your-user-name>.github.io/, You will see your blogging website working.

Create new Posts.

To create new posts on your website, You can type hexo new <post-title>.

THUMBNAIL HERE

This will create a new post template in your source/_posts directory. If you open that directory you will see a template post hello-word.md. Now you can start editing that post in Markdown Language.

THUMBNAIL HERE

Now, if you refresh your page you’ll see, your new post pop up on the first page.

THUMBNAIL HERE

You can change the theme of your website by going to This website and following instructions to install.

You need to deploy again to make changes to your website. Type hexo clean and hexo deploy on your cmd.

Link to My Git Repo

Follow me on my socials.

Naman Baranwal
Hi, I’m Prgmaz. I’m a Web, Game and App Developer.

Tags

  • blogging
  • website
  • webdesign
  • hosting
  • github