Fork me on GitHub

2018-09-19 hexo搭建博客以及美化一

hexo搭建博客以及美化一

1 hexo搭建

1 先说一下我的搭建的一些信息

我的操作系统是ubuntu18.04 在这之上搭建的

至于windows系统,我没搭建过所以不知道 可以参考

2 安装hexo

1 安装git 这个我就不说了太简单了 git –version

2 安装node js

1
2
3
4
5
6
7
sudo tar -xJf node-v6.11.2-linux-x64.tar.xz -C /usr/local

sudo ln -s /usr/local/node-v6.11.2-linux-x64/bin/node /usr/bin/node

sudo ln -s /usr/local/node-v6.11.2-linux-x64/bin/npm /usr/bin/npm

node -v npm -v

3 安装hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
安装hexo:
sudo npm install -g hexo

在.bashrc 那么我的是在.zshrc中配置hexo的环境变量:
export PATH=/usr/local/node-v6.11.2-linux-x64/lib/node_modules/hexo/bin:$PATH

初始化博客目录:
我的是在家目录下 hexo init

解释一下各个文件或者目录:
node_modules:是依赖包
public:存放的是生成的页面
scaffolds:命令生成文章等的模板
source:用命令创建的各种文章
themes:主题
_config.yml:整个博客的配置
db.json:source解析所得到的
package.json:项目所需模块项目的配置信息

3 目前只是简单配置next主题 因为我用的就是这个主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
hexo初始化之后默认的主题是landscape

在家目录下的themes目录中:
cd themes/next
git clone https://github.com/iissnan/hexo-theme-next

更新主题NexT:
cd themes/next
git pull

切换成NexT主题,在hexo根文件夹下,
编辑_config.yml文件 这个是站点配置文件:
修改为: theme: next

切换后,用命令清除下缓存:
hexo clean

执行hexo s本地产看NexT主题效果:
hexo s

切换主题 cd blog/themes/next
vim _config.yaml 这个是主题配置文件

在列表中选择一款自己喜欢的主题风格。
# Schemes
scheme: Muse //默认主题
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

我是这个主题风格:scheme: Gemini

设置Menu:
默认只有两个首页和归档

如果还要添加,编辑themes/next/_config.yml:

menu:
home: / || home //首页
about: /about/ || user //关于
tags: /tags/ || tags //标签
categories: /categories/ || th //分类
archives: /archives/ || archive //归档
sitemap: /sitemap.xml || sitemap //站点地图
commonweal: /404/ || heartbeat //404页面

没有创建Menu对应的文件夹,Blog/source文件目录中只有_post目录

初始化对应的Menu文件夹:
比如要创建标签文件夹,终端中输入(前提在Hexo文件路径下):
hexo new page "tags"
hexo new page "about"
hexo new page "categories"
hexo new page "archives"

成功之后在blog/source目录就有tags about categories archives 等目录

编辑Blog/source/tags中index.md文件,添加type: "tags",其他Menu也同理创建。
---
title: 标签
date: 2017-07-13 11:16:00
type: "tags"
comments: false
---

---
title: 分类
date: 2017-07-13 11:17:07
type: "categories"
comments: false
---

ok 到目前为止hexo next主题的基本配置就ok了 下面就是对页面的各种优化

主题配置文件: blog/themes/next/_config.yaml
站点配置文件: blog/_config.yam

4 设置动态背景

1
2
3
4
主题配置文件中找到canvas_nest,设置成ture就OK啦。

# Canvas-nest
canvas_nest: ture

5 在右上角或者左上角实现fork me on github

GitHub RibbonsGitHub Corners选择一款你喜欢的挂饰,拷贝方框内的代码:

1
2
3
将刚刚复制的挂饰代码,添加到Blog/themes/next/layout/_layout.swig文件中,添加位置如下图所示(放在<div class="headband"></div>下方):

<a href="https://github.com/shuigedeng"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a

6 添加RSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
切换到Blog文件夹(hexo init的文件夹)下

安装Hexo插件
npm install --save hexo-generator-feed

安装成功之后,编辑Blog/_config.yml文件,在文件末尾添加
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主题_config.yml文件,command+f搜索rss,在后面加上/atom.xml
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml //注意:有一个空格

hexo s 查看效果

7 在文章末尾添加“文章结束”标记

1
2


-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!