Win10环境下 Hexo + Gitee 搭建个人静态博客 -- 超简单指南

本文受众

1. 学生党, 想要建立个人博客, 但是对于各种技术不太了解, 想要简单粗暴地实现写博客的目的;
2. 学生党, 想要在简历或者面试时积累个人材料的;
3. 程序员, 刚入门想要记录下学习心得体会的;
4. 非技术类从业者, 想要一个写文章或者记录日常的小站点

工具:

1. node.js(我用的版本是12.18.1) 建议使用最新的LTS版本
   下载地址: https://nodejs.org/zh-cn/
   
2. git 版本就比较随意了, 主要是用git bash 命令行维护项目的时候方便点;
   什么?git是啥? 建议你先去学习一下啥是git, 然后去官网下载安装你的电脑对应版本的git, 加油!
   
3. gitee账号 去gitee(码云)官网分分钟注册一个
   

为什么选Gitee作为部署平台?

1. 速度快, github不用说了肯定访问速度要比gitee慢上一点
2. 简单(和在github上部署基本没区别)
3. 还是快, 日常维护的时候, 登录码云肯定比github快点吧

为啥用Hexo不用别的?

简单, 文档多, 用的人多, 别人出过的问题也多, 别人的解决方案也多!!
官网地址: https://hexo.io/zh-cn/

前期工作

1. 安装hexo-cli
   为什么全局安装hexo-cli而不是hexo? 还是为了简单
   我们大多数人不想对建站工具深入研究, 但是需要简单好用的工具不是吗?
   我们主要目的是为了写博客, 次要目的研究一下相关的技术点

• 步骤1: 打开git bash
• 步骤2: npm install -g hexo-cli
• 步骤3: 检查一下是否安装成功 hexo -v或者hexo -version或者hexo version哪条指令都OK

到此为止需要做的前期工作都OK了, 接下来就正式创建博客项目了!
大致分为本地上的操作和部署到远程仓库的操作2部分!

本地工作

1. 初始化博客(建立本地项目)

• 步骤1: 还是在git bash命令行中, 输入指令hexo init [folder] [folder]直接就取成你博客的名字, 推荐一次取好, 不要来回改动
• 步骤2: 本地运行, 没错, 此时你的博客已经在你的本地了
  cd切换到博客目录下, 或者在博客目录下打开git bash
  然后测试一下hexo s
  
  顺利的话可以发现, 本地回环上4000端口已经有了一个服务, 打开浏览器, CV大法(注意别在bash命令行下ctrl+c, 会直接停止服务, 一定要右键复制), 回车一下
  
  不得不说原始主题也挺好看的, 不过基本没人用…
  所以, 下面就进入配置主题了(基本上算是最消耗你时间的地方)

2. 配置主题

本人随大流, 用的是Next主题
原因: 风格简约, 不花里胡哨, 用的人多, 用过都说好, 有团队维护不断更新, 网上相关文章也多…
综上所述: 我只推荐你用Next主题, 简单粗暴, 好用省时间, 真香就完事了!

• 步骤1:
  首先你得下载主题, 推荐git clonenext的官方仓库, 虽然很多人都会用旧版本, 可能是习惯了或者追求稳定吧, 不过这个主题的大改动并不多, 所以不要在意, 直接克隆最新的就OK了!
  先cd进入博客根目录git clone https://github.com/theme-next/hexo-theme-next themes/next, 然后根目录下的themes目录, 就能看到next的文件夹了
• 步骤2:
  指定主题, 编辑根目录下的_config.yml配置文件;
  把theme: landscape修改成theme: next
  然后再次本地运行hexo s或者hexo server
  
  到此为止, 主题就设置好了, 其他的一些定制化操作, 本文就不一一赘述了, 网上很多文章, 覆盖面很全, 希望大家稍微为自己的博客花一点小时间, 打造一个舒适且不失个性的写作环境…

3. 基本操作

hexo s 这个不用说了吧, 本地运行, 前面也用了几次了 hexo server的简写
hexo g g代表生成, 你可以理解为生成要展示的页面 hexo generate的简写
hexo clean 清除之前的各种模式和操作, 将项目恢复到生成前状态
hexo new <title> 生成markdown文章, <title>文章名
hexo d 推送到远程仓库(接下来会讲) hexo deploy的简写
以上5条指令, 基本能够应付日常的所有需求, 是不是很简单
其实更多的时候, 我们会选择复合使用指令, 日常情况基本只使用下面2个指令就OK了
hexo clean && hexo g && hexo s 清理+重新生成+本地运行
hexo clean && hexo g && hexo d 清理+重新生成+推送到远程仓库

部署工作

部署目的2点:

1. 给别人看的
2. 自己想看, 自己需要跨设备看

部署前提, gitee配置好账号, git本地的全局变量等等…

• 步骤1: 建立public类型的远程仓库, 和本地的项目最好同名
• 步骤2: 安装远程推送插件npm install hexo-deployer-git --save
• 步骤3: 修改博客根目录的配置文件_config.yml末尾

  deploy: 
  	 type: git
  	 repo: https://gitee.com/你的用户名/你的仓库名.git
  	 branch: master
  

• 步骤4: hexo d推送
• 步骤5: 进入远程仓库, 选择服务–>Gitee Pages
  
• 步骤6: 点击更新或一开始的部署, 完成部署
  
  到此为止, 部署完毕, 点击生成的链接, 就能访问你部署在Gitee上的静态博客了

日常操作

hexo new 新文章
生成的文章在/source/_posts目录下
一通狂写…
hexo clean && hexo g && hexo s
本地先看一眼效果
hexo clean && hexo g && hexo d
推送到远程
登录Gitee, 进仓库, 进入Gitee Pages, 更新
通过链接访问, 查看最终效果

常见问题解决

部署后出现本地有渲染效果但是远程不显示CSS样式
尝试修改根目录下_config.yml配置文件的第二个区块URL区的前两项

url: https://gitee.com/你的用户名/你的仓库名
root: /你的仓库名

本地效果 != 远程效果
如果页面检查都正常, 那么, 清理缓存必好使!!!