title: "[Hexo] Theme HuWeihuang"
catalog: true
toc_nav_num: true
date: 2017-09-18 10:51:24
subtitle: "This is hexo theme Demo."
header-img: "/img/article_header/article_header.png"
tags:
- Hexo
catagories:
- Hexo
updateDate: 2018-12-23 22:26:24
top: 1

Hexo 博客搭建

个人博客快速搭建模板

版权

Beantech
胡伟煌

安装Hexo

npm install hexo-cli -g
如果下载速度慢的可以将npm的下载源换成国内镜像,推荐阿里巴巴的镜像.

使用博客模板

初始化

1
2
3

git clone 链接
cd hexo-theme
npm install

基本的Hexo语法

hexo new "postname" 新建一篇博客
hexo new post "<post name>" # 新建一篇博客
hexo clean && hexo generate # 清理并且生成项目
hexo server # 在本地运行hexo服务器
hexo deploy # 部署在远端

博客插入图片格式

![秒速](路径)
![](1.png)

如果使用了markdown编辑器需要配置编辑器的相对路径.

不然部署静态路径时会报错

部署github博客

修改 _config.yml 文件为自己的仓库地址即可, 记得把ssh_key提前上传到github

deploy:
- type: git
  repo: git@github.com:jasminalee/jasminalee.github.io.git
  branch: master

GitHub Pages 中开启选择分支

原来作者README文档如下

Ported Theme of Hux Blog, Thank Huxpro for designing such a flawless theme.

This BeanTech theme created by YuHsuan modified from the original Porter Kaijun

Live Demo

BeanTech Desktop

Usage

I publish the whole project for your convenience, so you can just follow the instruction down below, then you can easily customiz your own blog!

Let’s begin!!!

Init

1
2
3

git clone https://github.com/YenYuHsuan/hexo-theme-beantech.git ./hexo-beantech
cd hexo-beantech
npm install

Modify

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

Deployment

Replace to your own repo!

deploy:
  type: git
  repo: https://github.com/<yourAccount>/<repo>
  branch: <your-branch>

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

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

1	home_posts_tag: false

Markdown render

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

# 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.

async("//cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'hover',
          placement: 'left',
          icon: 'ℬ'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })

Hexo Basics

Some hexo command:

hexo new post "<post name>" # you can change post to another layout if you want
hexo clean && hexo generate # generate the static file
hexo server # run hexo in local environment
hexo deploy # hexo will push the static files automatically into the specific branch(gh-pages) of your repo!

Have fun ^_^

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

博客模板备注及使用方法