一.准备工作

1.安装git

官网下载页面:Git - Download

下载完成后双击安装包一路点下一步,安装完成后鼠标右键会有 Git Bash Here说明安装成功

在桌面右键打开Git Bash Here 在命令行中输入如下命令,配置Git用户名和邮箱地址                   

git config --global user.name "Your Name"
git config --global user.email "email@example.com"

 2.安装node js

官网下载地址:Nodejs - Download

双击安装包安装,一路点下一步,安装完成后打开cmd

执行命令 node -v 查看node版本  执行 npm -v 查看npm版本

二.安装hexo

hexo是一个快速、简洁且高效的静态博客框架

安装 Hexo

git和node js安装完成后,即可使用 npm 安装 Hexo。

安装 Hexo

npm install -g hexo-cli

查看版本

hexo -v

创建项目 hexo-blog 并初始化

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

hexo g
hexo s

浏览器访问 http://localhost:4000

三.创建文章

修改 Hexo 博客目录中的 _config.yml,在生成文章的时候生成一个同名的资源目录用于存放图片文件。修改项为

post_asset_folder: true

执行创建一篇新文章,名为test

hexo new post test

执行完成后在source\_posts目录下生成了一个md文件和一个同名的资源目录

 可以通过三种方式引用图片

{% asset_img test.png 图片引用方法一 %}    官方引用

![图片引用方法二](test.png)                     markdown

![图片引用方法三](/images/test.png)      将图片放在\source\images目录下

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章开头加入Front-matter用于指定个别文件的变量

 ---
title: 测试
date: 2024-02-05 15:30:22
tags: 在这里输入标签
categories: 在这里输入分类
index_img: /img/test.jpg
---

其他操作请看官方文档 文档 | Hexo

这里不在赘述

提交更改后再次生成静态文件并启动。

$ hexo generate    可简写为  hexo g    生成静态文件

$ hexo server      可简写为hexo s     启动

 generate后可跟后缀

选项

描述

-d--deploy

文件生成后立即部署网站

-w--watch

监视文件变动

-b--bail

生成过程中如果发生任何未处理的异常则抛出异常

-f--force

强制重新生成文件
Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。
使用该参数的效果接近 hexo clean && hexo generate

-c--concurrency

最大同时生成文件的数量,默认无限制

hexo-blog下的public 目录就是生成的静态文件,可以将public 目录中的文件和目录推送到

github或上传到云服务器进行部署

四.部署hexo

1.部署到云服务器

最方便管理和修改的方法是安装一个宝塔面板,在宝塔面板上进行部署

安装宝塔面板的过程就不在叙述,安装完宝塔面板后,选择左侧的网站

在选择PHP项目

点击添加站点

 可输入自己的域名或服务器的地址

然后进入根目录

上传自己public内的文件和目录 

上传完成后就可以通过域名或服务器地址访问,记得要添加解析记录到服务器 

有条件还可以添加ssl证书,实现https访问

2.部署到github

可以参考这篇文章

GitHub部署静态网页-CSDN博客

自己尝试部署的博客

https://tingfeng347.github.io/