Hexo的安装和使用（mac篇）

最新推荐文章于 2024-09-11 18:25:11 发布

CharlesWei1920

最新推荐文章于 2024-09-11 18:25:11 发布

阅读量9.1k

点赞数 3

分类专栏：随手记文章标签： hexo

本文链接：https://blog.csdn.net/superchao_5/article/details/51963942

版权

随手记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官方文档传送门。Hexo的安装是个很快速简便的过程，但依然还是有不少坑。这里记录个我的安装过程，给大家一些参考。以下是我安装时系统及软件版本，请尽量保证不低于这些版本号：

OS ： OS X EI Capitan 10.11.3
XCode : 7.3
hexo : 3.2.2
node : 4.4.7
git : 2.6.4

安装

安装前提

需要安装 Node.js 和 Git 两个应用程序，直接到官网安装最新版本即可，如已安装请跳过。

Node.js 官网
Git 官网

安装Hexo

安装完Node.js 及 Git 后，即可使用npm来安装Hexo：

$ npm install -g hexo-cli

初始化Hexo

创建一个目录用来作为你的blog目录，例如 MyBlog；并在该目录中进行Hexo的初始化：

$ hexo init MyBlog
$ cd ~/MyBlog/
$ npm install

新建完成后，得到以下目录：

·
|-- _config.yml
|-- package.json
|-- scaffolds
|-- source
|   |-- _drafts
|   |-- _posts
|-- themes

至此，你就完成了Hexo的安装及初始化，接下来我们就可以进行本地的预览啦：
先安装hexo server

$ sudo npm install hexo-server

然后生成静态页面并打开hexo本地服务

$ hexo generate   (或 hexo g)
$ hexo server

按命令行提示，打开 http:\/\/localhost:4000\/ 即可看到默认主题的默认页面了。
可能加载会很慢，因为默认主题中使用了些Google的资源，后面更换主题就会快很多了。

配置

与Github账户关联

首先需要去Github注册一个账号，并新建一个名为 [your_account].github.io 的仓库。
然后打开前面创建的MyBlog目录下的 _config.yml 文件，在修改最下方的deploy为：
*注意，冒号后面一定要加空格

deploy:
  type: git
  repo: gihub: https://github.com/[your_account]/[your_accout].github.io.git
  branch: master

接下来安装hexo的git部署，在命令行中执行：

$ npm install hexo-deployer-git --save

最后，将生成静态页面并部署到github的仓库中，执行：

$ hexo d -g 
或者
$ hexo generate
$ hexo deploy

当提示 ** INFO Deploy done: git 即上传成功，这时就可以通过 **http:\/\/[your_account].github.io 来访问你的个人站点了。
这里涉及了github pages 的相关内容，有兴趣的可以去了解一下。

hexo的基本配置

以下是hexo配置文件 _config.yml 的基本内容及基本设置，更多个性化设置请参考官方文档：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site  ##页面信息
title: Who's Blog  ##标题，即浏览器标签栏显示的内容
subtitle: Why so serious?  ##副标题
description:        ##描述，简介
author: Charles Wei  ##作者
language: zh-CN  ##语言
timezone: Asia/Shanghai  ##时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wwww.charleswei.me  ##域名，后面自定义域名后，写在这里，用 .github.io的话，这里用默认的不用改
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: :year-:month-:day-: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: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: 
  enable: true 
  line_number: true 
  auto_detect: false 
  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
time_format: HH:mm:ss

# Pagination ##每页显示文章数，按需改
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions ##主题设置
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: indigo

# Deployment  ##git部署关联
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: git 
  repo: github: https://github.com/glassweichao/glassweichao.github.io.git
  branch: master

主题配置

Hexo具有高定制的主题效果，你可以从Hexo的主题库中选择合适的主题，也可以自己制作。
以我现在使用的indigo主题为例。首先将主题库clone到MyBlog目录下的themes目录：

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

安装less，主题使用less作为css预处理工具：

npm install hexo-renderer-less --save

安装feed,用于生吃RSS：

npm install hexo-generator-feed --save

安装json-content，用于生成静态站点数据，提供搜索功能的数据源：

npm install hexo-generator-json-content --save

开启标签页：

hexo new page tags

修改MyBlog/source/tags/index.md的源数据：

layout: tags
noDate: true
comments: false
---

修改hexo配置文件_config.yml中的主题标签：

theme: indigo

最后修改主题配置文件MyBlog/themes/indigo/_config.yml：

#添加新菜单项遵循以下规则
# menu:
#   link: fontawesome图标，省略前缀，本主题前缀为 icon-，必须
#   text: About 菜单显示的文字，如果省略即默认与图标一致，首字母会转大写
#   url: /about 链接，绝对或相对路径，必须。
#   target: _blank 是否跳出，省略则在当前页面打开
menu: 
  home: 
    text: 主页
    url: / 
  archives: 
    url: /archives 
  tags: 
    url: /tags 
  github: 
    url: https://github.com/glassweichao 
    target: _blank 
  link: 
    text: 测试 
    url: /404
rss: /atom.xml
#你的头像,替换掉 indigo/source/img/logo.jpg 即可
urlavatar: /img/logo.jpg
# Content
tags: 
  title: 标签
#是否开启分享
share: true
#是否开启搜索
search: true
#是否大屏幕下文章页隐藏导航
hideMenu: true
#是否开启toc
#toc: false  关闭toc
toc: 
  list_number: true # 是否显示数字排序
#浏览器标签栏小图标
favicon: /favicon.ico