前言

搭建博客的初衷是记录开发过程中遇到的坑,进行分享和交流

安装工具git和node.js

搭建hexo

hexo常用的命令

  • $ hexo g #完整命令为hexo generate,用于生成静态文件
  • $ hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
  • $ hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
  • $ hexo n #完整命令为hexo new,用于新建一篇文章
  • $ hexo new page “pageName” ,新建页面

安装脚手架

鼠标右键任意地方,选择Git Bash,使用以下命令安装hexo

1
$ npm install hexo-cli -g

如果之后在使用的过程中,遇到以下的错误

1
ERROR Deployer not found : github

则运行以下命令,或者你直接先运行这个命令更好。

1
$ npm install hexo-deployer-git --save

创建放置博客的文件夹

D:\HEXO 记得备份,点击鼠标右键,选择Git Bash,执行以下命令,Hexo会自动在该文件夹下下载搭建网站所需的所有文件。

1
$ hexo init

安装依赖包

1
$ npm install

看看刚刚下载的HEXO文件带来了什么

在D:\HEXO内执行以下命令:

1
2
$ hexo g
$ hexo s

然后用浏览器访问http://localhost:4000/,会看到一个漂亮的博客了,当然这个博客只是在本地的,别人是看不到的,hexo3.0使用的默认主题是landscape。轻轻松松就看到了一点成果,是不是很激动,这就是hexo的强大之处,这个本地预览的功能,我真是爱不释手。

接下来在github里面创建一个仓库

仓库名字格式为youname.github.io,例如我的叫Yveda.github.io,注意:此处的youname必须为你的github用户名,用户名是可以用来登陆的。

部署本地文件到github

既然Repository已经创建了,当然是先把博客放到Github上去看看效果。编辑D:\hexo下的_config.yml文件。在_config.yml最下方,添加如下配置(命令中的第一个Yveda为Github的用户名,第二Yveda为之前New的Repository的名字,记得改成自己的。另外记得一点,hexo的配置文件中任何’:’后面都是带一个空格的),如果配置以下命令出现ERROR Deployer not found : github,则参考上文的解决方法。

1
2
3
4
deploy: 
type: git
repository: http://github.com/Yveda/Yvead.github.io.git
branch: master

配置好_config.yml并保存后,执行以下命令部署到Github上。如果你是第一次使用Github或者是已经使用过,但没有配置过SSH,则可能需要配置一下,本文的另一种发布到github的配置一节有介绍。

  • $ hexo g
  • $ hexo d

执行上面的第二个命令,可能会要你输入用户名和密码,皆为注册Github时的数据,输入密码是不显示任何东西的,输入完毕回车即可。

此时,我们的博客已经搭建起来,并发布到Github上了,这时可以登陆自己的Github查看代码是否已经推送到对应Repository,在浏览器访问Yveda.github.io就能看到自己的博客了。第一次访问地址,可能访问不了,您可以在几分钟后进行访问,一般不超过10分钟。

hexo的配置文件

hexo里面有两个常用到的配置文件,分别是整个博客的配置文件D:\HEXO_config.yml和主题的配置文件D:\HEXO\themes\light_config.yml,此地址是对于我来说,hexo3.0使用的默认主题是landscape,因此你们的地址应该是D:\HEXO\themes\landscape_config.yml,下文所有讲到light的地方,你们将之换为自己的主题名即可。本博客使用的主题是基于light改善的主题,目前还在完善中,如果完成的比较好,以后可能发布在github上。如果你想自己挑选喜欢的主题,hexo官方提供了12个主题供你自己选择,使用方法很简单,点击自己想要的主题,进入该主题的Repository,使用Git将主题clone到本地,然后将整个文件夹复制到D:\HEXO\themes文件夹下,将D:\HEXO_config.yml里的theme名字改为自己下载的主题的文件夹名即可。

Hexo配置文件详细说明

D:\HEXO_config.yml

网站

1
2
3
4
5
6
7
参数              描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。

其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

1
2
3
4
5
参数                 描述                       默认值
url 网址
root 网站根目录
permalink 文章的永久链接格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值

目录

1
2
3
4
5
6
7
8
9
参数                 描述   
source_dir 资源文件夹,这个文件夹用来存放内容。
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir 标签文件夹
archive_dir 归档文件夹,按年份
category_dir 分类文件夹,按标签
code_dir Include code 文件夹
i18n_dir 国际化(i18n)文件夹
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

文章

1
2
3
4
5
6
7
8
9
10
11
12
参数                  描述  
new_post_name 新文章的文件名称
default_layout 预设布局
auto_spacing 在中文和英文之间加入空格
titlecase 把标题转换为 title case
external_link 在新标签中打开链接
filename_case 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts 显示草稿
post_asset_folder 启动 Asset 文件夹
relative_link 把链接改为与根目录的相对位址
future 显示未来的文章
highlight 代码块的设置

分类&标签

1
2
3
4
参数                  描述          默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

时间/日期格式

1
时间/日期格式

分页

1
2
3
参数          描述                              默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

扩展

1
2
3
参数          描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

修改后保存更新查看效果

按照自己的意愿修改完后,执行hexo g,hexo s,打开localhost:4000看看效果。

发表一篇文章

1
2
3
1.在Git Bash执行命令:$ hexo new "my new post"
2.在D:\HEXO\source\_post中打开my-new-post.md,打开方式使用记事本或subline vscode。
3.hexo中写文章使用的是Markdown,没接触过的可以看下[Markdown语法说明](https://note.youdao.com/),[一分钟学会Markdown](https://note.youdao.com/)
1
2
3
4
5
6
7
title: my new post #可以改成中文的,如“新文章”
date: 2015-04-08 22:56:29 #发表日期,一般不改动
categories: blog #文章文类
tags: [博客,文章] #文章标签,多于一项时用这种格式,只有一项时使用tags: blog
---
#这里是正文,用markdown写,你可以选择写一段显示在首页的简介后,加上
<!--more-->#在<!--more-->之前的内容会显示在首页,之后的内容会被隐藏,当游客点击Read more才能看到。

写完文章后,查看效果

1
2
3
$ hexo g生成静态文件。
$ hexo s在本地预览效果。
hexo d同步到github,然后使用http://Yveda.github.io进行访问。

删除一篇文章

在D:\HEXO\source_post 删除想要删除的文件,然后再执行hexo g,hexo d

清除缓存

清除缓存文件db.json和已生成的静态文件public。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

1
$ hexo clean

总结

看到博客最终生成,确实有点小激动,经历很多坑,都写在上面了。