0%

hexo个人博客搭建

发表于 分类于

文章字数：1255,阅读全文大约需要5分钟

hexo是一款基于github的博客系统，使用markdown编写文章内容。在此记录一次博客搭建主要工作。

1.安装环境

##1.1 git
git --version查看git版本
##1.2 node
node -v查看node版本

2.初步安装Hexo

  • 安装Hexo脚手架
    1
    npm install -g hexo-cli
  • 初始化站点
    新建一个文件加，并使用命令行进入。执行以下命令
    1
    2
    3
    hexo init <folder>
    cd <folder>
    npm install
    一个本地博客系统就构建好了
  • 2.3站点目录
    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml //博客配置，名称、关键词、作者、语言、主体等内容设置。
    ├── package.json//应用信息，插件等内容。
    ├── scaffolds//脚手架，有三个模板：文章(posts)、博客页(page)、草稿页(draft)。
    ├── source//博客存放处，之后通过命令可以新建tags(标签)、categories(分页)
    |   ├── _drafts//草稿(初始)
    |   └── _posts//文章(初始)
    └── themes//主题存放处
  • 常用命令
    hexo n <filename>新建文章
    hexo clean清除缓存
    hexo g生成静态页面
    hexo s启动本地服务器，本地查看效果
    hexo d部署到网站上

    3.站点优化

    3.1分类

  • 新建分类页面
    1
    hexo new page categories
  • 给页面添加类型
    进入source->categories->index.md
    1
    2
    3
    4
    5
    ---
    title:文章分类
    date: 2019-04-22 12:25:30
    type: "categories"   #添加
    ---
  • 模板添加分类
    打开scarffolds->post.md
    1
    2
    3
    4
    5
    6
    ---
    title: {{ title }}
    date: {{ date }}
    categories:
    tags:
    ---
    这样新建文章后就会有这个属性，填写分类就可以实现文章分类功能。

    3.2 标签

  • 新建标签
    1
    hexo new page tags
  • 给页面添加标签属性
    打开 source->tags->index.md
    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2019-04-23 00:13:22
    type: "tags" #新添加的内容
    ---

    3.3使用分类和标签

    1
    2
    3
    4
    5
    layout: posts
    title: 我的第一篇博客
    date: 2019-04-23 00:17:41
    categories: 学习笔记
    tags: [node.js, java]

    4.部署到GitHub

    github中：
  1. 创建用户名.github.io的仓库
  2. setting里添加GitHub Pages选项
  3. 本地同步 打开 . ->config.yml，添加部署路径
    1
    2
    3
    4
    deploy:
        type: git
        repo: git@github.com:yourName/yourName.github.io.git
        branch: master
    注意：
  4. 冒号后有一个空格
  5. 需要先关联仓库，配置ssh

使用命令hexo g hexo d 完成生成并推送
yourName.github.io就是博客网址

注：报错

1
error deployer not found:github

时，执行

1
npm install --save hexo-deployer-git

然后再试一次。

主题篇

1.安装NEXT

next是hexo的一款主题，也可以点击官网查看跟多（even主题也不错）

安装主题只用将next的项目clone到根目录下themes/next里

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

然后修改配置启用next主题
修改根目录下 _config.yml

1
theme: next

在next的_config.yml中可以修改next的样式，共有四个。可以在官网看到案例

  • Muse (默认)
  • Mist
  • Pisces
  • Gemini
    注释其他的，留下想要的样式
    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    2.设置Menu(最上面的按钮)

    themes/next/_config.yml
    1
    2
    3
    4
    5
    6
    menu:
      home: / || home #首页
      about: /about/ || user #关于我
      tags: /tags/ || tags  #标签
      categories: /categories/ || th #分类
      archives: /archives/ || archive #归档

    3.github挂饰

    点击fork me on github的按钮，在GitHub Corners选择挂饰，复制代码添加到themes/next/layout/_layout.swig的<div class="headband"></div>下方。将代码里的https//your-url 换成自己的git主页。

4.修改超链接css样式

themes/next/source/css/_common/components/post/post.styl末尾添加

1
2
3
4
5
6
7
8
9
10
.post-body p a{
  color: #0593d3; //原始链接颜色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割线颜色
  &:hover {
    color: #fc6423; //鼠标经过颜色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割线颜色
  }
}

5.设置头像以及动画

主题目录_config.yml中添加（找Sidebar Avatar）

1
2
//添加头像地址
avatar: [ http://....]

头像圆角旋转/themes/next/source/css/_common/components/sidebar/sidebar-author.styl添加

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
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

6.代码块样式

themes\next\source\css\_custom\custom.styl添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

7.社交网站图标

next/_config.yml的Social 

1
2
[社交平台名]: [社交地址] || [图标名称]
//github 、heartbeat(心)、spinner(圈)...（图标）

图标在Font Awesome Icon

8.RSS

  1. 根目录下
    npm install --save hexo-generator-feed
  2. 全局_config.yml末尾添加
    1
    2
    3
    # Extensions
    ## Plugins: http://hexo.io/plugins/
    plugins: hexo-generate-feed
    打开Next的_config.yml中的rss:
    配置rss: /atom.xml

9.搜索功能

  1. 根目录下npm install hexo-generator-search --save
  2. 根目录_config.yml中
1
2
3
4
5
6
# Search 
search:
  path: ./public/search.xml
  field: post #搜索那个文件夹(page、all)
  format: html
  limit: 10000 #限制条数

next_config.yml

1
2
3
4
local_search:
  enable: true #改为true
  trigger: auto
  top_n_per_article: 1 #字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。

首页隐藏部分（点击显示更多）

next配置文件

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

简易化搭建

HEXO Portable一分钟搭建博客