Hexo+码云 从搭建到管理一站解决

2018-04-18  本文已影响0人  天启_三月

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

搭建

搭建前提请先安装以下程序:

安装完成后,使用 Node.js 命令行工具执行以下命令

npm install -g hexo-cli

建站

进入 Page 页 开启 Page 服务 网站路径
hexo init F:/Hexo
cd F:/Hexo
npm install

配置

安装目录下的 _config.yml 是主要的配置文件,包含以下的配置


title: 标题

subtitle: 副标题

description: 描述

keywords: # 暂时不知道作什么的

author: 作者language: zh-CN # 使用中文

timezone: # 时区,默认使用电脑时区

url: http://itscloudy.gitee.io/blog
root: /blog/
deploy:
  type: git
  repo: https://gitee.com/itscloudy/Blog.git

# 默认地址 http://localhost:4000
hexo server

开始创作!

写博客

首先要了解 ,HEXO 支持的是 Markdown

现在,创建一篇文章。执行以下命令(例:hexo new "Hexo+码云 从搭建到管理一站解决")

hexo new

执行之后,在 source/_post 文件夹下会出现对应名称的 Markdown 文件。或者,可以直接将写好的 Markdown 放到 source/_post 里

Markdown 的相关知识自行百度,CSDN、有道云等都支持。

文件开头加上以下信息:

属性 描述
title 标题,文章标题由这个决定,跟文件名无关
data 日期
tags 标签,多数主题支持按标签查询。例子中为多标签写法,单个标签不用括号
categories 分类,多数主题支持按分类查询

例如:

---
title: hexo+码云 从搭建到管理一站解决

data: 2018-03-28 17:04:00

tags: [Hexo,Sample]

categories: Hexo
---

总之,将 Markdown 格式的新博客放到 source/_post (重要的说三遍)里,且有头部信息就行。然后,请执行以下命令:

hexo generate    #或者 hexo g

以上命令生成静态页面(即经过主题渲染的页面,public 文件夹里)。然后,使用 server 命令在本地测试

hexo server

首次上传前用 Node.js 命令行工具执行以下命令,用来安装 hexo 上传工具。第二次之后不必执行。

npm install hexo-deployer-git --save

然后,使用以下命令上传:

hexo deploy    #或者 hexo d

创建页面

以创建标签(tags) 分页为例:

hexo new page "tags"
创建好的页面

在 source 文件夹下出现了名为 tags 的文件夹,其中包含了一个 index.md,这个便是新的页面

标签、分类(categories) 分页不用编辑,由主题自动填充。其他页面如关于(about)、联系(contact)等的内容,需要手动编辑其文件夹中的 index.md

然鹅,新页面是否可用,一般由主题配置决定,敬请继续往下阅读

更改主题

主题是 HEXO 非常重要的一块内容

找主题

导入主题

这里以比较流行的 next 主题为例

git clone https://github.com/iissnan/hexo-theme-next themes/next
git clone https://github.com/iissnan/hexo-theme-next

设置主题

根目录下的 _config.yml 中配置主题

theme: next

主题配置

根目录下 _config.yml 包含了很多配置,但是还有大量的配置由主题目录下的 _config.yml 来设定。不同主题的配置不尽相同,这里还是以 next 主题为例

这里设置除主页外,要显示的页面

# 选项名:页面名(即上面一节创建的文件夹名) || font-awesome 图标

menu:

  home: / || home

  archives: /archives/ || archive

  tags: /tags/ || tags

  categories: /categories/ || th-large

  contact: /contact/ || phone

设置在指定的位置显示的社交链接

# 社交途径:路径 || font-awesome 图标

social:

  GitHub: https://gitee.com/itscloudy || github

  E-Mail: itscloudy@foxmail.com || envelope

# 后面的文件路径都是在 themes/next/source 目录下的

favicon:

  small: /images/favicon-16x16-next.png              # 小尺寸图标

  medium: /images/favicon-32x32-next.png              # 中尺寸图标

  apple_touch_icon: /images/apple-touch-icon-next.png # apple_touch 图标

  safari_pinned_tab: /images/logo.svg                # safari_pinned 图标
# 有5中样式可选 normal,night,night eighties,night blue,night bright

highlight_theme: night eighties
footer:

  since: 2018      # 起始年

  icon: user      # 起始年和版权之间的小图标(font-awesome 图标)

  copyright:      # 版权,默认为作者名

  powered: true    # 显示“由HEXO强力驱动”

  theme:

    enable: true  # 显示主题名

    version: true  # 显示主题版本

提示:font-awesome 是一个图标库,在这里搜索 font-awesome 图标,使用给出的图标名称就OK

以上为常用配置,更多配置请自行百度

其他

显示图片

博客图片的一般显示方式为 :

![描述](/img/picture.png)

然鹅这种方法时常会失效,我也布吉岛为什么(就一个字儿没动,突然就加载不了了)。以下是官方的解释

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。—— Hexo 官网

所以我建议我们应该用官方推荐下面这种方式引用图片和其他资源

{% img /img/picture.png 描述 %}

图片也可以上传到七牛云、腾讯云等的“对象储存”服务上,使用 http 来显示。也可以使用简书和 CSDN 等博客类网站在上传图片后生成的图片路径。

{% img https:... 描述 %}

更多

更多信息可以查阅 HEXO 官网文档

示例:我的博客

上一篇下一篇

猜你喜欢

热点阅读