hexo搭建一个自己的博客

hexo/docker+腾讯云服务器搭建一个自己的博客
我的博客: http://www.elcarimqaq.top/， 欢迎访问！

前期准备

node.js： https://nodejs.org/en/

git：https://git-scm.com/download/win

hexo官方文档：https://hexo.io/zh-cn/docs/index.html

安装hexo

npm install -g hexo-cli
# 由于我懒得添加环境变量，所以hexo命令前要加npx才能成功，npx hexo ，将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo 
npx hexo -v #验证是否安装成功
1
2
3

在你想要存放博客的文件夹下初始化文件夹，例如我的为 E:\workspace

npx hexo s #npm hexo init blog #初始化blog文件夹,bolg可替换为你的自定义名字
cd blog
npx install #安装必备的组件
npx hexo g #生成静态网页
npx hexo s #npm hexo s
1
2
3
4
5

这样本地的网站配置就弄好啦，然后浏览器打开http://localhost:4000/， 就可以看到我们的博客。

如果hexo s 启动服务后 打开localhost:4000 无响应：

用 管理员身份 打开命令窗口输入一下命令netstat -o -n -a | findstr :4000，发现4000端口已经有服务在使用了，通过taskkill /F /PID XXXX，

结束掉占用了这个端口号的进程。

当然也可以选择换一个端口号hexo s -p 4001 ，一般就不会有端口号冲突了

Docker

linux 系统下也可以选择Docekr免去安装环节

docker pull spurin/hexo

https://hub.docker.com/r/spurin/hexo

创建容器：

docker create --name=hexo-domain.com \
-e HEXO_SERVER_PORT=4000 \
-e GIT_USER="Your Name" \
-e GIT_EMAIL="your.email@domain.tld" \
-v /blog/domain.com:/app \
-p 4000:4000 \
spurin/hexo

eg：
docker create --name=hexo-blog \
-e HEXO_SERVER_PORT=4000 \
-e GIT_USER="ElcarimQAQ" \
-e GIT_EMAIL="xxxxxx@qq.com" \
-v $(pwd):/app \
-p 4000:4000 \
spurin/hexo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这是一个使用docker create命令创建Docker容器的示例命令，并设置了一些参数和选项。下面对该命令中的每个部分进行解释：

• --name=hexo-domain.com：通过--name选项指定了容器的名称为hexo-domain.com。容器名称用于唯一标识容器实例。
• -e HEXO_SERVER_PORT=4000：通过-e选项设置了环境变量HEXO_SERVER_PORT的值为4000。这将在容器内部设置一个名为HEXO_SERVER_PORT的环境变量，并将其值设置为4000。这个环境变量可能在容器内的应用程序中使用。
• -e GIT_USER="Your Name"：通过-e选项设置了环境变量GIT_USER的值为Your Name。这将在容器内部设置一个名为GIT_USER的环境变量，并将其值设置为Your Name。这个环境变量可能在容器内的应用程序中使用。
• -e GIT_EMAIL="your.email@domain.tld"：通过-e选项设置了环境变量GIT_EMAIL的值为your.email@domain.tld。这将在容器内部设置一个名为GIT_EMAIL的环境变量，并将其值设置为your.email@domain.tld。这个环境变量可能在容器内的应用程序中使用。
• -v /blog/domain.com:/app：通过-v选项将主机上的目录/blog/domain.com挂载到容器内的/app目录。这意味着主机上的/blog/domain.com目录中的文件将在容器内的/app目录中可见和可访问。
• -p 4000:4000：通过-p选项将主机的端口4000映射到容器的端口4000。这样，可以通过主机的4000端口访问容器内运行的应用程序。
• spurin/hexo：这是所使用的Docker镜像的名称。在这个例子中，使用了名为spurin/hexo的镜像来创建容器。

Docker，启动！！！！：

docker start hexo-blog
1

可以看到启动后的docker里面有了个linux一样的目录，app目录下把本地的文件夹挂载进了容器里面。

可以通过docker正常使用hexo了。

进入

docker exec -it hexo-blog bash
1

生成

docker exec -it hexo-blog hexo g 
1

• docker exec：这是Docker命令的一部分，用于在运行中的容器内部执行命令。
• -it：这是docker exec命令的选项之一，用于以交互模式运行命令并分配一个伪终端（pseudo-TTY）。这使得在容器内部执行命令时可以进行交互式的输入和输出。
• hexo-blog：这是容器的名称或容器ID。通过指定容器名称或ID，docker exec命令可以确定要在哪个容器内部执行命令。
• hexo g：这是要在容器内部执行的命令。在这个例子中，hexo g是一个命令行命令，它将在容器内部运行Hexo命令行工具的generate命令（简写为g）。这个命令用于生成静态网站内容。

部署

docker exec -it hexo-blog hexo d
1

常用hexo命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

部署到GitHub

关于github在电脑上的配置这里不赘述，这里是将 Hexo 博客部署到 GitHub Pages 上。

新建一个 repository。如果你希望你的站点能通过域名 <你的 GitHub 用户名>.github.io 访问，你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io。

hexo有一键部署，首先安装npm install hexo-deployer-git --save,https://github.com/hexojs/hexo-deployer-git

找到根目录下的_config.yml,找到Deployment，修改为

deploy:
  type: git
  repo:   #https://github.com/ElcarimQAQ/elcarimqaq.github.io
  branch: [branch]
  message: [message]
1
2
3
4
5

npx hexo deploy
1

博客已经成功部署到 GitHub Pages 上面，这时候我们访问一下 GitHub Repository 同名的链接，这时候我们就可以看到跟本地一模一样的博客内容了。

这些内容实际上是博客文件夹下面的 public 文件夹下的所有内容，Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

部署到云服务器

我这里使用的是腾讯云服务器

操作系统：Debian 11.1

前置：首先要在云服务器上创建一个你自己的用户，并配置好ssh

创建博客的目录，并给你的用户添加权限

su root
mkdir /home/blog
chown ylb -R /home/blog  #给你的用户添加权限
1
2
3

安装配置nginx

Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。

apt-get install nginx
systemctl start nginx.service #启动nginx服务器
1
2

访问你的主机ip地址 看一下是否安装成功

修改配置

#配置目录sites-available
cd /etc/nginx/sites-available/
cp default elcarimqaq.top  #建议命名为你的域名
vim elcarimqaq.top 

#修改配置
server {
    listen 80;
    listen [::]:80;
    server_name elcarimqaq.top;
    root /home/blog;
}

#配置目录sites-enabled
ln -s /etc/nginx/sites-available/elcarimqaq.top /etc/nginx/sites-enabled/elcarimqaq.top #软连接

#取消default，否则配置会冲突
unlink default  
 
#进行检查，配置是否正确
nginx -t

#重启服务器
systemctl restart nginx.service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

创建 git 仓库，用于存放博客网站资源。

回到当前用户的home目录

 #创建裸仓库
 git init --bare blog.git 
 
 #使用hook同步网站根目录
 cd blog.git/hooks
 vim  post-receive
 
 #修改文件
#!/bin/sh
git --work-tree=/home/blog--git-dir=/home/ylb/blog.git checkout -f

#修改权限
chmod +x post-receive 
1
2
3
4
5
6
7
8
9
10
11
12
13

为什么不直接将裸仓库克隆到 Web 根目录下呢？

出于项目安全的考虑，避免了将整个仓库历史暴漏在 Web 服务中。

最后更改本地的config的deploy为你的git仓库

deploy:
  type: git
  repo:  ylb@服务器ip:/home/ylb/blog.git  #https://github.com/ElcarimQAQ/elcarimqaq.github.io
  branch: master
  message: 
1
2
3
4
5

更换主题

如果你不喜欢默认的主题，可以对主题进行更换。主题传送门：https://hexo.io/themes/

我使用的主题为butterfly，在blog目录中打开命令行输入：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
1

这是将主题下载到blog目录的themes主题下的文件夹中。打开站点的_config.yml配置文件，修改主题为butterfly：theme: butterfly

主题butterfly

butterfly的官方网站：https://butterfly.js.org/

你可以参考官方的文档进行一些配置的修改，我这里也会记录一些。

文章置顶

hexo-generator-index是官方默认的博客文章排序插件，无需额外安装。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

评论区

butterfly支持多种评论区，我使用的为Valine

Valine官方文档:https://valine.js.org/quickstart.html

首先要注册一个LeanCloud 账号，然后创建一个你的评论应用。修改配置_config.butterfly.yml初始化对象中的appId和appKey的值为你的应用的值即可。

当然别忘了要下载

# Install valine
npm install valine --save
1
2

可以看到效果：

最终效果