Hexo+阿里云&GitHub 搭建个人博客

准备工作

安装必要的软件

Node.js

https://nodejs.org/en/

  • Windows：通过 nvs（推荐）或者 nvm 安装。
  • Mac：使用 Homebrew 或 MacPorts 安装。
  • Linux（DEB/RPM-based）：从 NodeSource 安装。
  • 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导。

git

https://git-scm.com/

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 Hexo

官方网址: https://hexo.io/zh-cn/

1.首先需要建立博客文件夹，建议建在非系统盘，例如 ~E:/Hexo/，那么这个目录就是我们博客的根目录了。
因为每个人的命名习惯不同，本帖之后会以 [Blogroot] 指代博客根目录。

2.使用 npm 安装 Hexo, 在 [Blogroot] 路径下右键 ->Git Bash Here, 输入

1
2
3
4
5
npm config set registry https://registry.npm.taobao.org
#将npm源替换为阿里的镜像。之后的安装就会迅速很多了。
npm install hexo-cli -g
# hexo-cli 是 hexo的指令集。
hexo -v

3.初始化 Hexo 博客：

1
2
3
4
## 本地创建一个目录用于存放博客
hexo init
hexo generate
hexo server

然后在浏览器中打开 localhost:4000 , 就能看到

hello world

前面的步骤与本地部署一致

部署到 GitHub

注册 github

首先注册 github 账号:github，用户名记着下面需要用

新建仓库

新建 username.github.io 仓库:

注册成功后，在 github 首页单击头像 ->Your repositories
在自己的 GitHub 账号下创建一个新的仓库，命名为 username.github.io（username 是你的用户名)。

配置 Git 与 GitHub:

此处为全局配置，所以可以在任意位置打开git bash, 设置用户名称和邮件地址

1
2
git config --global user.name "haiyong"
git config --global user.email "1836360247@qq.com"

本地获取公钥

首先查看本机的公钥：

  • Linux 系统：~/.ssh
  • Mac 系统：~/.ssh
  • Windows 10 ：C:/Users/ASUS/.ssh

我的电脑是 Windows 10 :

1
cat C:/Users/Administrator/.ssh/id_rsa.pub

将结果复制保存

将 SSH keys 保存到Github

打开 github 点击头像 ->settings, 在设置页面找到 SSH and GPG keys，单击 New SSH key 新建 SSH KEY。

保存 SSH keys

测试 sshkey 是否添加成功

在 git bash 测试 sshkey 是否添加成功，输入

1
ssh -T git@github.com

第一次连接测试需要输入 yes，正常输出是：

1
2
3
4
5
6
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
# 此处请输入yes
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

配置 hexo 部署插件

确保你安装了 hexo-deployer-git, 如果没有，在 [Blogroot] 路径下右键 ->Git Bash Here，输入：

1
npm install hexo-deployer-git --save

修改 deploy 配置项

打开 [Blogroot]/_config.yml, 修改底部的 deploy 配置项

1
2
3
4
deploy:
  type: git
  repository: git@github.com:cndadi/cndadi.github.io.git  #你的仓库地址
  branch: main

若以上内容已经准确配置，把本地 hexo 博客内容提交到 git 仓库

1
2
3
hexo clean
hexo generate
hexo deploy

不出意外，就可以在浏览器上输入 https://username.github.io 访问你的博客了。

这是我的：cndadi.github.io

最近买了个阿里云服务器，结合之前 Hexo 部署到 Github Pages 的经验，尝试将 Hexo 部署到了阿里云上。

搭建过程

本次个人博客大致的搭建步骤如下：

  • 购买阿里云服务器
  • 配置阿里云服务器
  • 服务端安装 Nodejs
  • 服务端安装 Git
  • 服务端安装 Nginx
  • 客户端安装 Hexo
  • 客户端配置免密登录
  • 服务端创建 Git 仓库
  • Hexo 主题配置

购买阿里云服务器

这个比较简单，会花钱就行，尽量找一个新注册的账号，这样可以花几十 money 就可以购买一年的阿里云服务器，例如：

嗯没错，就是很香，购买完之后简单配置一下就可以使用了，本文基于 CentOS7.9 系统搭建，所以大家要继续下去的话也只能选择 CentOS7.9 咯。

配置阿里云服务器

阿里云服务器的配置很简单，主要有：

  • 重置实例密码
  • 配置安全组策略

配置的步骤都很简单，基本就是几分钟的事。

重置实例密码：

配置安全组策略：

配置好之后，复制一下公网IP，就可以开始建站了。

服务端安装 Nodejs

在本地客户端使用 ssh 连接阿里云服务器公网IP：

1
ssh root@公网IP

一键式安装配置 Nodejs：

1
2
3
4
5
6
7
8
9
cd /tmp && wget https://nodejs.org/dist/v17.5.0/node-v17.5.0-linux-x64.tar.xz
tar xf node-v17.5.0-linux-x64.tar.xz
mv node-v17.5.0-linux-x64 /usr/local/node
ln -s /usr/local/node/bin/node /bin/node
ln -s /usr/local/node/bin/npm /bin/npm
echo 'export PATH=/usr/local/node/bin:$PATH' >> /etc/profile
source /etc/profile
node -v
npm -v

执行完就安装成功了。

　服务端安装 Git

一键式安装 Git：

1
2
3
4
5
6
7
8
9
10
yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker
cd /tmp && wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar xf git-2.9.5.tar.gz
cd git-2.9.5 && make all prefix=/usr/local/git
make install prefix=/usr/local/git
echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc
source /etc/bashrc
git version
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"

执行完就安装成功了，要注意的是客户端也需要安装一下 Git，图形化一直下一步就行。

　服务端安装 Nginx

一键式安装 Nginx：

1
2
3
4
5
yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
cd /tmp && wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar xf nginx-1.9.9.tar.gz
cd nginx-1.9.9 && ./configure
make && make install

配置 Nginx 服务：

1
2
3
4
5
6
7
8
9
10
## 创建 hexo 博客存放位置
mkdir /data/blog
## 修改 Nginx 配置文件
vi /usr/local/nginx/conf/nginx.conf

## 修改配置文件中以下几点
## 1、server_name，修改域名或ip
server_name  服务器公网IP;
## 2、root index.html，修改为 hexo 博客存放的位置
root /data/blog

打开 Nginx 服务：

1
2
3
cd /usr/local/nginx/sbin
# 启动 nginx
./nginx

至此 Nginx 也安装完成。

客户端安装 Hexo

Hexo 也是一键式安装，安装前，设置一下 npm 源：

1
2
3
4
npm config set registry https://registry.npm.taobao.org
## 安装 hexo
npm install -g hexo-cli
hexo -v

本地客户端创建 Hexo 博客目录并初始化启动博客：

本地创建一个目录用于存放博客

1
2
3
hexo init
hexo g
hexo s

启动之后本地浏览器 localhost:4000 访问一下是否成功。

配置免密登录

配置本地客户端与阿里云服务器端的 ssh 免密登录，方便上传仓库时一键式上传。

在本地客户端生成并上传公共密钥：

1
2
3
4
5
6
## 执行完之后一直回车就行
ssh-keygen
## 上传公共密钥到阿里云服务器
ssh-copy-id root@阿里云公网IP
## 测试是否已免密
ssh root@阿里云公网IP

如果无需密码即可登录，说明已经配置完成。

服务端创建 Git 仓库

服务器上创建一个 Git 仓库，该仓库中新建一个 post-receive 钩子文件。

1
2
3
4
5
6
7
8
cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive
## 填写以下内容，其中的--work-tree 为 hexo 博客目录
git --work-tree=/data/blog --git-dir=/root/hexo.git checkout -f
## 授予钩子文件可执行权限
chmod +x ~/hexo.git/hooks/post-receive
chmod -R 777 /data/blog

至此，Git 仓库创建并配置完成，对应的本地客户端也需要配置一下！

在本地计算机 hexo 的工程目录下，找到 _config.yml，对 deploy 参数进行修改，如下图所示

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: root@公网IP:/root/hexo.git
  branch: master

在本地计算机安装插件: hexo-deployer-git 和 hexo-server，插件的作用分别是使用Git自动部署，和hexo本地简单的服务器：

1
2
3
4
5
6
7
8
9
npm install hexo-deployer-git --save
npm install hexo-server
## 配置全局变量
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"
## 生成发布 Hexo 博客
hexo clean
hexo generate
hexo deploy

此时，便可以通过浏览器访问 http://阿里云公网IP 进入 hexo 我的博客主页了。

＞通过以上3种方式部署 Hexo 博客之后，就拥有了一个最简单的个人博客网站了，下面讲讲博客的简单初始化。

Hexo 基础修改

修改网站关键信息

Hexo 初始化后，博客网站有一些关键信息是默认的，需要修改为我们自己的信息。

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的站点配置文件 _config.yml：

1
2
3
4
5
6
7
8
# Site
title: 海拥
subtitle: '一枚乐于分享技术与快乐的博主'
description: ''
keywords:
author: haiyong
language: zh-CN
timezone: ''

导航菜单

修改主题配置文件 _config.butterfly.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
menu:
  首页: https://haiyong.site/ || fas fas fa-home
  资源合集|| fas fa-tags: 
    免费资源: https://code.haiyong.site/ziyuan/free/ || fas fa-tools
    网站模板: https://code.haiyong.site/moban/ || fas fa-gamepad
    游戏源码: https://code.haiyong.site/ziyuan/game/ || fas fa-anchor
    编程资料: https://code.haiyong.site/program/ || fas fa-tools
    ppt模板: https://code.haiyong.site/ziyuan/ppt/ || fas fa-gamepad
    PC软件: https://code.haiyong.site/ziyuan/pc/ || fas fa-anchor
  导航||fas fa-list:
    源码资源库: https://code.haiyong.site/ || fas fa-tags
    学习资料: https://haiyong.site/doc/ || fas fa-folder-open
    时间线: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
  摸鱼||fas fa-fish:
    游戏: /moyu/ || fas fa-gamepad
    工具: /tools/ || fas fa-tools
    动画: /demo/ || fas fa-anchor
  摸鱼大军: /chat/ || fas fa-place-of-worship
  友人帐: /link/ || fas fa-link
  关于我: /about/ || fas fa-heart

博客关键页面生成

博客有一些关键页面需要手动生成。

标签页

进入 Hexo 博客的根目录，执行：

1
hexo new page tags

打开 source/tags/index.md 文件，修改如下：

1
2
3
4
5
---
title: 标签
date: 2022-03-11 12:53:45
type: "tags"
---

分类页

进入 Hexo 博客的根目录，执行：

1
hexo new page categories

打开 source/categories/index.md 文件，修改如下：

1
2
3
4
5
---
title: 分类
date: 2022-03-11 12:56:06
type: "categories"
---

友情链接

创建友情链接页面

进入 Hexo 博客的根目录，执行：

1
hexo new page link

打开 source/link/index.md 文件，修改如下：

1
2
3
4
5
---
title: 友情链接
date: 2022-03-11 12:57:48
type: "link"
---

友情链接添加

在Hexo博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- class_name: 本站
  class_desc: 交换友链可在下方评论，或者微信/QQ联系我
  link_list:
    - name: 海拥
      link: https://haiyong.site
      avatar: https://haiyong.site/img/favicon.png
      descr: 一个乐于分享技术与快乐的博主

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 三笠ぃ
      link: https://luciferlpc.top/
      avatar: https://luciferlpc.top/img/avatar.jpg
      descr: 好好吃饭🍣 好好睡觉💤 敲敲代码
    - name: iMaeGoo’s Blog
      link: https://www.imaegoo.com
      avatar: https://www.imaegoo.com/images/avatar.jpg
      descr: 虹墨空间站

关于我

进入 Hexo 博客的根目录，执行：

1
hexo new page about

打开 source/about-me/index.md 文件，修改如下：
1
2
3
4
5
---
title: 关于作者
date: 2022-03-11 13:01:21
type: "about"
---

至此，简单的 Hexo 博客框架就完成搭建了，至于更多的美化可以参考：

Butterfly 主题美化合集

https://haiyong.site/post/22e1d5da.html