Hexo+GitHub Pages+服务器搭建个人网站

1. 准备工作

1.1 GitHub账号

注册GitHub账号
GitHub官网：https://github.com/

1.2 安装Git

下载地址：https://git-scm.com/downloads
安装方式：双击安装包，一直点next

安装完成后，鼠标右键任意位置，在右键菜单中选择Git Bash Here，弹出Git命令行，在命令行配置Git用户名和邮箱地址，以便区分不同提交者的身份。（注意：这里设置用户签名和将来登录GitHub的账号没有任何关系）

// 配置Git用户名和邮箱地址
git config --global user.name "用户名"
git config --global user.email "邮箱"
// 查看配置
cat ~/.gitconfig

1.3 安装Node JS

下载地址：https://nodejs.cn/download/
安装方式：双击安装包，一直点next
安装完成后，打开cmd，输入node -v和npm -v，若显示对应版本号，则说明安装成功。

(1) 修改全局模块路径和缓存路径

输入npm -root -g查看默认路径，默认路径在C:\Users\用户名\AppData\Roaming\npm\node_modules。

TIP：此文件夹默认是隐藏的，需要设置显示隐藏的文件夹才能查看

(2) 在nodejs安装目录中新建node_cache和node_global文件夹

(3) 修改全局模块路径和缓存路径为新建的这两个文件夹

1 2	`npm config set prefix "创建的node_global文件夹所在路径" npm config set cache "创建的node_cache文件夹所在路径"`

(4) 修改完成后，配置环境变量，右键此电脑->属性->高级系统设置->环境变量

在用户环境变量Path中添加node_global的路径
在系统变量中，新建变量名NODE_PATH，变量值为node_global的node_modules文件夹路径。

2. 安装Hexo

(1) 运行Git Bash并切换淘宝镜像（提高下载速度）

// 全局切换命令
npm config set registry http://registry.npm.taobao.org/
// 查看版本命令
npm get registry
// 切回官方镜像
npm config set registry http://www.npmjs.org

(2) 安装Hexo

1	`npm install hexo-cli -g`

npm install 报错：

$ npm install hexo-cli -g
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path D:\DevelopTools\nodejs\node_global\node_modules
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\DevelopTools\nodejs\node_global\node_modules'

解决方法：找到缓存位置，设置nodejs文件夹权限为完全控制

(3) 创建hexo-blog项目

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

(4) 本地启动

1 2	`hexo g hexo server`

此时，在浏览器输入 http://localhost:4000 就可以访问到hexo的默认页面了

3. 更换主题

1. 按照官方文档安装Fluid主题：Fluid官网

2. 按照官方配置指南完成自己想要的配置：配置指南

4. 创建文章

修改hexo-blog目录下_config.yml，在生成文章的时候生成一个同名的资源目录用于存放图片文件。

1	`post_asset_folder: true`

1. 创建各种页

(1) 关于页：

1	`hexo new page about # 在hexo-blog/source/about目录下生成index.md`

编辑index.md，添加layout: about

---
title: about
date: 2023-11-08 11:51:44
layout: about
---

(2) 分类页：

1	`hexo new page about categories`

添加type: "categories"

1
2
3

title: categories
date: 2023-12-23 18:26:53
type: "categories"

(3) 标签页：

1	`hexo new page about tags`

添加type: "tags"

1
2
3

title: tags
date: 2023-12-23 18:32:39
type: "tags"

2. 创建文章

1	`hexo new post 测试文章 #在hexo-blog/source/_posts目录下生成测试文章.md和同名文件夹`

打开测试文章.md，添加如下内容：

---
title: 测试文章
banner_img: /img/post.png
date: 2023-11-08 12:01:42
categories:
- C++
tags:
- C++
---
![](./测试文章/test.png)
这是一篇测试文章

TIP：banner_img: /img/post.png是自定义的文章顶部背景图片的路径，categories:是类别，tags:是标签。

配置在Hexo博客和Markdown编辑器中正确显示图片：

首先，根据Hexo官方文档，在_config.yaml将post_asset_folder选项设为true 。然后，安装插件hexo-image-link，安装命令为：

npm install hexo-image-link --save

如果安装了 hexo-asset-img 插件，需要将其卸载：

$ npm uninstall --save hexo-asset-img

配置向Typora文档粘贴图片时自动保存图片到同名文件夹：

TIP

粘贴后不要缩放图片，会导致路径不可用，必须保证图片的路径格式为![]()

如果希望图片居中显示，可以卸载 hexo-image-link

5. 将hexo推送到GitHub Pages

1. 在GitHub上创建仓库

可参考这篇博客的配置GitHubPages部分，注意仓库名必须为你的用户名.github.io

2. Github配置ssh key

原理：本地生成一个公私钥对，将公钥放到远程主机，当本地主机需要登录远程主机时，远程主机用公钥对对一个随机字符串加密，并将结果发回本地主机。本地主机用私钥解密，将内容发回到远程主机，远程主机对比传回的字符串与生成的字符串，如果相同则认证成功。（公钥可以理解为锁，私钥是钥匙）

(1) 打开git bash，生成ssh key

1 2	`ssh-keygen -t rsa // 生成公钥 cat ~/.ssh/id_rsa.pub // 复制公钥`

(2) Github账号上添加公钥

点击settings->SSH and GPG kyes->new ssh key，将刚刚生成的公钥粘贴进去

(3) 验证设置是否成功

1	`ssh -T git@github.com`

3. 将本地博客部署到GitHub Pages

打开hexo-blog/_config.yml，在deployment配置项下设置：

deploy:
    type: git
    repo: 此处复制仓库的SSH地址，如下图
    branch: master

git bash输入hexo d

浏览器访问https://zhcano.github.io/，显示页面则部署成功。

6. 配置域名

1. 购买域名和服务器

(1) 在腾讯云/阿里云（下面以腾讯云为例）购买一个轻量级服务器，最便宜的大概200+

(2) 在腾讯云购买一个域名，最便宜的大概10元左右

2. 国内网站需要ICP域名备案

参考链接：域名备案流程（个人备案，腾讯云 / 阿里云）

大概流程是：提交备案材料->腾讯云审核->管局审核->公安备案

TIP：必须先备案再域名解析，否则腾讯云会打电话通知删除域名解析。

3. 域名解析

参考链接：云解析 DNS 快速添加域名解析-快速入门-文档中心-腾讯云 (tencent.com)

7. 将hexo推送到云服务器

1. xshell远程连接服务器

2. 安装git和nginx

1 2	`apt-get install nginx apt-get install git`

3. 添加git用户

1
2
3

adduser git   #添加git用户
chmod 740 /etc/sudoers   #改变sudoers文件的权限为文件所有者可写
vim /etc/sudoers

找到root ALL=(ALL) ALL，在它下方加入一行

1	`git ALL=(ALL) ALL`

1 2	`chmod 400 /etc/sudoers #将其权限修改为文件所有者可读 sudo passwd git #设置git用户的密码`

4. 给git用户添加ssh密钥

使用五、将本地博客部署到GitHub Pages中生成的密钥

su git #切换到git用户
mkdir ~/.ssh  #创建.ssh文件夹
touch ~/.ssh/authorized_keys  #创建authorized_keys文件
chmod 600 ~/.ssh/authorized_keys  #为authorized_keys文件赋予文件所有者可读可写的权限
chmod 700 ~/.ssh  #为.ssh文件夹赋予文件夹所有者可读可写可执行的权限
vim ~/.ssh/authorized_keys #将ssh密钥粘贴进去

测试在Git Bash中使用ssh git@你的服务器地址连接服务器是否成功。

5. 创建git仓库并使用git-hooks实现自动部署

sudo mkdir /var/repo # 新建git仓库位置
sudo mkdir /var/hexo # 新建静态资源的目录
cd /var/repo
sudo git init --bare blog.git # 创建一个名叫blog的仓库
sudo vim /var/repo/blog.git/hooks/post-update # 配置hooks实现自动部署

添加：

1 2	`#!/bin/bash git --work-tree=/var/hexo --git-dir=/var/repo/blog.git checkout -`

增加权限：

cd blog.git/hooks/
sudo chown -R git:git /var/repo/      
sudo chown -R git:git /var/hexo         
sudo chmod +x post-update

6. 配置nginx

// 查找 nginx 配置文件的路径
sudo nginx -t
输出：nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
cd /etc/nginx/
mkdir vhost
cd vhost
sudo vim blog.conf

添加内容：

server{
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/hexo;
        server_name 域名; 
        location /{
        }
}

1	`sudo vim /etc/nginx/nginx.conf`

在http模块下添加：

1	`include /etc/nginx/vhost/*.conf;`

TIP：这里设置的80端口和nginx默认页面的80端口冲突，可以将nginx默认页面的80端口注释掉。

1 2	`cd /etc/nginx/sites-available sudo vim default`

server {
        # listen 80 default_server;
        # listen [::]:80 default_server;
        ...

重新加载Nginx：

1	`sudo systemctl reload nginx`

7. 给git用户设置权限

避免git用户通过ssh git@ip登录，也不能通过su git切换到git用户。

1
2
3

$ sudo vim /etc/passwd
// 修改最后一行
// 将/bin/bash修改为/usr/bin/git-shell

8. 本地hexo设置

#vim config.yml
deploy:
  - type: git
    repo: github仓库的SSH地址
    branch: main

  - type: git
    repo: git@你的ip:/var/repo/blog.git
    branch: master

hexo d 将本地博客推送至服务器和github，此时输入域名和输入github.io地址都能访问到自己博客了。

参考文章

工具使用

#Hexo

Hexo+GitHub Pages+服务器搭建个人网站

http://zhcan.online/博客搭建/

作者

ZHCANO

发布于

2023年12月25日

许可协议

LeanCloud+Hexo开启评论和文章阅读量上一篇

Git和Github的使用下一篇