0x01 写在前面的话

第一次见到这个这个Hexo主题,是在查找lucene学习指南时看到了阿里中间件博客,文章写的自然不错,但博客程序主题更是令我喜欢不已.

于是我便萌生了也想撸一个的冲动。

既然想撸一个,那么咱们自然首先得来Hexo 官网看看吧。

0x02 上官网

Hexo官网:https://hexo.io/zh-cn/

0x03 四大特性

Tips:这么好的东西,就问你心动不心动~

0x04 搭建环境

点击开始后我们便进入了开发文档界面,

安装前提

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js
  • Git

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli

Mac 用户

您在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

如果您的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装

安装 Git

Git官网: https://git-scm.com/download/

  • Windows:下载并安装 git.
  • Mac:使用 HomebrewMacPorts :brew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

Windows 用户

由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm,但是由于下面这个提示,咱们直接用安装包安装吧。

如果想用nvm方式安装请移步:https://hexo.io/zh-cn/docs/

Windows 用户

对于windows用户来说,建议使用安装程序进行安装。安装时,请勾选Add to PATH选项。
另外,您也可以使用Git Bash,这是git for windows自带的一组程序,提供了Linux风格的shell,在该环境下,您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单,在任意位置单击右键,选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行,您可以考虑始终使用Git Bash来进行操作。

node.js 官网:https://nodejs.org/en/

下载后点击安装,我们可以看到这个界面

Tips: 这里我们看到在安装Node.js 的时候会安装一个NPM 包管理器,这样我们才能执行待会的NPM命令。

Add to Path, Node.js and npm

npm modules

这两个选择Entire feature will be installed on local hard drive不然会出问题。

安装 Hexo

在任意位置单击右键,选择“Git Bash Here”即可。

Tips: 由于Hexo的很多操作都涉及到命令行,您可以考虑始终使用Git Bash来进行操作。

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

$ npm install -g hexo-cli

执行后会像这样

0x05 建站

安装 Hexo 完成后,我们其实需要切换下目录

当前我们位置处于桌面,因此假设我想把站建立在C:\Users\fairy\Documents\HexoBlog目录下

那么需要执行命令

cd ..

Tips:这里注意下这个cd和..后面要有空格,这个是和linux有点不太一样的。

再切换到Documents目录

cd Documents

创建文件夹HexoBlog

mkdir HexoBlog

请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init HexoBlog

执行成功后会变成这样

然后进入这个文件夹

cd HexoBlog

进行安装

npm install

执行命令后卡看到回显:

生成目录结构哦如图所示

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

package.json

应用程序的信息。EJSStylus 和 Markdown renderer 已默认安装,您可以自由移除。

{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-server": "^0.2.0"
}
}

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

0x06 配置

Hexo配置:https://hexo.io/zh-cn/docs/configuration.html

0x07 指令

Hexo指令: https://hexo.io/zh-cn/docs/commands.html

0x08 迁移

Hexo迁移: https://hexo.io/zh-cn/docs/migration.html

0x09 配置NexT模板

其他中文教程:https://github.com/iissnan/hexo-theme-next/blob/master/README.cn.md

在终端切换到hexo 根目录. 在hexo目录下一定有 node_modulessourcethemes 和其他文件夹:

ls

执行后你将看到这样的界面:

从 github 上获取主题

下载最新发布的版本

下载地址:https://github.com/iissnan/hexo-theme-next/releases/latest

创建主题文件夹

mkdir themes/next

解压后结构如图所示:

复制解压的文件到theme/next文件夹下

在 hexo 根目录下 的配置文件_config.yml里设置主题:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

配置文件详情:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ # Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone: # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
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
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case:
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
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:
order_by: -date # 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
time_format: HH:mm:ss # Pagination
## Set per_page to 0 to disable pagination
per_page:
pagination_dir: page # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

执行部署命令

hexo deploy

执行成功后会如图所示

启动服务

hexo server

访问页面:

http://127.0.0.1:/

成功后界面

Hexo NexT 博客本地搭建指南的更多相关文章

  1. Hexo+Github: 博客网站搭建完全教程(看这篇就够了)

    本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. # 阅读须知 注意,这篇文章篇幅较长,主要针对新手,每一步很详细,所以可能会显得比较啰嗦, ...

  2. Hexo NexT 博客后台管理指南

    上篇文章讲到,将Hexo NexT 博客成功上传到GitHub 并绑定到我们自定义的域名下了. 但是却还是有个问题,那就是Hexo NexT 博客如何进行后台管理呢? 如果总是通过手动创建文件的方式, ...

  3. Hexo静态博客搭建教程

    Hexo是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.生成静态网页可以托管在github.下面简单介绍一下he ...

  4. Hexo+Github博客最简教程-Dockerfile自动搭建

    闲谈 拿出你的气质,打开你的电脑,借你半小时搭建好属于你的hexo博客,小生用dockerfile自动帮你搭建好:你只需要在你的mac或linux或windows上提前把docker安装好,如何安装不 ...

  5. Linux下使用 github+hexo 搭建个人博客01-hexo搭建

    为什么要搭建自己的博客系统? 原因有好几个吧,归类如下:1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第三 ...

  6. hexo 个人博客搭建

    Hexo 小插曲介绍 虽然标题是第一次写博客. 但是我这个困难户至少挣扎了1年多了, 一直下不去手.今天可算是开了个头. 贵在坚持吧 抽时间介绍我的hexo安装历程吧,今天实在是有点困了,要睡觉了. ...

  7. GithubPages + Hexo + Disqus博客教程

    文章主要描述了利用github page,hexo静态博客框架以及disqus来搭建个人静态博客的详细步骤. github page用来搭建博客的主页,hexo用来更改博客主题.发布文章等等,并通过配 ...

  8. 基于hexo创建博客(Github托管)

    基于hexo的博客 搭建好的博客网站 dengshuo7412.com 搭建步骤 1.依赖文件下载 Node.js 2.Hexo的安装 3.部署到Github 4.Hexo创建博客基本操作 5.Hex ...

  9. 手摸手带你用Hexo撸博客(一)

    原文地址 手摸手带你用Hexo撸博客(一) 环境搭建 安装 node 狂点下一步 命令行输入此条命令 如果能看到版本号则安装成功 node -v 安装Git (同上) 实在不会的小伙伴百度一下,教程很 ...

随机推荐

  1. Python String 方法详解

    官网文档地址:https://docs.python.org/3/library/stdtypes.html#string-methods 官网 公号:软测小生ruancexiaosheng 文档里的 ...

  2. C++语言实现-邻接表

    图的邻接表实现 邻接表是图的一种链式存储结构.主要是应对于邻接矩阵在顶点多边少的时候,浪费空间的问题.它的方法就是声明两个结构.如下图所示: 先来看看伪代码: typedef char Vertext ...

  3. 《Gradle权威指南》--Groovy基础

    No1: Groovy中分号不是必须的 No2: Groovy中,单引号和双引号都可以定义一个字符串常量,不同的是单引号标记的是纯粹的字符串常量,而不是对字符串里的表达式做运算,但是双引号可以. ta ...

  4. myeclipse maven的联系

    本文非完整的maven安装步骤,这些只是我看的资料的一点点而已,做出一些总结,纯属以后可以看看我的学习经历.如有需要,可以下载我分享的Maven实战(有目录的),书中源代码下载. 设置myclipse ...

  5. 提取IPv6地址的编码信息

    提取IPv6地址的编码信息   为了保持兼容和地址转化,很多IPv6地址将额外的信息编码到地址信息中,如IPv4地址和Mac地址.在Nmap中,可以使用address-info脚本提取内嵌的信息,并进 ...

  6. [HihoCoder1394]网络流四·最小路径覆盖

    题目大意:从有向无环图中选出若干点不想交的链,使得这些链覆盖所有的点,并且链的条数最小. 思路:设超级源点$S$.超级汇点$T$.将$N$个点复制一份,分为$A$部和$B$部.对于$A$部的所有点$A ...

  7. C++ 经典知识点面试题

    1.指针的优点和缺点 优点:灵活高效 (1)提高程序的编译效率和执行速度(数组下标往下移时,需要使用乘法和加法,而指针直接使用++即可) (2)通过指针可使用主调函数和被调函数之间共享变量或数据结构, ...

  8. vi 命令 行首、行尾

    vim 跳到行首 : 数字 0 vim跳到行位 : $  [Shift + 4]

  9. Shell中的>/dev/null 2>&1 与 2>&1 >/dev/null 与&>/dev/null 的区别

    默认情况下,总是有三个文件处于打开状态,标准输入(键盘输入).标准输出(输出到屏幕).标准错误(也是输出到屏幕),它们分别对应的文件描述符是0,1,2 .那么我们来看看下面的几种重定向方法的区别: & ...

  10. db2调优

    系统上线两个月左右,请IBM工程师对数据库进行了一次调优,主要收获感觉有以下几点: 1,应用服务器一定要与数据库服务器分开 2,如果存在多个数据库,一定要硬盘分开(io忙) 3,每个数据库的数据与日志 ...