Gitee + Hexo 搭建个人博客页面

1、环境

1. windows 10/11
2. node
3. git

2、搭建

1. 全局安装 hexo-cli

   npm install -g hexo-cli

2. 初始化

   # 进入到放置博客静态文件的位置，使用 Git Bash Here 打开
   hexo init blog # 初始化创建文件夹
   cd blog # 进入 blog 目录
   npm i # 进一步安装 hexo 所需依赖

3. 启动

   hexo clean # 清除所有记录
   hexo generate # 生成静态网页
   hexo server -p 80 # 启动服务，-p 80 表示端口号为 80，默认为 4000
   # 在浏览器中使用 http://localhost:80 即可访问

4. 主题配置

   # https://hexo.io/themes/ 下载自己喜欢的主题，以 yilia-plus 为例
   git clone git@github.com:JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus
   #  打开 blog 文件夹下的 _config.yml，修改 theme: landscape 为 theme: yilia-plus
   # 重新输入
   hexo clean
   hexo generate
   hexo server -p 80

5. 解决图片路径问题

   #安装 hexo-asset-image 插件
   npm install hexo-asset-image --save
   # 修改 _config.yml 中 post_asset_folder: true
   # 生成新的网页
   hexo new test
   # source/_posts 下会出现 test 文件夹 和 test.md 文件

6. 配置 ssh

7. 创建仓库

   最好仓库名与用户名一致

8. 上传到 gitee

   • _config.yml 中配置 deploy 部分

   deploy:
     type: git
     #仓库的地址，比如我的就是：https://gitee.com/hqzqaq/hqzqaq
     repo: https://gitee.com/用户名/仓库名  
     branch: master

   • 安装 hexo-deployer-git 插件，防止推送出现问题

     # 在 git bash 窗口执行
     npm install hexo-deployer-git --save

9. 部署

   Gitee 仓库 -> 服务 ——> Gitee Pages ——> 部署分支选择 master，点击启动即可。

10. 常用 hexo 命令

    # 新建文章
    hexo new "postName" 
    # 新建页面
    hexo new page "pageName"
    # 生成静态页面至public目录
    hexo generate
    # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
    hexo server
    # 部署到 Gitee
    hexo deploy
    # 查看帮助
    hexo help
    # 查看Hexo的版本
    hexo version
    # 组合命令
    # 生成并本地预览
    hexo s -g
    # 生成并上传
    hexo d -g

11. 写博客

    • 创建博客

      # 定位到 hexo 根目录
      hexo new '我的第一篇博客'
      # source/_post 目录下自动生成 我的第一篇博客 文件夹 我的第一篇博客.md 文件

      使用命令会自动生成时间

      ---
      title: 文章名称  #文章页面上的显示名称，一般是中文
      date: 2013-12-02 15:30:16  #文章生成时间，一般不改，当然也可以任意修改
      categories: 默认分类  #分类
      tags: [tag1,tag2,tag3]  #文章标签，可空，多标签请用格式，注意:后面有个空格
      description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
      ---

    • 创建页面

      hexo new page "我的第二篇博客"
      # 在 source 下面生成 我的第二篇博客 文件夹
      # 文件夹下包含 index 文件夹和 index.md 文件
      # 最终部署时生成：hexo\public\我的第二篇博客\index.html，但是它不会作为文章出现在博文目录。

    • 如何让博文列表不显示全部内容

      在适当的位置加上 more 即可

      ## 1. 前言 
      在开始教程之前，你可以了解一下使用gitee pages服务搭建博客有哪些好处： 
      * gitee 是国内的网站，相较于 github 访问速度更快；
      * 全是静态文件，访问速度快；
      * 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
      <!--more-->
      * 数据绝对安全，基于gitee的版本管理，想恢复到哪个历史版本都行；
      * 博客内容可以轻松打包、转移、发布到其它平台；
      * 等等。

12. 注意点

    博客更新后，上传之后需要手动到 Gitee 仓库里面 更新 一下 Gitee Pages