Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)

遇见0和1

已于 2022-01-19 19:43:04 修改

阅读量1.6w

点赞数 64

分类专栏：项目实战篇文章标签： git Hexo nodejs

于 2020-08-02 20:30:53 首次发布

本文链接：https://blog.csdn.net/weixin_42365530/article/details/107750003

版权

项目实战篇专栏收录该内容

9 篇文章 3 订阅

订阅专栏

在这里插入图片描述

Hexo + Gitee 部署自己的个人博客

目前市场上比较火的一些博客框架： Hexo、jekyll、Solo、Halo 、gohugo、VuePress、wordpress 等等，这些都是开源的静态博客框架（没有登录注册，后台管理等等）好处就是能够非常快速的搭建好自己的个人博客（也是要一定前端知识的），也是因为我之前的blog网站实在没票子继续维护服务器了~~

我这里就使用 Hexo 框架搭建了，因为 Hexo 要求的环境我电脑都装有，网上关于Hexo的生态也比较丰富完善。可以看 B站羊哥（CodeSheep） 的视频就有介绍，我没有写详细的地方，百度一下资料也多得不得了

先看下我爆肝3天的结果吧（一天根据官方文档查资料搭建好，两天魔改页面和解决图床问题）：地址：http://vogos.cn/

Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)

前期准备

项目最终是部署到码云上，不需要自己再购买服务器，这里也可以部署到 github，但是我们大天国有一堵墙，用 github 那速度着实让人着急！

1、安装 Node.js 环境： 因为 Hexo 是基于Node.js 的博客框架，就像 Java 要依赖 JDK 环境一样。

node下载地址：http://nodejs.cn/download/ ，傻瓜式安装，这里不再详述

NodeJS环境安装重点拓展：

# 确认node.js安装成功：运行下面两个命令打印版本号即可
node -v
npm  -v

# 安装 Node.js 淘宝镜像加速器 （cnpm）
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 修改 node 类库默认安装位置
# 默认是在 C:\Users\lingStudy\AppData\Roaming\npm

npm config set prefix "D:\nodejs安装路径\node_global"
npm config set cache "D:\nodejs安装路径\node_cache"
# 查看修改是否成功
npm root -g
# 然后把D:\install\node\node_global配置到环境变量的 PATH 下即可

2、安装版本控制工具 Git ： 用来将本地项目托管到码云，所以还需要自己注册一个码云的账号

下载地址：https://git-scm.com/download 学程序的，在工作中 Git 是必知必会的，还没学的建议去看看，所以这里不再详细介绍 Git

# Git一些重要配置
git config --global user.name "lxxxxdy"  #码云用户名
git config --global user.email "xxx83@qq.com"   #邮箱

# 生成SSH公钥并添加到码云，实现免密码登录
# 1、生成公钥
ssh-keygen -t rsa
# 2、进入 C:\Users\主机名\.ssh 目录，把 id_rsa.pub 里面的信息复制到码云的 SSH公钥 中即可

Hexo 官网： https://hexo.io/zh-cn/
在这里插入图片描述

Hexo安装

# 全局安装
npm install hexo-cli -g
# 查看hexo版本
hexo -v

在这里插入图片描述

创建本地博客站点

# 初始化一个项目，hexoblog 是项目名
hexo init  hexoblog

在这里插入图片描述

# 1、进入hexoblog项目目录
cd hexoblog
#/2、安装 hexoblog 项目的依赖包
npm install
#/3、启动 hexoblog 项目服务
hexo server

在这里插入图片描述
此时，访问 http://localhost:4000/ 即可看到 hexo 默认的页面和一篇“Hello World”默认生成的文章

至此，Hexo 项目搭建成功！

项目主要文件目录介绍：

.
├── .deploy       # 需要部署的文件
├── node_modules  # 项目所有的依赖包和插件
├── public        # 生成的静态网页文件
├── scaffolds     # 文章模板
├── source        # 博客正文和其他源文件等都应该放在这里
|   ├── _drafts   # 草稿
|   └── _posts    # 文章
├── themes        # 主题
├── _config.yml   # 全局配置文件
└── package.json  # 项目依赖信息

新建一篇blog文章

# 新建一篇名为 第一篇Hexo blog文章 的文章
hexo new "第一篇Hexo blog文章"

在这里插入图片描述
之后，就可以直接编辑刚刚新建的文章，再次启动服务查看效果，如下，这里有一个问题，Hexo框架文章中的图片只支持外链的形式，有很多方法解决，比如，可以在码云或者七牛云部署一个自己的图床。
在这里插入图片描述

将项目部署到码云

1、在码云新建一个仓库，注意标红的地方，这里我的码云用户名为 lingstudy
在这里插入图片描述
2、在项目根目录下安装git部署插件

# 之后就可以使用 hexo deploy（或简写 hexo d）将项目部署到gitee远程仓库
npm install hexo-deployer-git --save

在这里插入图片描述
3、修改项目配置文件：_config.yml，在最下面，修改如下内容

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 仓库URL地址
  branch: master

在这里插入图片描述
4、使用命令 hexo d 将项目部署到 gitee 远程仓库，此时本地文件夹中出现有一个public文件夹。

5、开启 Gitee Pages 静态网页托管服务

之后使用提供的网址即可访问博客，每次重新上传代码到gitee时，都需要点击下图的更新按钮重启page服务
在这里插入图片描述
访问生成的网址 https://lingstudy.gitee.io/ ，部署成功！

修改主题

官网主题：https://hexo.io/themes/

可以去官网找自己喜欢的主题，下载下来，我这里就随便拿一个来演示了

1、进入所下载主题根目录下的 theme 目录，将里面的文件复制到自己项目的 theme 目录下
在这里插入图片描述
2、修改根目录下的配置文件 _config.yml

3、启动项目，访问：http://localhost:4000/ 先在本地查看主题是否修改成功

4、将修改后的项目部署到远程仓库

# 生成静态网站文件
hexo g  
# 上传到远程仓库
hexo d  

# 1、清除 hexo 的缓存
hexo clean
# 2、采用一键部署
hexo g --d

在这里插入图片描述
5、访问 https://lingstudy.gitee.io/ 主题样式修改并部署成功！

（这里若出现样式错乱，可能是浏览器缓存问题，执行 Ctrl + F5 强制刷新一下即可）
在这里插入图片描述
至此，Hexo + Gitee 部署自己的个人博客完成！

拓展：快速编写文章

新建文章时每次都要执行 hexo new “blogName” 命令很麻烦

可以直接到根目录 /source/_posts 目录下，创建一个.md 文件进行编写，在文件的顶部添加下面内容就可以了，主要写一个 title 就好了，其他都可以省略

---
title: 文章名称
date: 2020-07-30 16:46:07(创建时间)
tags: 标签名
categories: 分类
description: 描述
comments: 是否开启评论(true or false)
---

之后，使用 hexo g --d 命令推送到 gitee上，并在 gitee 上更新一下 Gitee Pages 服务即可

END

为什么一定要有一个自己的个人博客？我一直认为坚持写优质的blog文章，是提升和巩固自身能力的重要方法之一！
我的现在这个效果，是花了大量时间去修改和配置了的，其实搭这种blog对提升技术不会有太大帮助，因为用的是已经写好的框架(模板)，可我就是用不爽默认的样式虽然不是走前端的。最后，搭建好了欢迎到留言区互留友链~

在这里插入图片描述