零基础-搭建个人博客3-博客环境

本篇目的

通过挑选好的自定义的模板来完成自己博客的本地化运行,并理解hexo的相关配置信息和文件结构;为后续的博客精进化之路打下一定的基础。

博客环境:

1.初始hexo文件目录:

个人博客

node_modules:是你初始化博客需要的一些基础依赖的三方模块。这里不需要你关注和改动;

scaffolds:应该是hexo的模板类文件;这里也不需要你关注和改动;

source:这个是你写文章的源码目录,后续的所有文章都在这里添加;

public:这个是服务启动后生成的静态页面&资源文件的目录;这个也就是后续需要部署到github的pages服务中的全部文件;

themes:这个是hexo你依赖的主题模板,这个可以在hexo社区中找你自己喜欢的模板;

https://hexo.io/themes/

我选择的是Ayer模板:

https://github.com/shen-yu/hexo-theme-ayer

此模板目前已经不再维护了;但是基础功能还是可以使用的,样式简洁清晰,分类标签满足诉求,打赏功能集成在里面。
接下来我就根据这个模板来进行的的博客系统的初始化工作;

剩余的文件只需要关注_config.yml即可,这个是你博客系统的核心配置文件。稍后步骤3中我们会提到。

2.将选定的模板部署到本地:

git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

在终端或者bash窗口中,进入到你的博客系统文件夹;就是1中图片展示的文件目录;

在终端或者bash窗口中执行上述的git命令,目的是将github上的模板拷贝到本机

3.设置博客的基础配置:

在终端或者bash窗口中,进入到你的博客系统文件夹;就是1中图片展示的文件目录;

打开基础配置文件:_config.yml(这里是系统配置)

个人博客

展开详情——修改如下配置:
1
2
3
4
5
6
7
8
9
title: 阳小良
subtitle: '体验式人生'
description: '不想做插画师的程序猿,不是好厨师'
keywords: 阳小良,个人博客,程序猿,插画师,技术博客,人生感悟
author: 阿良
language:
- zh-CN
- en
theme: ayer

如果不想修改博客名称等配置,可以只修改主题:

theme: ayer

然后在终端执行如下命令:

hexo s

个人博客

能提示ayer主题,并打印出:http://localhost:4000 ,即表明hexo模板安装成功;

4.访问基础模板网页:

在浏览器中执行:http://localhost:4000 ,我们可以得到如下网页:

个人博客

可以看到基本上的博客框架已经出来了,里面的页面title,网页描述,关键字这些我都没有调整;仅仅是修改了theme对应的主题;

5.配置分类和标签:

我们通过步骤4已经将基础的模块和效果呈现出来了,但是我们点击分类和标签发现是找不到对应的路径。

这是因为我们默认的系统中并未设置对应的分类和配置;我们可以按照模板上说明的步骤去创建分类和标签。

创建基础分类模块:(以下命令均需要在您的博客从基础文件夹根路径中执行)

hexo new page categories

个人博客

接下来我们打开categories文件夹下面的index.md,并修改其文件内容如下:

1
2
3
4
5
---
title: 分类列表
type: categories
layout: "categories"
---

tags的创建方式类似于categories;只不过需要修改tags/index.md的文件内容如下:

1
2
3
4
5
---
title: 标签列表
type: "tags"
layout: "tags"
---

friends的创建方式类似于categories;只不过需要修改friends/index.md的文件内容如下:

1
2
3
4
5
---
title: 友情链接
type: friends
layout: "friends"
---

为了让上面的内容生效后,大家更容易理解,我们可以打开默认的hello-world.md(其位置在{你博客的根目录}/source/_post/hello-world.md)

在头几行修改配置,增加分类和标签,如下配置:

1
2
3
4
5
6
7
---
title: Hello World
tags:
- 五味杂陈
categories:
- 零基础
---

这样,我们再次打开主页,点击分类和标签,便可以看到数据都正常了;

个人博客

6.模板细节调整:

6.1模板配置文件调整:

模板的基础配置我们可以根据自己的诉求进行调整,具体调整的位置路径:

{你博客的根目录}/themes/ayer/_config.yml

这里的config文件对应的是你的页面模板的配置,不是根目录下面的那个基础环境的配置;

这个每个人按照你自己的博客诉求进行调整即可。

6.2日志内容填写:

接下来我们就可以按照自己的意愿去分类填写自己的个人博客内容了;
个人博客

如上图所示,你创建的md文档只有都放在_post文件夹中,这里可以安装自己的喜好设置不同的文件件,方便文章的管理和区分

我们在_post下新建md文件,并设置好上面我们提到抬头分类,比如本章的抬头分类我设置如下:

1
2
3
4
5
6
7
8
9
10
11
---
title: 零基础-搭建个人博客3-博客环境
date: 2015-01-14 23:13:14
tags:
- 谋生手段
- hexo
- 零基础
categories:
- 谋生手段
- [零基础,搭建个人博客]
---

其中[零基础,搭建个人博客];这个表示的是二级分类;
展示效果如下:
个人博客

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2011-2025 阿良
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信