0%

如何使用Hexo搭建博客

一直以来都想要创建属于自己的博客,刚好最近无意中了解到了Hexo这款基于Node.js的博客框架,尝试了一番,觉得很不错,就此写一篇个人总结。

搭建环境(Windows平台下)


Hexo的文件编码格式为UTF-8

下载Git for Windows

进入上面的链接,然后点击 “Windows” 即可自动下载符合你Windows平台的Git安装包

运行Git安装包

点击“ Next ”

点击” Next “

选择 Git 的安装路径,然后点击” Next “

勾选要安装的组件,然后点击” Next “

配置开始菜单文件夹名称,如果不创建就勾选左下角的” Don’t create a Start Menu folder”,然后点击” Next “

选择是否将Git加入到系统环境变量Path中,建议选择“ Use Git from the Windows Command Prompt”,也可根据自己的喜好选择,然后点击” Next “

点击” Next “

开始安装,等待安装完毕

安装成功!

安装好Git后在GitHub上注册一个账号并登录,如果已经有GitHub账号直接登录,然后在GitHub新建一个仓库(Repository),作为你博客的版本库。

注:要求GitHub Pages的仓库名必须为your_user_name.github.io

Node安装包里带有npm

注:新旧版本Hexo安装命令有所区别,请以为官网为准

运行cmd,执行如下命令安装Hexo

npm install hexo-cli -g

查看Node版本

node -v

查看Hexo版本

hexo version

创建并初始化项目


创建项目

hexo init hexo-lmx

进入目录

cd hexo-lmx

安装依赖包

npm install

初始化项目

hexo init

注:之后所有的命令都在该目录下进行(本文中为hexo-lmx目录下)

启动服务

hexo server

用浏览器打开 http://localhost:4000 或者 http://127.0.0.1:4000 就能看到你的博客雏形了,接下来将对你的博客进行一系列自定义配置。

注:按两次Ctrl+c可以停止本地预览服务

使用


目录结构

.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

全局配置_config.yml

注:配置文件的冒号”:”后面有空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
##Hexo中文配置文档:https://hexo.io/zh-cn/docs/index.html

# Site 站点信息
title: Koen's Blog #标题
subtitle: #副标题
description: 想要出类拔萃,就要做别人不想做的事 #站点描述,给搜索引擎看的,可以是自己的座右铭
author: Koen #作者
email: koen****@gmail.com #此处换成你的电子邮箱
language: zh-Hans #语言
timezone:

# URL 链接设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://xautlmx.github.io #博客网址
root: / #根目录
permalink: :year-:month-:day-:title.html #文章的链接格式
#参考https://hexo.io/zh-cn/docs/permalinks.html
permalink_defaults:

# Directory 目录设置
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
tag_dir: tags #标签目录
archive_dir: archives #归档目录
category_dir: categories #分类目录
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing 写作
#Front-matter可以配置文章使用的模板、所属的分类和Tag等
#可参考https://hexo.io/zh-cn/docs/front-matter.html
new_post_name: :title.md # File name of new posts
#新文章标题
default_layout: post
#默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false # Transform title into titlecase
#标题转换成大写
external_link: true # Open external links in new tab
#在新选项卡中打开链接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
enable: true #是否启用
line_number: true #显示行号
auto_detect: true
tab_replace:

# Category & Tag 分类与标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format 日期时间格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
#参考http://momentjs.com/docs/#/displaying/format/
time_format: HH:mm:ss

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页文章数,设置为0禁用分页
pagination_dir: page

# Disqus #Disqus评论,替换为多说
disqus_shortname:

# Extensions 拓展插件
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape #设置主题

# Deployment 部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: http://github.com/your_user_name/your_user_name.github.io
branch: master

命令行的使用

常用命令

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

安装插件

npm install <plugin-name> --save
npm update #升级
npm uninstall <plugin-name> #卸载

< plugin-name >为插件名

安装主题

git clone <repository> themes/<theme-name>

< repository >为主题的 git 仓库,< theme-name >为要存放在本地的目录名

编辑文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件:标题.md

title: 标题
date: 2014-11-11 11:11:11
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---
正文,使用Markdown语法书写

编辑完后保存,执行 hexo server 预览

删除文章

先删除仓库里面 source/_posts/ 里的 我的文章.md 文件

然后执行下面命令更新博客:

hexo g == hexo generate#生成
hexo s == hexo server #启动预览服务
hexo d == hexo deploy#部署

发布

以发布到 Github 为例

先安装Git插件

npm install hexo-deployer-git --save

然后编辑全局配置文件 _config.yml 中的 deploy 部分,your_user_name为用户名

1
2
3
4
5
6
# Deployment 部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: http://github.com/your_user_name/your_user_name.github.io
branch: master

最后进行部署

hexo deploy

出现以下提示说明部署成功

[info] Deploy done: git

点击 GitHub 上项目的 Settings,GitHub Pages,提示Your site is published at http://xautlmx.github.io/
第一次上传网站的话需要等十分钟左右,以后每次更新都能马上打开

优化


配置主题

推荐几款酷炫的主题:

如果你觉得都不合你口味,那你可以到Hexo的主题列表中慢慢挑,总有一款适合你>_<

下载主题

$ git clone <repository> themes/<theme-name>

注:务必将整个主题目录放在 theme 目录下

在全局配置文件 _config.yml 中将 theme 一行改成想要的主题

theme: Next

主题目录结构

.
├── languages          #国际化
|   ├── default.yml    #默认
|   └── zh-CN.yml      #中文
├── layout             #布局
|   ├── _partial       #局部的布局
|   └── _widget        #小挂件的布局
├── script             #js脚本
├── source             #源代码文件
|   ├── css            #CSS
|   |   ├── _base      #基础CSS
|   |   ├── _partial   #局部CSS
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #style.css
|   ├── fancybox       #fancybox
|   └── js             #js
├── _config.yml        #主题配置文件
└── README.md          #主题介绍

以下是主题 Next 的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# when running hexo in a subdirectory (e.g. domain.tld/blog), remove leading slashes ( "/archives" -> "archives" )
#菜单设置
menu:
home: / #主页
#categories: /categories #分类页
archives: /archives #归档页
tags: /tags #标签页
about: /about #关于页面
#commonweal: /404.html #公益404页面

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo,next"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss:

# Icon fonts
# Place your font into next/source/fonts, specify directory-name and font-name here
# Avialable: default | linecons | fifty-shades | feather
icon_font: default
#icon_font: fifty-shades
#icon_font: feather
#icon_font: linecons

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal


# MathJax Support
mathjax:


# Schemes
scheme: Mist

#侧栏设置
# Sidebar, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
#sidebar: post #在文章页面(拥有目录列表)时显示
sidebar: always #在所有页面中都显示
#sidebar: hide #在所有页面中都隐藏(可以手动展开)

#头像设置
avatar: /images/head_portrait.jpg

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true


# Automatically add list number to toc.
toc_list_number: true

#首页显示文章摘录设置
# Automatically Excerpt
auto_excerpt:
enable: enable
length: 150

# Use Lato font
# Note: this option is avialable only when the language is not `zh-Hans`
use_font_lato: true

# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 0

## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING

# Use velocity to animate everything.
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version 主题版本
version: 0.4.5.1

更多有关Next主题的配置请参考Next主题配置指南

如果对Hexo搭建博客仍有疑问可以参考Hexo官方文档

原文链接:http://blog.lmintlcx.com/post/blog-with-hexo.html


- - - - - - - - - 本文结束啦感谢您阅读 - - - - - - - - -