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

准备工作

安装必要的软件

Node.js

https://nodejs.org/en/

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • Mac:使用 HomebrewMacPorts 安装。
  • 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
menu:
首页: / || fas fa-home
归档: /archives/ || fas fa-archive
摸鱼||fas fa-fish:
游戏: /moyu/ || fas fa-gamepad
工具: /tools/ || fas fa-tools
蓝桥: /lanqiao/ || fas fa-folder-open
标签: /tags/ || fas fa-tags
# 分类: /categories/ ||
# List||fas fa-list:
# Music: /music/ || fas fa-music
# Movie: /movies/ || fas fa-video
友人帐: /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 博客框架就完成搭建了,至于更多的美化可以参考: