摘要 :
这是一篇有关如何使用Github Pages和Hexo搭建自己独立博客的详尽教程,里面介绍了如何使用Hexo框架和next主题进行博客编写。
基本配置
我们自己的博客出现Hello World并不是我们想要的,那么我们来进一步配置,将它真正我们自己的博客。
打开根目录下站点配置文件_config.yml
,设置如下内容:
|
|
参数 | 描述 |
---|---|
title | 网站标题 |
subtitle | 网站副标题 |
description | 网站描述 |
author | 您的名字 |
language | 网站使用的语言 |
timezone | 网站时区。Hexo 默认使用您电脑的时区。 |
其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。
配置完成后,重新部署,会发现一些变化。但文章内容还不是我们自己的呀,下面来写我们自己的博客。
写博客
新建文章
执行hexo new '文章名'
,hexo会帮我们在..\hexo\source\_posts
下生成相关md文件:
打开这个文件就可以开始写博客了,默认生成如下内容:
当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。一般完整格式如下:
删除hello-world.md
,同时删除public
文件夹下的hello-world
文件夹:
将编写好的文章保存,重新生成和部署就可以啦!
新建页面
假如我新建一个名字为tags
的页面,在博客根目录输入
打开 tags/index.md
,并改成:
|
|
分类同理
|
|
打开category/index.md
,改为:
|
|
附上文档Front-matter。这样实现了在Hexo页面的目录栏点击进去可以索引到相对应的功能,如点击categories,打开的就是分类标签的合集,不然显示的会是空白页。
假如我新建一个名字为about
的页面:
在source文件夹下,将生成about文件夹:
部署后将在public文件夹生成一个新的html页面:hexo\public\about\index.html
,通过访问https://用户名.github.io/about/
访问这个页面:
你可以通过编辑index.html
,添加自己的简历等其他你想加入的内容。但注意,它是新建了一个html页面,不是文章,不会出现在博文目录。
至此,博客的基本功能已经全部实现,下面的高级配置,让你更加方便快捷的写博客!
高级配置
现在,Hexo根目录结构如下图:
.
├── _config.yml
├── db.json
├── package.json
├── public
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
下面介绍的几个是会经常用到的:
_config.yml
网站配置信息,也就是本文所称的站点配置文件,可以在此配置大部分的参数。基本配置在前面基本已经设置过了。
scaffolds
模版文件夹。新建文章时,Hexo 会根据 scaffold 来建立文件。可以编辑标题、日期、标签和内容,但是没有分类的选项。我们可以手动加入categories:
项,或者打开scaffolds/post.md
文件,在tages:
上面加入categories:
,保存后,重新执行hexo n 'name'
命令,会发现新建的页面里有categories:
项了。
scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值。
Hexo的模板是指新建的markdown文件中默认填充的内容。例如,在使用hexo new 文章名
时,默认生成的md文件会包含如下内容:
默认内容是哪里来的呢?就在scaffold/post.md中保存:
假如对每篇博客我都需要添加分类categories
,每次都手动添加太麻烦,我希望每次默认生成都有categories:
,那么就可以在scaffold/post.md中添加:
保存后,每次新建一篇文章时都会包含post.md中的内容。
当然,你也可以在scaffolds文件夹下创建自己的博客模板,我创建一个名为blog
的模板:
通过如下命令调用我创建的blog模板新建文章:
在_posts
中生成md文件:
public
该文件夹中的内容将被最终push到github仓库中。
source
资源文件夹是存放用户资源的地方。除_posts
文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件(如刚刚生成的about文件夹)会被拷贝到 public 文件夹。
为github仓库添加readme
既然 source 文件夹中的内容将全部被推送到 public 文件夹,public 文件夹中的内容又将被最终push到github仓库中,那么如果我们想要为github仓库添加readme.md,只要在 source 文件夹中创建就好了:
部署到github,就有readme了,但我们发现,README.md已经被解析为README.html,显示的全是html代码,并不是我们想要的文档格式的内容:
为了解决这个问题,我们回到source文件夹,将README.md
重命名为README.MDOWN
,再部署到github:
source文件夹中,.md会被解析为html,并放到 public 文件夹被push到github,但.MDWN不会被解析。
themes
主题文件夹,下载的主题都保存在此文件夹下。Hexo 会根据主题来生成静态页面。
设置分类列表
在我们编辑文章的时候,直接在categories:
项填写属于哪个分类,但如果分类是中文的时候,路径也会包含中文。
比如分类我们设置的是:
categories: 编程
那在生成页面后,分类列表就会出现编程
这个选项,他的访问路径是:
*/categories/编程
如果我们想要把路径名和分类名分别设置,需要怎么办呢?
打开根目录下的配置文件_config.yml
,找到如下位置做更改:
|
|
在这里category_map:
是设置分类的地方,每行一个分类,冒号前面是分类名称,后面是访问路径。
可以提前在这里设置好一些分类,当编辑的文章填写了对应的分类名时,就会自动的按照对应的路径来访问。
设置标签
在编辑文章的时候,tags:
后面是设置标签的地方,如果有多个标签的话,可以用下面两种办法来设置:
|
|
|
|
问题
- next是Hexo的一个博客主题,这个主题 ,首页显示的文章列表,每一遍都是全文,不方便概览。
希望达到的效果
- 首页显示文章列表,列表里的每一篇文章只显示预览,不显示全文。
解决方法
百度了好久,折腾了半天,改了各种参数,算是撞破了头,最后试出来了。
哎,搞移动端的,不太懂网页的这些东西,不说废话了,直接上解决方法:
- 进入hexo博客项目的themes/next目录
- 用文本编辑器打开_config.yml文件
搜索”auto_excerpt”,找到如下部分:
12345# Automatically Excerpt. Not recommand.# Please use <!-- more --> in the post to control excerpt accurately.auto_excerpt:enable: falselength: 150把enable改为对应的false改为true,然后
hexo d -g
,再进主页,问题就解决了!
到这里,我们已经了解了如何配置一个Hexo博客,并且通过1234> $ hexo n ‘name’> $ hexo g> $ hexo s> $ hexo d
几个常见命令来新建、更新、预览、同步你的博客。
Hexo中如何用Markdown插入本地图片
虽然在官方语法中,Markdown插入图片的格式是这样的:
然而,如果你用了Hexo框架,那你得小心了。
为什么要用Hexo,Octopress之类的框架呢?无非是为了让页面更加丰富多彩,以及让操作更加简便。这些用jeklly直接来做是十分繁琐,费时的。
好了,回归正题。首先,你不可能在网页里用绝对路径,这样怎么部署到服务器上呢?所以必定是相对路径。Markdown本来的语法中,只要img和md文件的相对路径是对的就行,然而Hexo不知道对路径做了什么处理,你需要在source文件夹中新建一个images文件夹,然后把图片放在images文件夹里。路径也必须是这样的:
这样做的好处是,图片资源的管理比较有序。坏处是给初学者带来一定的疑惑,而且在markdown的编辑器里,无法实时预览。
Hexo 扩展功能
为Hexo添加百度搜索
默认的Hexo用的是Google的搜索,因为某些不可抗拒的原因,访问起来不是很流畅,所以我们设置成百度搜索。
打开themes/light/layout/_widget/search.ejs
文件,里面内容替换为:
|
|