Kenway's Blog

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

发表于 更新于 分类于

目录

一、前期环境准备

二、建站

三、Hexo主题配置

四、发布一篇新博客步骤

五、基于Github和picgo搭建图床

一、前期环境准备

  • 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
    cat ~/.ssh/id_rsa.pub
    查询即可
  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

博客底部加字数统计、建站时间和备案号等

1.操作对象路径Hexo\themes\next\layout_partials\footer.swig

2.添加字数统计、建站时间和备案号，在末尾加上以下代码

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
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">感谢你的阅读，全站内容约{{ totalcount(site) }}字</span>
</div>
<br/>

<div class="theme-info">
  <div class="powered-by"></div>
<a href="http://beian.miit.gov.cn/" rel="noreferrer" target="_blank" style="color:gray">苏ICP备2021050568号-1</a>
<span class="post-count"> | </span>
<a href="http://beian.miit.gov.cn/" rel="noreferrer" target="_blank" style="color:gray">公安备案号</a>


</div>

<br/>

    <!-- 网站运行时间的设置 -->
    <span id="timeDate">载入天数...</span>
    <span id="times">载入时分秒...</span>  
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("06/17/2021 18:03:00");//此处修改你的建站时间或者网站上线时间
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
            document.getElementById("timeDate").innerHTML = "本站建于2021年06月17日，已安全运行 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()",250);
    </script>


博客边栏修改首页、归档、分类等字段显示

  • 在Hexo\themes\next\languages的zh-CN.yml里修改title和menu里的对应字段
  • 在Hexo\themes\next\layout的xx.swig文件里也有部分修改字段

四、发布一篇新博客步骤

第一步 撰写博客

注意：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

第三步 检查网站

自动化部署

  • 在C:\Program Files\Git\usr\bin路径下写一个git-blog文件(用记事本编写后删除后缀名)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #!/bin/sh
    echo 开始进行blog远程部署
    hexo clean
    echo 第一步hexo clean成功
    hexo g
    echo 第二步hexo g成功
    hexo d
    echo 第三步hexo d成功
    echo blog已成功在远程服务器上更新
  • 之后再hexo文件夹里呼出git控制台使用以下命令即可自动化部署
    1
    git blog

五、基于Github和picgo搭建图床

1.下载picgo

2.github上的个人设置的develop setting里的新建一个拥有repo下所有权限的token粘贴到picgo设置上