[Hexo] Theme Jepson

This is hexo theme Demo.

Posted by J哥 on 2015-07-10

This Jepson theme created by Jepson modified from the original Porter YuHsuan

Blog Demo

ruozedata官网 : www.ruozedata.com

Theme Jepson

Install Hexo

Install Node.js and Git

1
2
3
4
5
6
7
8
#For window
Node.js https://nodejs.org/dist/v12.13.0/node-v12.13.0-x64.msi
Git https://github.com/git-for-windows/git/releases/download/v2.24.0.windows.2/Git-2.24.0.2-64-bit.exe


#For Mac
brew install node
brew install git

Install hexo

1
2
3
npm install hexo-cli -g

#For more:https://hexo.io/zh-cn/index.html

Theme Usage

Init


1
2
3
git clone https://github.com/hackeruncle/hackeruncle-hexo.git ./hackeruncle-hexo
cd hackeruncle-hexo
npm install

Modify


Modify _config.yml file with your own info.
Especially the section:

Deployment

Replace to your own repo, the name is the same as github user name!

1
2
3
4
deploy:
type: git
repo: git@github.com:<git user name>/<git user name>.github.io.git
branch: master

Copy your avatar image to <root>/img/ and modify the _config.yml:

1
2
3
sidebar: true    # whether or not using Sidebar.
sidebar-about-description: "<your description>"
sidebar-avatar: img/<your avatar path>

and activate your personal widget you like

1
2
3
4
5
6
7
widgets:         # here are widget you can use, you can comment out
- featured-tags
- short-about
- recent-posts
- friends-blog
- archive
- category

if you want to add sidebar widget, please add at layout/_widget.

Signature Setup

Copy your signature image to <root>/img/signature and modify the _config.yml:

1
2
signature: true   # show signature
signature-img: img/signature/<your-signature-ID>

Go to top icon Setup

My icon is using iron man, you can change to your own icon at css/image.

Post tag

You can decide to show post tags or not.

1
home_posts_tag: true

Markdown render

My markdown render engine plugin is hexo-renderer-markdown-it.

1
2
3
4
5
6
7
8
9
10
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'

and if you want to change the header anchor ‘ℬ’, you can go to layout/post.ejs to change it.

1
2
3
4
5
6
async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
anchors.options = {
visible: 'hover',
placement: 'left',
icon: ℬ // this is the header anchor "unicode" icon
};

Hexo Basics


Push hexo file to github:

1
2
3
git add .
git commit -m 'init'
git push -u origin master

Push hexo blog html to local :

1
hexo clean && hexo generate && hexo server

open web: http://localhost:4000

Push hexo blog html to github :

1
hexo clean && hexo deploy

open web: https://hackeruncle.github.io

Have fun ^_^


Please Star this Project if you like it! Follow would also be appreciated!
Peace!