hexo部署：创建个人博客并部署到github

最新推荐文章于 2024-07-25 08:35:06 发布

布鸽不鸽xdy

最新推荐文章于 2024-07-25 08:35:06 发布

阅读量382

点赞数 1

分类专栏：搭建个人博客文章标签： github git

本文链接：https://blog.csdn.net/weixin_43790038/article/details/131128504

版权

搭建个人博客专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

本文详细记录使用hexo搭建并部署个人博客的全过程。

原文地址：https://xuedongyun.cn/post/46487/

创建hexo项目

在有node.js环境的情况下，搭建项目

npm install hexo-cli -g
hexo init blog
cd blog
npm install

以开发模式运行，查看博客基本情况

hexo server

至此hexo就已搭建好了，本地4000端口即可访问

部署到GithubPage

先在github上新建立一个名为"用户名.github.io"的公开仓库
需要安装一个hexo上传github的插件

npm install hexo-deployer-git --save

修改hexo配置文件 _config.yml指定仓库

deploy:
  type: git
  repo: https://github.com/pigeon-dove/pigeon-dove.github.io.git
  branch: master

现在你可以很方便的将项目部署到github了，以下是几个常用命令

hexo deploy		# hexo d，部署
hexo server		# hexo s，本地服务器预览
hexo generate	# hexo g，构建项目静态文件，输出到/public
hexo clean		# hexo c，清除构建的静态文件

我们可以通过hexo server在本地预览我们的网站
也可以先hexo generate将项目打包到/public目录，再hexo deploy推送到github仓库中

问题：GitHub Page访问404

我这里遇到了访问pigeon-dove.github.io报404的问题，最后发现是没有开启GitHub Pages
需要在仓库中点击about旁边的齿轮按钮进入设置，然后在Edit repository details中勾选"Use your GitHub Pages website"

现在你可以通过username.github.io访问你的网页了

更换主题

我个人是不太喜欢hexo默认主题的样式的，可以前往https://hexo.io/themes/ 挑选自己中意的主题
我最终选择了https://redefine.ohevan.com/ 主题，使用方法也很简单，按照说明进行即可

cd blog
npm install hexo-theme-redefine@latest
git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine

按照要求，在项目底层目录创建 _config.redefine.yml配置文件，其中我的配置文件如下

# 更多配置查看官方文档：https://redefine-docs.ohevan.com/
info:
  title: 冬云的博客
  author: 布鸽不鸽
  url: https://pigeon-dove.github.io
defaults:
  avatar: /images/head.jpg
  favicon: /images/favicon.ico
home_banner:
  title: 程序员的个人修养
  subtitle:
    text: ["Hello World!", "Across the Great Wall we can reach every corner in the world"]
    typing_speed: 50
  image:
    light: /images/bg.jpg
footer:
  start: 2022/4/19 20:56:00

最后在 _config.yml中配置即可

theme: redefine

写文章

hexo会在 source/_posts中创建md文件

hexo new "博客标题"

使用markdown软件正常写文章即可，个人强烈安利 typora这款软件，写完部署即可

hexo g	# 将前端项目生成到/public
hexo d	# 将生成的项目部署到github

关于图片处理

hexo中一个比较简单的处理图片存储的方式，就是把所有需要的资源放在 /source/images文件夹中，然后在markdown中引用

![](/images/image.png)

但这样显然不方便管理，我们可以在 _config.yml中打开文章资源文件夹功能

post_asset_folder: true

这样每次创建文章时，就会有一个和文章一样名字的文件夹。图片放置其中，markdown通过相对路径引用即可

typora中图片自动存储

如果你使用typora编辑markdown的话，可以在文件->偏好设置->图像中，设置插入图像时复制到指定路径，将路径修改为./${filename}
这样在写文章时，可以很方便的随时粘贴图片

此时还有一个问题，typora中图片 ![](./name/example.png)需要写前缀，但是hexo中则是 ![](./example.png)。当然，其实可以写完文章后搜索，全部替换。但我个人还是更推荐使用图床管理所有的图片，让markdown文件成为纯文本文件。我之前写过一篇图床的相关博客，可以参考：搭建个人图床