前言

最近发现腾讯云搞得博客费钱太多，并且因为我是未成年嘛，也没有办法备案，于是就准备去租一个香港的对象存储，然后搞静态博客，最后我选择了hexo，如你所见这个博客就是由hexo所搭建的

hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这次教程主要介绍：

  • 最基本的部署
  • 撰写属于你的第一篇文章
  • 了解文章的基本结构

本文所采用的系统是MacOS，可能有些地方与Windows有所出入，如遇不会的地方还请评论区留下你的问题。

本文配有目录，可根据自己需求进行跳转

部署

npm

安装

在mac上部署npm其实吧也简单，需要用到homebrew，这部分我会单独开一篇文章来讲。

在这里我假设您已经安装好了homebrew

如何判断安装？

brew -v

如果出现版本号说明已经安装好

执行

brew update

更新homebrew

执行

brew install npm

进行安装npm。执行npm -v即可看到安装好的npm版本

换源

终端执行：

npm config set registry https://registry.npm.taobao.org

npm安装与配置结束

git

brew install git

即可安装完毕

hexo

安装

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

建站

安装完成后，执行下述命令，hexo便会自动在指定文件夹添加所需文件。

hexo init <name>
cd <name>
npm install

执行完成后，使用

hexo g
hexo s

便可以在http://localhost:4000中看到以下页面：

恭喜你现在你的博客就算是在你的本地跑起来了

修改基本信息

现在让我们来看一看这个文件夹中的东西都是什么

.
├── _config.yml #网站的配置信息，您可以在此配置大部分的参数。
├── package.json #应用程序的信息。您可以自由移除留下你需要的东西
├── scaffolds #模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source #资源文件夹是存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes #主题 文件夹。Hexo 会根据主题来生成静态页面

不难看出“_config.yml”是这个站点的参数控制，以下是其翻译版本，加了一些必要配置

<_config.yml>

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

title: Hexo
#站点标题
subtitle: ''
#站点副标题
description: ''
#站点描述
keywords:
#站点关键词多个时使用“,”分割
author: John Doe
#作者昵称
language: zh-CN
#网站语言（默认为en应改为zh-CN）
timezone: 'Asia/Shanghai'
#时区：使用电脑默认的就行

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
#设置你的网站地址，比如说，如果你使用github page，设置url像这样“https://username.github.io/project”
url: http://example.com
permalink: :year/:month/:day/:title/
#文章链接格式（一定要规范，方便爬虫爬取信息）
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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
new_post_name: :title.md 
#默认的名称
default_layout: post
#默认的布局模版
titlecase: false
#是否将标题转化成标题形式
external_link:
  enable: true #在新建标签页中打开网页
  field: site 
  exclude: ''
filename_case: 0
render_drafts: false
#是否渲染草稿
post_asset_folder: false
#是否启用 Asset 文件夹
relative_link: false
#把链接改为与根目录的相对位置
future: true
#显示未来的文章
highlight: #代码块高亮显示
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10 #每页数量
  order_by: -date #排序依据

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

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #设置使用的主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

在修改完这些信息后，使用

hexo g
hexo s

便可在浏览器看到你修改后的效果

开始创作

你到现在已经完成了最最最基本的设置，现在便可以撰写文章了

创建文章

  • 命令行： 使用 hexo new <title>
  • 手动创建：在hexo主目录下source ->_posts目录中创建<title>.md的文件

初步感知

hexo的文章通常是由两部分构成的，分别是：

  • Front-matter
  • 正文
Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games
正文

正文部分使用md语法撰写，详情可查看我的上一篇文章

更新

在你重新对你的博客做出更新后，通常需要部署到网站，下面介绍几个简单的指令。

hexo clean:清理已经生成的静态文件

hexo g:生成所需的静态文件

hexo s启动本地服务，默认访问网站：http://localhost:4000

hexo d:部署网站

感谢您对本文的阅读，如果遇到不理解的地方，可以通过评论的方式进行交流

下一篇将会将博客部署在Github Pages上