前期准备

  1. 安装 Node.js 和 Git:这是运行 Hexo 的必备条件。
  2. Hexo 原理:Hexo 可以将 Markdown 文件转换为静态网页,并自动生成目录、标签等内容,简化博客管理。

GitHub Pages 上搭建博客

  1. 创建 GitHub 仓库:新建一个 username.github.io 的仓库,用于托管博客,或新建任意仓库但访问地址会带有仓库名。
  2. 安装 Hexo:使用 npm install -g hexo 安装 Hexo。
  3. Hexo 初始化:在本地创建一个文件夹并初始化 Hexo,生成站点结构。

生成和预览博客

  1. 生成静态页面:使用 hexo g 生成静态网页文件。
  2. 本地预览:通过 hexo s 启动本地服务器,在浏览器中访问 http://localhost:4000 查看博客效果。

修改主题

  1. 下载主题:通过 git clone 命令下载主题到 themes 目录下。以butterfly为例,在命令行输入以下代码:

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  2. 更改主题配置:编辑站点的 _config.yml 文件,将 theme: landscape 修改为你的主题名(比如theme: butterfly)。

部署到 GitHub

  1. 配置部署信息
    配置_config.yml 中有关 deploy 的部分(注意缩进)。

    1
    2
    3
    4
    5
    deploy:
    type: git
    repository: https://github.com/zi4dbek/zi4dbek.github.io.git # 用https或者ssh均可
    branch: master

  2. 部署到 GitHub:配置好一切之后使用 hexo d 命令将生成的静态文件推送到 GitHub 仓库。

    直接部署一般会报错:Deployer not found: git

    原因是缺少部署插件hexo-deployer-git,可使用以下命令安装:

    1
    npm install hexo-deployer-git --save

    然后输入hexo d就会将本次有改动的文件全部提交。

部署到 Coding(可选)

Coding 改版的内容很多,以前部署的个人 pages 已经失效,详情参考Pages 迁移至新版 CODING

部署随机域名的网页流程:

新建团队用户,个人为管理。

新建 DevOps 项目,取名与团队名相同。

之后在侧边栏中找到持续部署菜单栏,选中静态网站点击立即部署

部署成功后

然后和配置 github 服务器一样去配置_config.yml 中相关 deploy 部分,示例如下:

1
2
3
4
deploy:
type: git
repository: https://e.coding.net/andh/andh.coding.me.git # 用https或者ssh均可
branch: master
ps:Coding域名不如GitHub域名美观,不在意的可以使用,建议作为备用站点QAQ

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
常见命令:
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy # 部署到GitHub
hexo help # 查看帮助
hexo version # 查看Hexo的版本
缩写命令:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令:
hexo s -g # 生成并本地预览
hexo d -g # 生成并上传

写文章

在 hexo 根目录下执行命令 hexo new 'post name' 可以快速在_posts 下生成相关 md 文件,我们只需要打开这个文件就可以开始写博客了。

ps:用这个命令的好处是帮我们自动生成了文章创建时间。