Hexo搭建博客系列:(一)Hexo安装与添加NexT主题

0.282字数 1384阅读 758

原来发了一个关于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停止。

image.png

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目录下会生成一个tagscategories文件夹,里面包含一个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主题不断更新,各项配置也在变化,建议直接根据官方文档配置。网上此类教程十分丰富,可多加参考。此文不免出现差错,有问题请留言。

推荐阅读更多精彩内容