原来发了一个关于Hexo搭建博客系列的总纲,想要搭建个人博客的同学,建议直接根据官方文档(https://hexo.io/zh-cn/docs/)搭建博客,本文针对Windows系统补充讲解一些个人设置。
Hexo是一个开源的博客框架,是一位台湾小哥(tommy351)在大学时开发出来的。我们可以直接基于这个框架,选择一个自己喜欢的主题,修改一些配置,就搭建出一个博客了。我使用的是NexT主题,最终效果可看我的博客:https://depp.wang
。个人博客是也通过Jekyll和WordPress搭建,但是Hexo简单免费,建议使用Hexo。
Hexo搭建的博客是静态的,没有后台代码,所以速度很快。
安装Git+NodeJS环境
Hexo是基于Node.js的静态博客生成器,所有需要提前安装Node.js,可使用命令行下载(详见官方文档教程),最好下载长期维护版,地址:
https://nodejs.org/zh-cn/
Hexo是在本地使用MarkDown语法写博客,再使用Git发布到远程代码托管平台上,如GitHub。
需要安装Git,一个代码管理工具。以下所有命令均是在Git Bash(Git命令行窗口)中执行的。下载地址:
https://git-scm.com/downloads //官方地址,速度应该比较慢
https://github.com/waylau/git-for-win //github下载地址
推荐一个廖雪峰大神的Git经典入门教程,讲得非常好,学完肯定对git原理了然于胸。
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
Hexo配置使用
Hexo安装
当Node.js安装完毕后,在任意文件夹鼠标右击选择Git Bash Here打开Git命令行,执行如下命令安装Hexo:
$ npm install -g hexo-cli
初始化博客
新建一个文件夹(如E:\Hexo,以下教程都以这个目录为博客根目录),在博客根目录下点击鼠标右键,选择Git Bash Here
,执行如下命令,如果以下命令执行失败,说明你Hexo没有安装成功。
$ hexo init
在博客根目录下会生成以下文件
/source:/_post中存放MarkDown编写的博文等源文件
/themes:存放主题文件,每个主题包含主题配置文件(_config.yml)
_config.yml:站点配置文件,用于配置博客信息,如网站信息,主题设置
在博客根目录可执行如下命令用于启动服务器,主要用来本地预览:
hexo g #完整命令为hexo generate,用于生成静态文件(即public文件夹)
hexo s #完整命令为hexo server,将上面的文件部署到本地服务
浏览器访问http://localhost:4000
,你会看见一个默认主题是landscape的博客,可以在Git Bash中按Ctrl+C停止。
NexT主题配置使用
NexT比较简洁耐看,几乎大多数人都喜欢。主题的官方文档
NexT主题安装
在博客根目录下运行以下命令,将下载NexT主题。
$ cd themes //切换到主题文件夹
$ git clone https://github.com/theme-next/hexo-theme-next next //将其克隆的hexo-theme-next重命名为next
Hexo 有两份主要的配置文件(_config.yml):一份位于站点根目录下,称为
站点配置文件
,关键字站点;另一份位于主题目录下,称为主题配置文件
,关键字主题。
建议使用Notepad++
打开配置文件,它内存比较小、免费。下载地址:
https://notepad-plus-plus.org/download/v7.5.9.html
修改站点配置文件
主要包含以下内容:
1、新增网站的信息
# Site
title: DeppWang's Blog #网站标题
subtitle: 这是副标题 #网站副标题
description: 坚持分享知识,坚持留言支持 #网站描述
author: DeppWang #你的名字
language: zh-Hans #网站使用的语言
timezone:
2、修改博客文章的URL,默认显示英文,避免中文过长乱码,需要在新建文章中的Front-matter(顶部-线包裹区域)中新增一个字段english_title配合使用,方生效。此项可暂时跳过
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://depp.wang #你网站的URL
root: /
permalink: :year/:month/:day/:english_title/ #此处将文字url改为英文,避免中文乱码。
permalink_defaults:
3、将标签和分类名在此处对应设置,这样URl的中文改为对应英文,此项可暂时跳过
# Category & Tag
default_category: uncategorized
category_map:
设计模式: Design Pattern #为避免分类名称为中文造成URL过于冗长,将中文转换成对于英文
数据库: Database
tag_map:
单例模式: Singleton Pattern #为避免标签名称为中文造成URL过于冗长,将中文转换成对于英文
排序算法: Sort Algorithms
4、主题更改next
# Extensions
# Plugins: -hexo-generator-sitmap
## Themes: https://hexo.io/themes/
theme: next #主题设置,改为next
5、设置GitHub仓库托管路径
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@yourname.github.com:yourname/yourname.github.io.git,master //博客文件存储位置;注意格式
修改主题配置文件
主要修改以下内容:
1、修改网址图标,可在http://tool.lu/favicon/上设计自己的网址图标,替换themes/next/source/images/
文件下对应文件
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
2、新增页面标签、分类选项
menu:
home: / || home #主页
#about: /about/ || user #关于页面
tags: /tags/ || tags #标签页
categories: /categories/ || th #分类页
archives: /archives/ || archive #归档页
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap #搜索引擎抓取
#commonweal: /404/ || heartbeat #公益404
#about: /about #关于页面(需手动创建)
#search: /search #搜索页面(需手动创建)
3、根据个人喜好切换主题,以下切换为Mist主题
# Schemes
#scheme: Muse
scheme: Mist #切换为Mist主题
#scheme: Pisces
4、设置博客头像,将头像(如:deppwang.jpg)放在站点下的 /themes/next/source/images
文件夹下
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/deppwang.jpg #设置头像
5、设置博客友链
# Blog rolls
links_title: Links
#links_layout: block
#links_layout: inline
links: #链接
阿里中间件团队博客: http://jm.taobao.org/
Jark's Blog: http://wuchong.me/
廖雪峰个人网站: http://www.liaoxuefeng.com/
6、设置文章中代码主题
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night #代码主题
生成标签、分类页面
主题文件修改第2条,已经在页面上显示出标签和分类页选项,但此时还未完全成功配置。需要在站点下打开Git Bash
运行分别以下命令生成标签和分类页面
hexo new page "tags"
hexo new page "categories"
在/source目录下会生成一个tags和categories文件夹,里面包含一个index.md文件。
可用有道云笔记或其他MarkDown编译器打开,修改title为中文名标签、分类
常用hexo命令
hexo g
:完整命令为hexo generate,用于生成或更新静态文件(即public文件夹,也就是整个博客网站的静态文件)
hexo d
: 完整命令为hexo deploy,用于将public文件夹发布到远程代码托管网站中(如GitHub)
hexo clean
:用于清除静态文件(public文件夹)。当hexo g
命令更新文件失败时,可先清除文件
hexo g -d
:同时生成静态文件,并发布,最实用
总结
Hexo主题不断更新,各项配置也在变化,建议直接根据官方文档配置。网上此类教程十分丰富,可多加参考。此文不免出现差错,有问题请留言。