Kenway's Blog

【工具】使用Hexo+Github搭建个人博客

发表于 更新于 分类于

目录

一、前期环境准备

二、建站

三、Hexo主题配置

四、发布一篇新博客步骤

一、前期环境准备

  • node.js
  • npm
  • git for windows

参考配置：

  • os: Windows10
  • node: 14.17.1
  • npm: 6.14.13
  • git for windows: 2.32.0
  • hexo: 4.2.0

二、建站

Github部分:

新建一个github仓库

仓库名用你的github用户名.github.io的格式

这样最后就可以用

1
https://github用户名.github.io/

从互联网上访问你的个人博客

SSH秘钥配置

  1. 若之前有过SSH秘钥，直接使用
    1
    cd ~/. ssh
    查询即可
  2. 第一次使用SSH秘钥就使用
    1
    ssh-keygen -t rsa -C "邮箱"
    （注意这个邮箱是你github的注册邮箱）
    执行后会有操作提示，连续三次敲击回车即可。执行完成后去C盘用户文件夹寻找.ssh\id_rsa.pub文件，用记事本打开就能看到你的秘钥。

无论是哪种情况，获得秘钥后然后回到github进入个人设置页面，选择SSH and GPG keys，title名可以任意取，key则输入刚才生成的秘钥。
完成上述步骤后，可用

1
ssh -T git@github.com

测试SSH是否配置成功

Hexo部分：

安装Hexo

1
npm install -g hexo-cli

在你希望存放本地博客文件的位置新建一个文件夹Hexo（名字可任意取），使用控制台cd命令进入该文件夹并执行

1
hexo init bolg

然后进行本地部署测试，依次输入

1
2
hexo g
hexo s

执行成功后就可打开网址localhost:4000查看你的博客了！

远程部署部分：

上一步虽然已经将博客搭建成功，但是只能本地浏览，如何将你的博客部署到互联网上呢？这就需要之前我们配置的github部分：

首先打开你的博客目录（下文统一用Hexo文件夹代替），找到名为_config.yml的文件，用记事本打开即可（注意：博客的大部分设置主要就通过修改该文件实现）

找到deploy关键字，并将其修改为下述形式

1
2
3
4
deploy:
  type: git
  repo: https://github.com/github用户名/github用户名.github.io.git
  branch: master

当然repo可以写成

1
repo: https://github用户名:密码@github.com/github用户名/github用户名.github.io.git

这样可以省略每次部署都需要验证登录的繁琐操作。

找到url关键字，并将其修改为下述形式

1
url: http://github用户名.github.io

接下来在Hexo文件夹右键Git Bash Here呼出git控制台依次输入

1
2
3
hexo clean
hexo g
hexo d

来将本地博客远程部署到互联网上，任何人都可以通过https://github用户名.github.io/来访问你的博客！

三、Hexo主题配置

经过上述步骤，已经实现了个人博客的搭建，如对Hexo默认简约主题满意可跳过该节，该节主要介绍如何为博客配置主题NexT和yilia。

NexT主题

NexT是目前Hexo用户使用最多的主题，比较稳定，也支持一些字数统计、评论功能等附加模块。

Next官方文档

安装NexT

首先打开你的博客文件夹唤出git运行

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

该命令会生成一个用于存放next主题的/themes/next文件夹

接着打开博客文件夹根目录下的_config.yml，找到theme字段，将其修改成

1
theme: next

NexT主题风格有：Muse、Mist、Pisces、Gemini，推荐使用Gemini，更换风格只需修改\themes\next下的_config.yml的scheme字段即可

1
scheme: Gemini

配置NexT

title设置

修改博客文件夹根目录下的_config.yml中的# Site字段可修改博客文字描述

对应

头像设置

先将头像文件重命名为ava.png并放到\themes\next\source\uploads文件夹内（uploads文件夹不存在就新建一个）

打开\themes\next文件夹内的_config.yml，找avatar: 下的url： 将其修改成

1
url: /uploads/ava.png

（注意是主题文件夹的_config.yml，不是博客根目录的_config.yml！！！）

另将avatar下的rounded和rotated设置为true可使头像变为圆形边框，并在鼠标指针置于其上时采用默认旋转

1
2
rounded: true
rotated: true

创建归档、分类、标签及关于子页面

在找到menu:字段，去掉归档、分类、标签及关于的注释修改成下述形式（||后面是使用的图标）

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

在博客根目录用git控制台分别执行

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

会在\source生成三个文件夹about、tags、categories，每个文件夹里有一个index.md文件，分别将其修改成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
tags/index.md
---
title: 标签 //title可以随意改
date: 2021-06-18 11:36:58 //日期不动
type: tags //增加一个type属性
---

categories/index.md
---
title: 分类
date: 2021-06-18 11:32:39
type: categories
---

about/index.md
---
title: 个人资料
date: 2021-06-18 11:32:46
---

常见问题：打开分类、标签和关于页面显示404错误

检查两个地方：

  • index.md文件内的type: xx中：后面有一个空格，检查是否遗漏
  • 把博客根目录的_config.yml文件的timezone属性修改成
    1
    timezone: Asia/Shanghai

    四、发布一篇新博客步骤

    第一步 撰写博客

注意：Markdown文件头部要加上以下内容（且冒号：后面一定不要忘加一个空格）

1
2
3
4
5
---
title: 【面经】个人面经全记录
tags: [技术, 工作, 记录]
categories: 面试
---

title是文章标题，tages是标签，categories是分类

把Markdown语言编写的.md文件放到博客文件夹（例如我的是C:\Users\HP\Hexo）

第二步 上传

在博客文件夹呼出git控制台,即在你的博客文件夹根目录右键点击Git Bash Here

依次执行以下代码即可完成远程部署

1
2
3
hexo clean
hexo generate
hexo deploy

若只用本地预览则只需执行

1
hexo server

注意：退出本地预览快捷键为Ctrl + C

其中可采用简写形式

  • hexo generate -> hexo g
  • hexo deploy -> hexo d
  • hexo server -> hexo s

第三步 检查网站