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

原来发了一个关于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主题不断更新,各项配置也在变化,建议直接根据官方文档配置。网上此类教程十分丰富,可多加参考。此文不免出现差错,有问题请留言。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容