Shuan Chen

PhD Student in KAIST CBE

0%

Build your own github page with Hexo

Build your own webpage without writing any Javascript!
This tutorial is tested on Windows OS only

Download software

Software #1: Node.js

You can test the software installation by typing node -v and nmp -v in command line to check the software version

Software #2: Git

Similarly you can check the installation by typing git --version in command line

Software #3: Hexo

You can install hexo after installing node.js (Software #1)
First, create a folder caleld “Hexo” on your Desktop to enter that folder in command line and type

1
npm i hexo-cli -g

to install Hexo
You can check the installation by typing hexo -v in command line

Register Github account (account name will show in web url)

Simply register your account at Github.com and make a new reopsitory (repo) as shown below and call the repo name as [username].github.io (i.e. shuan4638.guthub.io) and click “Create repository“.

Initialize your Hexo!

At the Hexo directory (folder), type

1
2
3
hexo init [username]
cd [username]
npm install

to initialize your webpage framework.

Open the file Hexo/username/_config.yml by notebook and add the following at the end of the file

1
2
3
4
eploy:
type: git
repository: https://github.com/[username]/[username].github.io
branch: master

To view what you have, type

1
2
hexo g 
hexo s

and go to http://localhost:4000/ at your web browser.
If you can see some thing like this, you are almost done!

Connect your Github with your computer

Open Command Prompt in your computer and type

1
2
git config --global user.name "[username]"
git config --global user.email "[youremail]"

and then generate a SSH key *Important Step
1
ssh-keygen -t rsa -C  "[youremail]"

By defualt, you can find your key file (id_rsa.pub) at C:\Users\user.ssh.
Open the key file by notebook and copy the whole content.
Go to Github Setting and select SSH and GPG keys at the left column.

Click New SSH key and paste what you just copied to the “Key” block. You can name the title whatwever you want.

Make a good starting point by using Hexo template!

In command line, type

1
2
cd themes
git clone https://github.com/theme-next/hexo-theme-next.git next

Open the file Hexo/[username]/_config.yml and change line 100 from

1
theme: landscape

to

1
theme: next 

Then you should see something like this

You can write a new article by typing the following in command line

1
hexo new [article_title]

This article (.md) file will be in Hexo/[username]/source/_posts, modify it as you want!

You can check what you wrote evey time by pressing F5 at http://localhost:4000/

Finally, you can deploy tou webpage by typing

1
2
hexo g
hexo d

You should be able to see you webpage on https://[username].github.io/

Congrats!! You just made your own webpage!
I found a lot of useful plugin at lanvoyager hexo page