hexo-gitee构建个人blog

  • 简述

之前使用github记录一些开发中遇到的问题以及解决方案,但是github访问速度总是让人感觉到不如意,毕竟服务器在国外,
而gitee是一个类似与github的平台,优势在于访问速度很快,github的功能它基本都有,所以选择转战到gitee平台.

Hexo 作为一个快速、简洁且高效的博客框架。使用起来门槛非常低,可以用markdown语法来进行文章写作,能快速渲染出静态页面,

Hexo 支持各种主题选择,可以让我们选择合适自己的主题,其主题设置也极其容易。Hexo的官方文档也非常丰富,各种操作指令都能
官网 上查找到。

  • 环境准备
  1. 安装git并做好相关配置。
  2. 安装Node.js,需要使用npm来构建。
  3. gitee官网 注册一个账号(也可以使用已经拥有的账号)
  • 开始
  1. 在本地创建合适的文件夹,用来存放本地blog。

  2. 进入创建好的文件夹,按照hexo官网操作执行初始化指令(前提:已经安装好node.js)。

    npm install -g hexo-cli

    执行完后会产生以下文件

    20200727150927.png

    默认使用 landscape主题,并且有一篇指导使用hexo(hello-word.md)的blog。

  3. 新建文章,执行

    hexo new "Blog Title"

    可以在_posts目录下生成一篇blog.

  4. 启动本地hexo服务

    hexo server

    执行后会运行本地hexo服务,默认端口4000

    20200727151215.png

    点击链接可以本地预览blog。

  5. 主题选择与设置

    hexo强大之处在于各种丰富的主题选择,以下地址可以预览主题:

    hexo官网主题

    知乎 hexo主题

    github 第三方主题

    选择好主题后进入themes文件目录下 直接 git clone [主题git地址],记住themes目录下主题文件夹名字,打开根目录下_config.yml文件
    将主题目录名字替换到theme
    20200727151301.png
    执行 hexo clean && hexo g && hexo s 查看更换后的主题。

    修改主题中设置,需要修改主题目录下的_config.yml中相关值。

  6. 关联gitee
    在gitee中创建项目地址
    20200727151357.png
    记得是否公开必须选择 公开,不然blog无法访问。
    创建好blog项目地址后需要开启blog服务,记录下blog地址
    20200727151358.png
    注意说选择的分支名称

    打开项目的_config.yml(注意:非主题下的配置文件)
    20200727151647.png
    将git项目地址填上,分支(开启blog服务的分支名称)名称填上。

  7. 部署blog
    执行 hexo clean && hexo g && hexo d本地预览,没有问题后执行 hexo d将blog部署到gitee上。

  8. 打开记录下的blog地址就可以看到blog了。

  • 遇到的问题:
  1. 本地运行后正常,但是发布后样式缺失,页面css 文件加载不到
    解决办法:查看项目_config.yml 中url 与 root的配置,url需要指定gitee的文章发布地址,root为项目名称。
  2. 本地执行了hexo clean && hexo g && hexo d 但是通过gitee主页链接访问后依然没有改变
    解决办法:进入第6步中 gitee pages 服务,点击更新,进入页面后去缓存刷新
posted @ 2023-02-07 10:45  年年糕  阅读(22)  评论(0编辑  收藏  举报