devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【开发环境】（基于Hexo）个人博客搭建教程（完整无错）_搭建hexo

作者：菜鸟追梦旅行 | 2024-05-07 02:07:26

赞

踩

搭建hexo

目录

一、Hexo 概述：

二、Hexo初始环境搭建：

1.Node.js：

2.Git：

三、配置Hexo本地环境：

目录&文件解析：

1. _config.yml 网站配置信息：

2.package.json npm包管理文件：

3.scaffolds 模板文件夹：

4.source 资源文件夹：

5.themes 主题文件夹：

四、创作第一篇文章：

1.布局（Layout）：

2.模版（Scaffold）：

3.Front-matter：

4.分类和标签：

5.资源引用：

五、网站本地发布：

hexo-server：

六、清除缓存文件：

一、Hexo 概述：

Hexohttps://hexo.io/zh-cn/        Hexo是一个基于 node.js的快速生成静态博客的开源框架,支持 Markdown和大多数 Octopress
插件,一个命令即可部署到 Github页面、 Giteee、 Heroku等,强大的APl,可无限扩展,拥有
数百个主题和插件。

二、Hexo初始环境搭建：

  • Git
  • Node.js

通过以下命令查看主机中是否安装了node.js和npm：

node --version    #检查是否安装了node.js
npm --version     #检查是否安装了npm

1.Node.js：

        直接到官网上下载安装即可：

Download | Node.js (nodejs.org)https://nodejs.org/en/download/

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Node自带npm

【Node.js】＜JavaScript 运行环境＞Node.js概述&Node.js安装环境配置_爱吃糖的范同学的博客-CSDN博客https://blog.csdn.net/weixin_52058417/article/details/122486460?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166280687616781432979967%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166280687616781432979967&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122486460-null-null.nonecase&utm_term=node&spm=1018.2226.3001.4450

2.Git：

Git (git-scm.com)https://git-scm.com/

【Git】＜分布式版本控制工具＞Windows环境下Git安装&目录文件指令解析_爱吃糖的范同学的博客-CSDN博客https://blog.csdn.net/weixin_52058417/article/details/122800092?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166280692916782391867481%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166280692916782391867481&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122800092-null-null.nonecase&utm_term=git&spm=1018.2226.3001.4450

三、配置Hexo本地环境：

 Hexo官方文档：

文档 | Hexo欢迎使用 Hexo，本文档将帮助您快速上手。如果您在使用过程中遇到问题，请查看 问题解答 中的解答，或者在 GitHub、Google Group 上提问。 什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 安装安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解https://hexo.io/zh-cn/docs/

        安装使用hexo之前需要先安装Node.js和Git，当已经安装了Node.js和npm(npm是node.js的包管理工具)，可以通过以下命令安装hexo：

npm install -g hexo-cli

        安装完Hexo之后，执行下列命令，Hexo将会在指定目录中新建所需要的文件，指定的目录即为Hexo的工作站：

hexo init 本地磁盘文件夹路径

        切换到磁盘文件目录： 

cd 磁盘文件目录 
npm install

        新建完成之后，指定目录中的情况如下：

  1. .
  2. ├── _config.yml
  3. ├── package.json
  4. ├── scaffolds
  5. ├── source
  6. |   ├── _drafts
  7. |   └── _posts
  8. └── themes

         本地Hexo环境初始化完成！

目录&文件解析：

1. _config.yml 网站配置信息：

官方配置文件参数详解： 

配置 | Hexohttps://hexo.io/zh-cn/docs/configuration

  1. title: # 标题
  2. subtitle: # 副标题
  3. description: # 描述
  4. keywords: # 关键字
  5. author: # 作者
  6. language: # 语言
  7. timezone: # 时区
  8. url: # 网址
  9. root: # 根目录
  10. permalink: # 文章链接格式
  11. permalink_defaults: # 链接默认值
  12. source_dir: # 源文件夹，内容的存储位置
  13. public_dir: # 公用文件夹，静态文件的生成位置
  14. tag_dir: # 标签目录
  15. archive_dir: # 存档目录
  16. category_dir: # 分类目录
  17. skip_render: # 复制到原始路径，不进行渲染
  18. new_post_name: # 新帖子的文件名格式
  19. titlecase: # 将标题转换为小写1/大写2 *
  20. external_link.enable: # 在新标签页中打开外部链接
  21. post_asset_folder: # 启用资源文件夹功能
  22. filename_case: # 将文件名转换小写小写1/大写2
  23. relative_link: # 是否创建相对于根文件夹的链接
  24. index_generator.per_page: # 每页显示的文章数
  25. index_generator.order_by: # 发布顺序
  26. date_format: # 日期格式
  27. time_format: # 时间格式
  28. per_page: # 每个页面上显示的文章数
  29. pagination_dir: # 网址格式
  30. theme: # 主题名称
  31. theme_config: # 主题配置，覆盖主题默认值
  32. deploy: # 部署设置
  33. include: # 包括隐藏文件
  34. exclude: # 排除文件/文件夹
  35. ignore: # 忽略文件/文件夹

        参照配置文件，对配置文件进行修改！

2.package.json npm包管理文件：

        应用程序的信息，以及需要安装的模块信息。

3.scaffolds 模板文件夹：

        新建文章时，Hexo 会根据 scaffold 中的模板文件来建立新的文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。也就是说，通过hexo命令每新建一个文章，都会包含指定模板文件中的内容。

模版 | Hexohttps://hexo.io/zh-cn/docs/templates

4.source 资源文件夹：

        资源文件夹是存放用户资源的地方，如markdown文章。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

        注意：除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。

5.themes 主题文件夹：

        主题文件夹。Hexo 会根据主题来解析source目录中的markdown文件生成静态页面。

主题 | Hexohttps://hexo.io/zh-cn/docs/themes

四、创作第一篇文章：

        可以执行下列命令来创建一篇新文章：

hexo new [layout] <title>

        可以在命令中指定文章的布局（layout），不指定默认为 post，也可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。创建的新文章会自动加上指定布局对应的模板文件中的内容。

1.布局（Layout）：

        Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

        布局路径postsource/_postspagesourcedraftsource/_drafts

         如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

2.模版（Scaffold）：

        在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

hexo new photo "My Gallery"

        在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

        变量描述layout布局title标题date文件建立日期

3.Front-matter：

        Front-matter是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

  1. ---
  2. title: Hello World
  3. date: 2013/7/13 20:46:25
  4. ---

        注意：一般Front-matter使用的yaml语法，yaml语法需要注意空格，如title: Hello World冒号需要有一个空格，当然除YAML 外，你也可以使用 JSON 来编写 Front-matter。

        以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

        参数描述默认值：

  • layout布局title标题
  • date建立日期文件建立日
  • updated更新日期文件更新日期
  • comments开启文章的评论功能
  • truetags标签（不适用于分页）
  • categories分类（不适用于分页）
  • permalink覆盖文章网址

4.分类和标签：

        只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性而标签没有顺序和层次。

  1. categories:
  2. - Diary
  3. tags:
  4. - PS3
  5. - Games

        WordPress（另外一个博客搭建网站）支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法：

categories:

  • Diary
  • Life

        会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

文章摘要：

        设置文章摘要，我们只需在想显示为摘要的内容之后添 <!-- more --> 即可。像下面这样：

  1. ---
  2. title: hello hexo markdown
  3. date: 2016-11-16 18:11:25
  4. tags:
  5. - hello
  6. - hexo
  7. - markdown
  8. ---
  9.  
  10. 我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧
  11.  
  12. <!-- more -->
  13.  
  14. 紧接着文章摘要的正文内容

        这样，<!-- more --> 之前、文档配置参数之后中的内容便会被渲染为站点中的文章摘要。

5.资源引用：

        写个博客，有时候会想添加个图片或者其他形式的资源等等。有以下两种方式进行解决：

  1. 使用绝对路径引用资源，在 Web 世界中就是资源的 URL
  2. 使用相对路径引用资源

        对于使用相对路径引用资源的，我们可以使用 Hexo 提供的资源文件夹功能。

        使用文本编辑器打开站点根目录下的 _ config.yml 文件，将 post_asset_folder 值设置为 true。

post_asset_folder: true

        修改之后会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new <title> 命令创建新文章时自动创建一个同名文件夹，于是我们便可以将文章所引用的相关资源放到这个同名文件夹下，然后通过相对路径引用。例如，你把一个 example.jpg 图片放在了这个同名文件夹中，使用相对路径的常规 markdown 语法 ![](./example.jpg)即可访问 。

五、网站本地发布：

        首先执行下列命令生成相应的静态网页，生成的静态网页以及相关资源都会在public目录下

hexo generate

hexo-server：

        hexo-server模块的主要命令如下，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。

hexo server

        如果您想要更改端口，或是在执行时遇到了 EADDRINUSE 错误，可以在执行时使用 -p 选项指定其他端口，如下：

hexo server -p 5000

        但是个人认为此方式比较适合用于调试网站，并不适合长时间的网站服务器，同时为了让这个命令在后台长时间运行，需要编写相应的脚本。

        在浏览器中访问：

http://localhost:4000/

 

六、清除缓存文件：

        为了避免不必要的错误，在生成静态文件前，强烈建议先运行以下命令：

hexo clean

        上述命令会清除本地站点文件夹下的缓存文件（db.json）和已有的静态文件（public）。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/546934
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号