15 Hexo 静态网站生成流程
Hexo 是一个快速、简洁且高效的静态博客框架,使用 Node.js 开发。以下是 Hexo 静态网站生成的详细流程,帮助你更好地理解其工作机制。
1. 初始化 Hexo 项目
在开始之前,确保你的系统已安装 Node.js 和 npm。接下来,你可以通过以下命令创建一个新的 Hexo 项目:
1 | npm install -g hexo-cli |
此命令将会在 my-blog
目录下生成一个新的 Hexo 博客项目。
2. 项目结构
生成的项目包含以下主要文件和文件夹:
_config.yml
: 站点的配置文件。source/
: 存放你的博客内容,如文章、页面和媒体文件。_posts/
: 你的博客文章将放在这里。
themes/
: 存放主题的文件夹。public/
: 生成的静态文件将放在此处。
3. 编写文章
在 source/_posts/
目录下创建一个新的 Markdown 文件,以便生成一篇博客文章:
1 | --- |
注意文件名格式为 YYYY-MM-DD-title.md
,而在文件开头的 ---
部分称为 YAML Front Matter,用于定义文章内容的元信息。
4. 生成静态文件
使用以下命令生成静态文件:
1 | hexo generate |
该命令会读取 source/
目录下的内容,生成静态 HTML 文件,输出到 public/
文件夹。
5. 启动本地服务器
为了方便查看生成的网站,可以启动 Hexo 的本地服务器:
1 | hexo server |
默认情况下,你可以在浏览器中通过 http://localhost:4000
访问你的博客。
6. 部署到服务器
完成本地开发后,你可以将网站部署到远程服务器。在 Hexo 中,常用的部署命令如下:
首先,需在 _config.yml
中配置你的部署信息,例如 GitHub Pages:
1 | deploy: |
然后,使用以下命令进行部署:
1 | hexo deploy |
这将会把 public/
文件夹中的内容推送到你指定的 Git 仓库。
7. 总结
通过以上流程,你可以快速创建一个 Hexo 静态博客网站,编写内容并生成静态文件。掌握这些基本操作后,你可以深入学习 Hexo 的插件系统、主题开发等更多高级功能,使你的博客更具个性化和功能丰富性。
如需更多信息,请参考 Hexo 的官方文档。
15 Hexo 静态网站生成流程