HEXO+Gitee博客搭建

First Post:
Last Update:

HEXO+Gitee博客搭建

1. 安装软件

  1. 安装node.js
  2. 安装git软件

2. 软件的配置和博客搭建

2.1 环境检查和配置

  1. 在要搭建的博客目录下我这里是D:\TechnologyBlog\demo_web\，鼠标右键打开Git Bash here，输入以下命令查看是否安装成功:

    1
    2
    node -v
    npm -v

  2. 安装淘宝的cnpm管理器

    1
    npm install -g cnpm --registry=http://registry.npm.taobao.org

  3. 确认是否安装成功cnpm

    1
    cnpm -v

  4. 安装依赖

    1
    cnpm install hexo-server hexo-browsersync hexo-renderer-pug hexo-renderer-sass hexo-renderer-ts --save

  5. 配置Gitee全局

    1
    2
    git config --global user.name "用户名"
    git config --global user.email "邮箱"

2.2 创建博客

  1. 安装HEXO框架

    1
    cnpm install -g hexo-cli

  2. 在博客目录下执行博客初始化命令

    1
    hexo init

  3. 安装主题，这里以Yue-plus大佬搭建的Arknights主题为例：

    1
    git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights

  4. 修改博客目录下的_config配置文件，修改主题：

    1
    2
    #在101行附近
    theme: arknights

2.3 生成博客以及本地启动

对于hexo的命令，可参考文章：Hexo系列(三) 常用命令详解

  1. 生成博客

    1
    hexo g

  2. 本地启动

    1
    hexo s

  3. （可选）如果需要清理生成的所有博客文件，然后想要重新生成，可以使用以下命令

    1
    hexo clean

2.4 [可选]针对Arknights主题配置

  1. 取消自动编号

    如果你的Markdown文档自己写了编号，则需要关闭主题的标题自动编号，打开主题目录配置文件(D:\TechnologyBlog\demo_web\themes\arknights_config.yml)，修改list_number的值为false

    1
    2
    3
    4
    toc:
      list_number: false # true / false ；是否显示编号
      max_depth: 6 # 最大目录深度
      min_depth: 1 # 最小目录深度

  2. 开启代码高亮

    修改配置文件的hljs值为true，（D:\TechnologyBlog\demo_web_config.yml）

    1
    2
    3
    #在53行附近
    highlight:
      hljs: true

3. 博客的配置

3.1 全局配置文件

  1. 配置文件详解，更多请参考HEXO官方文档

    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site
    title:                  # 博客名称
    subtitle:               # 博客子标题
    description:            # 作者描述
    keywords:               # 站点关键词，用于搜索优化
    author:                 # 博主名
    language: zh-CN         # 站点语言
    timezone: Asia/Shanghai # 时区
    # 注意
    # 语言这里需要进入 /***/themes/next/languages/ 目录
    # 不同版本的语言名称可能有些许差别
    # *** 为博客根目录

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com                # 你的域名，如果有 
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    # 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        # 博文的格式，默认markdown编辑 
    default_layout: post            # 默认发布的为post，即默认发布的是文章
                                    # 共有三种类型，具体见hexo文档
    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: uncategorized
    category_map:
    tag_map:

    # 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: next                 # 使用的主题，这里选用的是Next主题        

    # Deployment                # 下面是第三方扩展，根据个人需求设置，也可不修改以下内容
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type:

    search:                     # 实现搜索文章的功能
      path: search.xml
      field: post
      format: html
      limit: 100

    feed:                       # 实现博客订阅功能
      type: atom
      path: atom.xml
      limit: 20

    sitemap:                    # 生成站点地图用于SEO优化
      path: sitemap.xml

    baidusitmap:                # 同上
      path: baidusitemap.xml

  2. 配置概要

    一般我们只配置Site和Deploy，其他的有需要自行了解。

    配置文件实例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # site
    title: 凌云博客
    subtitle: Dark凌云
    description: 一个Demo博客
    keywords: 凌云博客
    author: LingYun
    language: zh-CN
    timezone: ''
    # 扩展
    #关于上传到Gitee后面会讲到
    deploy:
        type: git	#类型
        repo: https://gitee.com/Dr-LingYun/Dr-LingYun.git	#博客仓库地址
        branch: master	#分支

4. 博客的编写

  1. 生成博客

    1
    hexo n 文章名称

  2. 打开Markdown文件编写，默认生成格式文本

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 'Hello World !'
    date: 2020-04-15 21:54:02
    tags: code
    category: Example
    ---
    <!--more-->

    下面依次解释参数：

    ​ title——文章标题

    ​ date——编写时间，一般可以自动生成也可以手动更改

    ​ tages——标签

    ​ category——类别

    ​ <!–more–>——在此之前的内容称之为概要

    在<!–more–>下面便可编写正常的Markdown文章。

5. Gitee配置并上传博客

  1. 获取个人的空间地址

    在设置——个人资料——个人空间地址确认自己的地址，我这里是Dr-LingYun。

    image-20201108124751884

  2. Gitee搭建仓库

    点击创建仓库

    image-20201108124349045

    配置仓库，路径位置填写之前获取到的ID！！！！我这里之前搭建过所以提示已经存在。其他按图片中配置即可。

    image-20201108125310983

    删除仓库的默认文件

    image-20201108125457517

  1. 配置

    复制HTTPS链接：

    image-20201108125653374

    打开HEXO配置文件，配置文件（D:\TechnologyBlog\demo_web_config.yml）：

    1
    2
    3
    4
    5
    # 在105行左右
    deploy:
      type: git
      repo: https://gitee.com/Dr-LingYun/Dr-LingYun.git #此处复制之前的HTTPS链接
      branch: master

  2. 安装git部署插件

    1
    cnpm install --save hexo-deployer-git

  1. 生成博客且上传,建议在此之前执行一遍 hexo clean命令清理之前生成的博客文件。执行后可能需要输入账号密码，输入Gitee的账号密码即可。

    1
    hexo g && hexo d

  2. 检查仓库是否上传成功

    image-20201108130718064

  3. 打开Gitee Pages服务（每次上传博客后需要重新启动更新一次）

    image-20201108130854609

  4. 打开域名查看是否搭建成功（刚开始反应有点慢，过段时间就好了）

    image-20201108131213047

    可以看到博客可以正常访问了。

    image-20201108131226022

OK,本次教程就到这里。步骤如果还有不完善的地方欢迎加入QQ群讨论：

图层 1
打赏
支付宝 | Alipay
微信 | WeChat