How To Build This Blog On Github

Some dudes may ask me how to build such a simple blog like this site with github domain.

Here I am going to share the details step by step,and hope it is useful to someone.

Sign Up Your Github Account

Go to Github to register your own account.It should be easiest thing to do I believe!

Create A Repository

Create a repository named as userName.github.io. Noted that userName must be same as your user name of Github.

Create A Repository

Install Node.js On Your Laptop

It may be different for various system.Here I just demonstrate how to install it on my Macbook Air.You can just click Installation Of Node.js On MacOS for reference.

Installation Of Hexo

Follow the command to install hexo

1
npm install -g hexo-cli

See version of hexo

1
hexo -v

After installation is finished, initilize a blog module hexo-blog .

1
hexo init hexo-blog

Then enter the module to run npm

1
2
3
cd hexo-blog
#then build npm
npm install

Now, you can start the blog at your local enviroment and just visit http://localhost:4000

1
2
hexo g
hexo server

Change A Better Theme-Fuild

As the original theme of Hexo is too simple, we could use a better theme.Here I will choose Fuild.

  1. Download the latest package from https://github.com/fluid-dev/hexo-theme-fluid/releases .Unzip the package at the root of theme and rename file as fluid.

Rename As Fluid

  1. Configure _config.yml of hexo-blog to set theme and language.
1
2
3
theme: fluid  # appointed theme
language: zh-CN  
# use zh-CN if you would like to use Chinese,or use en as default language

For more configurations, you can visit Fluid to learn.

Push On Github Pages

Method 1

Install hexo-deployer-git

1
npm install hexo-deployer-git --save

Modify _config.yml of hexo and account of GitHub

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git
  branch: main
  token: ghp_3K*******************

Finally,depoly to Github

1
hexo g -d

Method 2

Directly push files of public to main branch of GitHub .

Push Public To Github

Method 3

Publish blog to your own Linux server and use Nginx to proxy.

  1. Edit _config.yml of hexo-blog to add this path—this path should be same as location /blog of Nginx .
1
root: /blog
  1. run packaging command at the root of hexo-blog ,the generated files will be saved into public directory.
1
hexo g
  1. Copy these files to Linux server somewhere you would like to place.
1
2
3
#Noted that it's up to you to choose where to save

/opt/spike/fronted/hexo-blog
  1. Modify conf of Nginx .
1
2
3
4
5
6
7
8
9
10
11
# Noted that it may be different on your server
cd /usr/local/nginx/conf 

#edit nginx.conf
vim nginx.conf  

# add this configuration on your server
location /blog {
    alias  /opt/spike/fronted/hexo-blog;
    index  index.html index.htm;
}
  1. Restart Nginx .
1
2
cd /usr/local/nginx/sbin
./nginx -s reload
  1. Finally, you can visit your blog via ip address of your server.
1
2
#visit your blogs
http://xx.xx.xx.xx/blog/

Blogs Display

Well Done Man!!

Just visit iceswear.github.io to enjoy your own blogs~~

Front-End
#Node.js #Hexo #Github
How To Build This Blog On Github
https://iceswear.github.io/2022/11/04/HowToBuildThisBlogOnGithub/
Author
Spike Wong
Posted on
November 4, 2022
Licensed under