Hexo 静态站点搭建指南
1. 准备工作
- 安装 Node.js 和 Git: Hexo 依赖 Node.js 运行, Git 用于版本控制和部署。
- Hexo 原理: Hexo 是一个静态站点生成器,可以将 Markdown 格式的文本文件转换为静态 HTML 网页。 Hexo 会自动生成站点目录、标签等内容,从而简化博客管理流程。
2. 基于 GitHub Pages 部署
- 创建 GitHub 仓库: 在 GitHub 上创建一个新的仓库,用于托管博客静态文件。建议将仓库命名为
username.github.io
,其中username
是您的 GitHub 用户名。 若使用其他仓库名,访问地址将包含仓库名。 - 安装 Hexo: 使用
npm install -g hexo-cli
命令全局安装 Hexo 命令行工具。 - 初始化 Hexo: 在本地文件系统中创建一个新的文件夹,并使用
hexo init
命令初始化 Hexo 站点结构。
3. 生成与预览
- 生成静态页面: 使用
hexo generate
命令生成静态网页文件,默认输出目录为public
。 - 本地预览: 通过
hexo server
命令启动本地服务器,默认端口为 4000。 在浏览器中访问http://localhost:4000
即可预览博客效果。
4. 主题配置
- 下载主题: 使用
git clone
命令将主题文件下载到themes
目录下。 例如,下载 butterfly 主题:
bash
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
- 部署到 GitHub: 配置完成后,使用
hexo deploy
命令将生成的静态文件推送到 GitHub 仓库。
若直接执行部署命令,可能会提示错误:Deployer not found: git
这是由于缺少部署插件hexo-deployer-git
,可以使用以下命令安装:
bash
1 | npm install hexo-deployer-git --save |
安装完成后,再次执行 hexo deploy
命令,即可将本地文件推送至 GitHub 仓库。
6. 部署到 Coding(可选)
Coding 平台已进行改版,原有的 Pages 服务可能已失效。 详情请参考 Pages 迁移至新版 CODING。
以下是在 Coding 平台部署静态站点的基本流程:
- 创建团队用户(个人用户可设置为管理员)。
- 创建 DevOps 项目,项目名称与团队名称保持一致。
- 在项目侧边栏中选择 “持续部署” 菜单,选择 “静态网站”,点击 “立即部署”。
6.1 部署成功后
与配置 GitHub Pages 类似,需要修改站点根目录下的 _config.yml
文件,配置 deploy
部分:
yaml
1 | deploy: |
提示: Coding 域名可能不如 GitHub 域名简洁,可根据实际需求进行选择。 建议同时配置多个部署目标,作为备用方案。
7. 常用命令
plaintext
1 | BASH常见命令: |
8. 文章编写
在 Hexo 站点根目录下执行 hexo new 'post name'
命令,即可在 _posts
目录下创建一个新的 Markdown 文件。 使用文本编辑器打开该文件,即可开始撰写博文。
提示: 使用 hexo new
命令可以自动生成文章创建时间。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 zi4dbek的小站!
评论
TwikooGitalk