前言

免费搭建个人博客,可以使用github+hexo来完成

  • hexo

    简洁的博客框架：配置简单,多种主题,可以本地浏览
    官网

  • 前期准备

    git工具
    Node.js

  • hexo常用命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //构建静态文件
    hexo g
    //开启服务器,默认http://localhost:4000/
    //ctrl+c停止
    hexo s
    //部署到远端(github)
    hexo d
    //清除缓存
    hexo clean
    //创建文章,默认存放路径通过default_layout参数配置
    hexo n {标题}

创建本地博客

  1. 安装Hexo

    1
    npm install -g hexo-cli

  2. 新建文件夹,命令行初始化hexo

    1
    2
    hexo init
    npm install

链接图片
scaffolds文件夹：一些模板文件,后面会进行修改
source文件夹：一些编译需要的,如文章
themes文件夹：存放主题
_config.yml文件：博客的主要配置
package.json文件：一些依赖的插件

  1. 预览博客
    1
    2
    hexo g
    hexo s

预览一下默认的博客
public文件夹中即为生成的静态页面

  1. 改变主题
    在Hexo官网找到我们喜欢的主题,根据主题说明配置即可

    发布到github

    在github上创建仓库名字为：{名字}.github.io 的仓库
    在根目录的_config.yml文件进行配置,参考如下
    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
    72
    73
    74
    75
    76
    77
    78
    79
    80
    # Site
    title: xxx的博客	# 修改
    subtitle: 
    description: 
    author: xxx
    language: zh-cn
    timezone:

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://xxx.github.io/ # 修改
    root: /
    permalink: :category/:title.html # 文章的url
    permalink_defaults:
        lang: en

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:
      
    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      order_by: -date
      
    # Category & Tag
    default_category: 随笔 # 默认页面
    category_map:
        随笔: notes   #分类  
    tag_map: 		# 标签
        Java: Java
    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: xxx	#修改

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: https://github.com/xxx #修改 为仓库地址
      branch: master

重点是deploy属性,修改为自己的仓库地址
也可以使用ssh来配置,也可以直接使用https的地址
发布：

1
2
hexo g
hexo d

.deploy_git文件即为与git仓库关联的文件夹

配置模板

在scaffolds文件夹中,可以配置我们创建文章的模板
post.md配置

1
2
3
4
5
6
7
8
9
10
11
12
---
title: {{ title }}
date: {{ date }}
author: xxx
avatar: /images/xx.png
authorDesc: 
categories: 	# 分类
tags:			#标签
    - Java
photos:
- xxx.jpg	#缩略图
---

这样我们创建文章的时候，会根据配置生成

关于标签

我们在打开标签页面的时候可能为空
原因是public\tags目录下没有index.html

  • 创建tags
    1
    hexo new page tags

生成source/tags/index.md文件
配置index.md标签文件

1
2
3
4
5
6
---
title: tags
date: 2019-06-19 15:02:26
type: "tags"
layout: "tags"
---

根_config.yml添加tag_map列表
文章中添加标签

关于插件安装

插件都可通过官网来寻找如何配置的
例如搜索插件插件配置

Tips

  • 配置时冒号后面需要有空格
  • 安装插件报错
    1
    2
    xxxA@10.0.1 requires a peer of xxxB@>= 4.12.1 but none is
    installed. You must install peer dependencies yourself.

我们可以直接根据提示，安装必要的依赖

1
npm install xxxB@4. xxxB@10. --save-dev