Hexo搭建个人博客

简介

对于想拥有快速、简洁、高效的博客且没有广告的个人博客系统,Hexo是一个不错的选择。以下是Hexo的几个特性:

  • 可以使用Markdown语法编写博客;
  • 基于Node.js把源文件(.md等)编译成静态项目(.html、.css、.js等);
  • 可以一键部署到GitHub Pages, Heroku 或其他平台;
  • 支持插件集成和丰富的插件生态;

本文将带领大家从零开始搭建属于自己的博客系统,并做一些简单的配置。
后续会介绍博客的美化、功能的丰富、博客的运维等。

安装

安装Node环境

  • Mac安装Node。
    1
    brew install node
    不知道brew是什么?如果你是一名软件开发人员,强烈推荐安装brew
  • Linux安装Node
    1
    yum install -y nodejs
  • 其它系统
    其它系统安装Node.js可以去Node.js官网下载安装包安装。

安装完Node.js后会自动安装npm。

使用npm安装Hexo

npm install -g hexo-cli

创建博客项目

hexo init blog
如果找不到hexo,可以使用npx,如:npx hexo init blog

安装依赖

1
2
cd blog
npm install

启动项目

1
npx hexo server 或 npx hexo s

到此,使用Hexo搭建的博客系统就已经安装成功了。
可通过浏览器输入http://localhost:4000访问博客系统。

配置

修改站点配置文件站点配置文件是根目录的_config.yml

站点信息

1
2
3
4
5
6
7
8
# -- 站点信息
title: 程序员DJW
subtitle: ''
description: '发际线逐渐上涨的程序员'
keywords:
author: 程序员DJW
language: zh-CN
timezone: ''

文章永久链接

文章链接默认的生成规则是::year/:month/:day/:title,是按照年、月、日、标题来生成的,文章标题修改后,链接会变。
我们使用abbrlink为文章自动生成唯一链接,即使文章标题或者内容修改后,链接也不会变。

  1. 安装依赖
    1
    npm install hexo-abbrlink --save
  2. 修改配置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # -- 永久链接
    #ipermalink: :year/:month/:day/:title/
    #permalink_defaults:
    #pretty_urls:
    # trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
    # trailing_html: true # Set to false to remove trailing '.html' from permalinks

    permalink: posts/:abbrlink/
    abbrlink:
    alg: crc32 #support crc16(default) and crc32
    rep: hex #support dec(default) and hex
    drafts: false #(true)Process draft,(false)Do not process draft
    # Generate categories from directory-tree
    # depth: the max_depth of directory-tree you want to generate, should > 0
    auto_category:
    enable: true
    depth:

在线编辑博客

以下二选一,本博客使用方式二:

在线编辑博客,图片存在博客里

  1. 安装依赖
    1
    npm install hexo-admin --save
  2. 重启Hexo
  3. 浏览器在线编辑博客
    通过地址http://localhost:4000/admin即可在线编辑博客。
    paste image
  4. 设置在线编辑博客的用户密码:
    paste image
    paste image
    1
    2
    3
    4
    5
    # -- 在线编辑博客
    admin:
    username: test
    password_hash: $2a$10$UEayfM4LTXOKcjATBIQksuLooRDxzedxqPcvGuyIr47VJ/wA8Fk7m
    secret: test
  5. 重启Hexo再次通过浏览器在线编辑博客
    访问地址http://localhost:4000/admin,输入用户名/密码:test/password即可在线编辑博客。

在线编辑博客,图片存在七牛云

图片可以博客放在一起,但是如果自己的服务器带宽低的话,加载图片会比较慢,这时候我们可以把图片放到七牛云的CDN,七牛云每月免费10G空间,作为简单的个人博客这些流量足够我们使用。
图片上传到七牛,需要上七牛云注册申请对象存储,还需要拥有自己的域名。
paste image

创建对象存储
![paste image](http://cdn.duanjw.com/1590216444472wwizkxuc.png?imageslim)
选择立即绑定自定义域名
![paste image](http://cdn.duanjw.com/1590216560383uwi74td1.png?imageslim)
创建域名
![paste image](http://cdn.duanjw.com/15902166374891shr1dl4.png?imageslim)
在域名服务商设置域名解析

paste image

七牛云密钥

该插件是基于在线编辑博客实现的,所有配置和在线编辑博客配置一样,只是需要添加七牛账号的相关配置。

  1. 安装依赖
    1
    npm install hexo-admin-qiniu --save
  2. 添加配置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # -- 在线编辑博客,并把图片上传到七牛
    admin:
    username: test
    password_hash: $2a$10$UEayfM4LTXOKcjATBIQksuLooRDxzedxqPcvGuyIr47VJ/wA8Fk7m
    secret: test
    qiniuCfg:
    imageslim: true # 启动图片瘦身,仅华东区bucket可以使用
    AccessKey: '***'
    SecretKey: '***'
    BucketName: 'duanjw-blog'
    bucketHost: 'cdn.duanjw.com'
坚持原创技术分享,您的支持将鼓励我继续创作!