博客终于搭好了,就写一篇文章就来记录一下我是如何配置Hexo直到部署上线的。顺便留着以后避免踩坑,拿走不谢哟~ ^ ^

安装

安装Node

Hexo是基于node.js的,所以安装 Node 是必须的。

$ brew install node

安装Git

这个也是必须的,你需要把本地的hexo内容提交到github上

$ xcode-select --install

申请一个Github账号

Github来创建用来做博客的远程仓库、域名和服务器之类的。

安装Hexo。

$ npm install -g hexo-cli

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

$ hexo init Blog
$ cd Blog
$ npm install

生成静态页面(该命令也可缩写为 $ hexo g)

$ hexo generate

本地启动服务,进行预览: (该命令也可缩写为 $ hexo s)

$ hexo server

在浏览器中输入终端打印出的路径,默认都是http://localhost:4000 也可能是 http://127.0.0.1:4000

Hexo的基本使用

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
        type: git
        repo: https://github.com/Lemon23/Lemon23.github.io.git
        branch: master

然后安装hexo-deployer-git

$ npm install hexo-deployer-git -S

最后利用hexo指令 $ hexo d 发布到github就完成了。在你的github的仓库中已经能看到刚刚部署的静态Web网站。

在这里要强调一下,如果部署的是个人页,新建的仓库必须是 your-user-name.github.io。具体创建仓库和申请github个人域名的步骤,这里就不细说了,很简单。

Hexo全局配置文件

Blog/_config.yml,这是全局配置文件,跟主题配置文件是不同的,千万别弄混了。

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

# Site 站点配置
title: Lemon 的博客 #网站标题
subtitle: #网站副标题
description: #网站描述
author: #你的名字
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://lemon23.github.io #网址,搜索时会在搜索引擎中显示
root: / #网站根目录
permalink: :year/:month/:day/:title/ #永久链接格式
permalink_defaults: #永久链接中各部分的默认值

关于url值的问题,如果你绑定使用的是Github,那么就填你github上的域名,例如:http://your-user-name.github.io。

Directory 目录配置

source_dir: source #资源文件夹,这个文件夹用来存放内容
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染,可以使用glob来配置路径

这部分在你没完全搞懂Hexo的文件架构时,还是别乱改了,本宝宝也不敢轻易乱动。

# 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: 0 #把文件名转换为小写(1)或大写(2)
render_drafts: false #显示草稿
post_asset_folder: true #是否启动资源文件夹
relative_link: false # 把链接更改为与根目录的相对位置
future: true
highlight: #代码块设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

Hexo有三种默认布局:post、page和draft,它们分别对应不同的路径。新建文件的默认布局时post,你也可以更改或者在post.md文件中增加默认布局参数。

# 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 #每页显示的文章数量(0=关闭分页功能)
pagination_dir: page #分页目录

不想页面显示太长的可以把数字改小。

# Extensions 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus #当前主题名称

在这里更改你的主题名称,要提前配置好主题配置文件。

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

相对应的填写你自己的github地址和仓库分支。