搭建个人博客（HEXO)

Shuelv

于 2024-04-05 19:28:21 发布

阅读量1.4k

点赞数 39

文章标签： vscode

本文链接：https://blog.csdn.net/2301_81090045/article/details/137407154

版权

本文详细介绍了如何使用Hexo框架和butterfly主题搭建个人博客，包括环境配置、Git操作、Hexo的安装与初始化、主题切换、部署到GitHub以及服务器和域名的购买和配置过程。

摘要由CSDN通过智能技术生成

博客声明

该博客使用Hexo框架和butterfly主题，在这里对两位开源大佬表示感谢
该博客会不定时更新美化
参考文献主要为Hexo官方文档和Butterfly主题教程
辅助参考文献为CSDN上诸位大佬的博文（因为较多就不挂链接）(不能保证他们是第一作者)

所需准备

电脑一台
计算机基础知识
至少70一年（用于购买服务器，域名，以及后续美化的核心——图床的核心——对象存储）(当然不用也可以，效果会差很多)
魔法（搭建会用到墙外网站）
年满18或监护人陪同（涉及到服务器，域名的注册以及后续的备案）
了解Markdown语法，用于博客的写作

开发环境

vscode

(若安装失败，尝试用管理员身份运行安装包)
1. Git (需要魔法)

Git

配置环境变量

点击编辑账户的环境变量

双击环境变量中的Path后新建，把Git安装包中cmd的安装目录粘贴进去，一直点确定

node.js

node.js

完成后是没有图标的，无需在意

环境配置
1. 打开安装目录并新建 node_global node_cache 两个文件夹
  - 打开cmd输入npm config set prefix"你node_global文件的位置”
```
npm config set prefix "D:\node.js\node_global"
```
  - 打开cmd输入npm config set prefix“你node_cache文件的位置
```
npm config set prefix"D:\node.js\node_cache"
```
  2. 设置环境变量
  - 点击编辑账户的环境变量
    
    双击环境变量中的Path后新建，把Git安装包中cmd的安装目录粘贴进去，一直点确定

Hexo

打开安装好的git bash输入以下命令安装

$ npm install -g hexo-cli

完成后关闭

粗略制作

在c盘以外创建文件夹并更名

如hexo-shue-blog，并记住路径

在该文件下打开Git bash here,并输入以下命令，回车

hexo init

这样就成功了，失败的话多试几次，这一堆文件夹的作用如下

public 最终所见网页的所有内容
node_modules 插件及hexo所需的node.js模块
_config.yml 站点配置文件，设置一些公开信息
package.json 应用程序信息，配置hexo运行所需要的js包
scaffolds 模板文件夹，新建文章会默认包含对应模板内容
themes 存放主题文件，hexo根据主题生成速度很快的静态网页
source 用于存放用户资源（除past文件夹，其余命名方式为“+ 文件夹”的文件被忽略

在Vscode中打开你blog所在的文件夹

打开后如图

打开终端输入以下命令并回车

hexo s

点击第二个链接，一个简单的本地网页就制作成功了

在Terminal处同时按Ctrl和 c停止预览

网页配置

打开vscode并打开博客文件输入命令

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly

等待安装完成

将hexo-theme-butterfly粘贴到themes目录下

重新输入

npm install hexo-renderer-pug hexo-renderer-stylus --save

hexo修改配置文件

找到——config.yml文件，修改主题为hexo-theme-butterfly

本地预览

hexo clean  //执行此命令后继续下一条

hexo g  //生成博客目录

hexo s  //本地预览

创建仓库

打开 GitHub并创建仓库(初次需要注册账号且该网站需要使用魔法)

2.仓库名称为你的名称.github.io 并勾选公开

配置密钥

配置用户名和邮箱

git config --global user.name "xxx"

git config --globasl user.email "邮箱"

ssh-keygen -t rsa -C "邮箱"

进入所在文件目录

用记事本打开第二个并复制
粘贴并创建

输入命令验证

ssh -T git@github.com

输入 yes后若如下图则成功

部署网站

链接到远程，添加仓库地址

后三行改成图中样式，倒数第二行是你的仓库地址

在网站本地根目录打开 git bash here 并依次执行以下命令

npm install hexo-deployer-git --save
hexo clean

hexo g

hexo s

hexo d

购买配置

云服务器：购买个最便宜的就可以了，阿里等也可以

购买域名：建议和服务器在一个公司购买，根据后缀和长短的不同，价钱也不同

DSN解析

添加域名

在腾讯云控制台添加两次解析记录

远程连接

下载PUTTY

输入 root
输入密码（输的时候密码不可见）
输入
```
 yum install git
```
输入

adduser git

chmod 740 /etc/sudoers

vim /etc/sudoers

点击 i 键，找到彩色代码，在下面添加

git   All=(ALL)      ALL

按住Esc键并输入 :wq
输入

chmod 400 /etc/sudoers
sudo passwd git
输入两次密码（不显示）

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys

将本地.ssh公钥粘贴进去
按住ESC 并输入 :wq

输入

  chmod 600 /home/git/.ssh/authorized_keys
  chmod 700 /home/git/.ssh

本地git bash here中输入

ssh -v git@服务器公网IP

输入密码

sudo su root

cd /home/git

git init --bare blog.git

chown git:git -R blog.git

cd blog.git/hooks

vim post-receive

#!/bin/bash

git --work-tree=/home/hexo --git-dir=/home/git/blog.git checkout -f

完成配置

服务器

sudo su root

mkdir /www/repo

chown -R git:git /www/repo

chmod -R 755 /www/repo

mkdir /www/hexo

chown -R git:git /www/hexo

chmod -R 755 /www/hexo

cd /www/repo

git init --bare hexo.git

vim /www/repo/hexo.git/hooks/post-recive

按 i 输入以下代码

chown -r git:git /www/repo/hexo.git/hooks/post-receive

chmod +x /www/repo/hexo.git/hooks/post-receive

在服务器上安装宝塔面板

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

输入y继续，等到账号密码生成，记住

放行8888端口

在浏览器上打开外网访问地址，登录

进入宝塔里的软件商店，将LNMP一键安装

创建站点

配置修改

将倒数第二行进行修改

打开putty工具，连接后

chown -R git:git /www/repo/

chown -R git:git /www/hexo/

本地根目录打开 git bash here执行

hexo clean

hexo d -g

备案后续

将下面代码粘贴在footer,建议在户籍地备案，否则可能需要提供暂住证

<img src="https://haiyong.site/img/icp.png"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=41120202000337" rel="noreferrer" target="_blank">你的备案号</a>