使用Hexo作为个人博客框架

Hexo简介

Hexo 快速、简洁且高效的博客框架
查看Hexo的官方中文文档

安装Hexo及有关环境

1.安装Git

Git是一个分布式版本控制软件

对于Windows系统：
在Git for Windows官网下载安装对应版本
安装完成后，可以使用Git Bash的命令行工具来使用Git以及完成Hexo等有关配置等

对于Linux/Debian系统，在终端中输入：

1
sudo apt-get install git

安装完成后，可以使用git --version查看Git版本号，校验是否正常安装

2.安装Node.js

安装nodeJs以及对应的npm工具依赖

Download for Windows:
在Node.js项目官网选择下载对应版本进行安装

对于Linux/Debian

1
2
sudo apt-get install nodejs
sudo apt-get install npm

同理，安装完成后，可以使用node -v npm -v查看Node.js与npm工具版本号，校验是否正常安装

3.安装Hexo

在本地新建文件夹用作存放与管理博客资源源文件
打开终端/Windows Terminal或是Git Bash cd '文件目录'到对应文件夹中，或是在对应文件夹中打开终端工具
输入：

1
npm install -g hexo-cli

安装完成后，依旧用hexo -v查看一下版本。至此就全部安装完了

从零开始的Hexo使用

1.初始化博客文件夹与安装npm依赖环境

安装 Hexo 完成后，依次执行下列命令，Hexo 将会建立指定的文件夹<folder>

1
2
hexo init <folder>
cd <folder>

你也可以使用命令hexo init myblog

执行以下命令，Hexo 将会在指定文件夹中新建所需要的文件与安装npm依赖环境

1
npm install

在指定的文件夹目录下，你将会得到如下内容:

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • _config.yml: 博客的配置文件

安装deploy-git用于部署的命令

1
npm install hexo-deployer-git --save

2.Hexo的相关使用

你也可以在这里查看对Hexo有关命令使用的详细介绍

1
hexo generate

生成网页静态文件
也可使用 hexo g

1
hexo server

启动服务器
默认情况下，访问网址为 http://localhost:4000/
使用Ctrl + C结束Hexo服务

1
hexo deploy

部署网站
也可使用 hexo d

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

3.对个人博客内容的简易制作

在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置
详细也可参考官方的配置描述

例如：

网站内容

  • title 网站标题
  • subtitle 网站副标题
  • description 网站描述 （主要用于SEO，告诉搜索引擎一个关于您站点的简单描述）
  • author 作者名字
  • language 网站使用的语言（例如：zh-CN）
  • timezone 网站时区 （例如：America/New_York, Japan, 和 UTC）（Hexo 默认使用本地电脑的时区）

网址链接

  • url 网址 | 在这里，你需要把url改成你的网站域名
  • root 网站根目录
  • permalink 文章的永久链接格式
  • permalink_defaults 永久链接中各部分的默认值

网站发布

deploy:

  • type: git
  • repo: https://github.com/<你的Github账户名称>/<你的Github账户名称>.github.io.git
  • branch: master | 提交的分支 主分支使用 main

更换主题：以Cactus为例

本博客在发布之日时使用Cactus作为默认主题
以此为例介绍配置方法
参考对应主题官方 README 文档

1.安装并使用主题

在博客文件根目录中

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

在博客的_config.yml配置文件中，修改 theme 对应项：

1
2
# theme: landscape
theme: cactus

2.修改主题的配置文件

在主题的_config.yml配置文件中进行修改

（1）.颜色主题

对于Cactus，其提供了dark, light, white 和 classic四种颜色主题
以修改为white主题为例：

1
2
3
# _config.yml
theme_config:
  colorscheme: white

（2）.网页导航栏

1
2
3
4
5
6
nav:
  home: /
  about: /about/
  articles: /archives/
  projects: http://github.com/probberechts
  LINK_NAME: URL

（3）.网站首页内容

首页显示博客内容：

仅显示 5 个最新博客（默认）

1
2
3
posts_overview:
  show_all_posts: false
  post_count: 5

显示全部博客

1
2
posts_overview:
  show_all_posts: true

首页显示项目内容：

新建文件source/_data/projects.json 

1
2
3
4
5
6
7
8
9
10
11
12
[
    {
       "name":"Hexo",
       "url":"https://hexo.io/",
       "desc":"A fast, simple & powerful blog framework"
    },
    {
       "name":"Font Awesome",
       "url":"http://fontawesome.io/",
       "desc":"The iconic font and CSS toolkit"
    }
]

（4）.社交网站链接

1
2
3
4
social_links:
  github: your-github-url
  twitter: your-twitter-url
  NAME: your-NAME-url

NAME 是其在 Font Awesome icon 当中的名字

（5）.著作权年内容

1
2
3
copyright:
  start_year: 2016
  end_year:

发布到 Github Page 页面

注册GitHub账户与创建仓库

注册一个GitHub账户

在GitHub.com中看到一个New repository，新建仓库

创建一个和你用户名相同的仓库，后面加.github.io
这样，部署到GitHub page的时候，网页即为xxxx.github.io

生成SSH添加到GitHub

在Git Bash当中

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱

然后创建SSH,一路回车

1
ssh-keygen -t rsa -C "youremail"

在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key
把你的id_rsa.pub里面的信息复制进去

部署！

1
2
3
hexo clean
hexo generate
hexo deploy

过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了！

其它修改

修改页脚显示内容

打开hexo/themes/<使用的主题名称>/layout/_partial路径下的footer.ejs文件

以本站的ICP备案信息为例，在合适的位置插入如下代码：

1
<a href="https://icp.gov.moe/?keyword=20230011" target="_blank">萌ICP备20230011号</a>