Hexo制作博客教程

Hexo常用命令

1. 文章的书写
hexo new [layout] <title>

eg: hexo new "post title with whitespace" 其中 layout为_config.yml中的默认参数值。

-p --path 自定义新文章
-r --replace 存在同名文章，替换
-s --slug 文章的slug，作为新文章的文件名和发布后的URL
eg： hexo new page --path about/me "About me"

2. 生成静态文件
hexo generate 或 hexo g

-d 或--deploy 文件生成后部署网站
-w 或--watch 监视文件变动
-b 或--bail 生成过程中出现异常则抛出。
-f 或--force 强制重新生成文件
-c 或--concurrency 最大同时生成文件数量，默认无限制。
3. 发布草稿
hexo publish [layout] <filename>

4.启动服务器
hexo server 启动服务器，ctrl+c 结束，默认地址为：http://localhost:4000/

5.部署网站
hexo deploy 或hexo d

-g 或--generate 部署之前写成静态文件
6.渲染文件
hexo render <file1> [file2]

-o或--output 设置输出路径
7. 清除缓存文件
hexo clean

8. 列出网站资料
hexo list <type>

9. 显示草稿
hexo --deaft

10. 自定义当前工作目录
hexo --cwd /path/to/cwd

建立一个基于GitHub的个人博客网站是一个既实用又能提升技术能力的好项目。以下是一个详细的步骤清单，帮助你从零开始搭建个人博客：

第一步注册

1. 注册和设置GitHub账户

注册GitHub：如果你还没有GitHub账户，需要先注册一个。
设置个人信息：完善你的个人资料，包括头像、简介等，这将展示在你的博客页面上。

2. 选择博客框架/工具

静态网站生成器：如Jekyll（Ruby）、Hugo（Go）、Hexo（Node.js）等，它们可以从Markdown文件生成静态HTML页面。
主题选择：选择一个你喜欢的主题，很多框架都有现成的主题库可以选择，也可以自定义。

3. 安装和配置博客框架

安装必要的软件：根据你选择的框架，安装相应的软件（如Ruby、Node.js等）。
初始化博客：按照框架的官方文档，通过命令行工具初始化一个新的博客项目。
配置_config.yml（以Jekyll为例）：修改配置文件，设置博客的基本信息，如标题、作者、社交链接等。

4. 创建和编辑内容

Markdown文件：使用Markdown编写你的文章，存放在指定的文件夹中（通常是_posts）。
添加页面：根据需要添加其他页面，如关于我、作品集等，也是使用Markdown编写。

5. 本地预览

运行博客：在本地运行博客，预览效果。大多数框架都提供了命令行工具来启动一个本地服务器。
调试和修改：根据预览效果，调整文章内容和样式。

6. 部署到GitHub Pages

创建仓库：在GitHub上创建一个新的仓库，命名为username.github.io（username是你的GitHub用户名），这是GitHub Pages的默认域名。
推送代码：将你的博客代码推送到这个仓库。
启用GitHub Pages：在仓库的设置中，找到“Pages”部分，选择“main”或“gh-pages”分支（取决于你的配置），然后保存设置。
自定义域名（可选）：如果你想使用自己的域名，可以在Pages设置中添加CNAME记录，并在域名提供商处配置A记录指向GitHub Pages的IP地址。

7. 优化和维护

SEO优化：添加meta标签，使用SEO友好的URL结构，确保内容易于被搜索引擎索引。
更新内容：定期发布新文章，保持博客活跃。
备份：定期备份你的博客代码和文章，以防万一。
安全性：注意GitHub仓库的安全设置，避免敏感信息泄露。

8. 推广和互动

社交媒体：通过社交媒体分享你的文章，增加曝光度。
读者互动：添加评论系统（如Disqus、Utterances），鼓励读者留言反馈。
加入社区：参与技术社区，与其他博主交流，互相学习。

完成以上步骤后，你就拥有了一个基于GitHub的个人博客网站。记得持续学习和探索，不断优化你的博客，让它成为你展示才华和分享知识的平台。

没问题，即使你对编程不太熟悉，我们仍然可以一步一步地搭建你的个人博客。既然你已经完成了GitHub账户的注册和设置，接下来我们将选择并配置一个适合初学者的博客框架。

第二步：选择博客框架/工具

对于初学者来说，我推荐使用Hexo或Hugo这样的静态网站生成器，因为它们相对简单且易于上手，尤其是Hexo，它使用Markdown编写内容，非常适合不熟悉编程的人。

选择Hexo的原因：

Markdown支持：你可以使用Markdown语法来编写文章，这是一种轻量级标记语言，易于学习和使用。
主题丰富：Hexo有大量的第三方主题可供选择，你可以很容易地找到一个你喜欢的样式。
插件支持：Hexo有丰富的插件生态系统，可以扩展博客的功能，比如添加评论系统、SEO优化等。
部署简单：Hexo可以轻松地将你的博客部署到GitHub Pages上。

安装Hexo

安装Node.js和npm：
- 首先，你需要安装Node.js，这是Hexo运行的基础。你可以从Node.js的官方网站（https://nodejs.org/）下载并安装适合你操作系统的版本。
- 安装Node.js时，npm（Node Package Manager）会一并安装。
全局安装Hexo：
- 打开你的命令行工具（在Windows上是CMD或PowerShell，在macOS或Linux上是Terminal）。
- 输入以下命令来全局安装Hexo：
  1
  npm install -g hexo-cli
- 这将安装Hexo的命令行工具，允许你通过命令行来创建和管理Hexo博客。
初始化Hexo博客：
- 选择一个你想要存放博客代码的文件夹，并导航到该文件夹。
- 输入以下命令来初始化一个新的Hexo博客：
  1
  hexo init myblog
- 这将创建一个名为myblog的新文件夹，里面包含了Hexo博客的基本结构和默认主题。
- 进入myblog文件夹：
  1
  cd myblog
安装依赖：
- 在myblog文件夹内，运行以下命令来安装博客所需的依赖项：
  1
  npm install
启动本地服务器：
- 输入以下命令来启动Hexo的本地服务器，并预览你的博客：
  1
  hexo server
- 默认情况下，服务器会在http://localhost:4000上运行。你可以在浏览器中打开这个地址来查看你的博客。
创建和编辑文章：
- 在myblog/source/_posts文件夹中，你可以创建新的Markdown文件来编写文章。
- Hexo会自动将这些Markdown文件转换为HTML页面，并在你启动本地服务器时显示。
生成静态文件：
- 当你准备好将博客部署到GitHub Pages时，你可以使用以下命令来生成静态HTML文件：
  1
  hexo generate
- 这将在myblog/public文件夹中生成静态文件。
部署到GitHub Pages（我们将在后续步骤中详细讨论）。

现在你已经成功安装了Hexo，并创建了一个基本的博客。

第三步：创建和编辑内容

1. 了解Hexo的文件结构

在你之前初始化的Hexo博客文件夹（比如myblog）中，有几个重要的文件夹和文件：

source/：存放你的原始内容，包括Markdown文章、图片等。
source/_posts/：存放你的文章，每个文章都是一个.md文件。
themes/：存放你选择的Hexo主题。
_config.yml：Hexo博客的全局配置文件。

2. 编写新文章

创建Markdown文件：
- 进入source/_posts/文件夹。
- 创建一个新的Markdown文件，文件名通常遵循YYYY-MM-DD-title.md的格式，其中YYYY是年份，MM是月份，DD是日期，title是你的文章标题（用英文短横线-分隔单词）。
编写文章头部信息（Front-matter）：
- 在Markdown文件的顶部，添加如下信息（用三个短横线---包围）：
  1
  2
  3
  4
  5
  6
  7
  8
  9
  title: 你的文章标题 date: YYYY-MM-DD HH:MM:SS # 发布日期和时间 categories: # 文章的分类 - 分类1 - 分类2 tags: # 文章的标签 - 标签1 - 标签2 ---
- 替换你的文章标题、YYYY-MM-DD HH:MM:SS、分类1、分类2、标签1和标签2为实际的内容。
编写文章内容：
- 在Front-matter之后，你可以开始编写你的文章内容了。使用Markdown语法来格式化文本，比如标题、段落、列表、图片、链接等。
保存文件：
- 完成文章编写后，保存Markdown文件。

3. 预览文章

回到你的命令行工具，确保Hexo的本地服务器还在运行（如果关闭了，重新运行hexo server）。
在浏览器中打开http://localhost:4000，你应该能看到你的新文章已经出现在博客上了。

4. 编辑现有文章

如果需要编辑现有的文章，只需在source/_posts/文件夹中找到对应的Markdown文件，进行修改，然后保存。
Hexo会自动检测文件的更改，并刷新本地服务器上的预览。

5. 添加其他页面

除了文章之外，你还可以添加其他页面，比如关于我、作品集等。
创建一个新的Markdown文件，放在source/文件夹中（而不是_posts/），然后按照文章的方式编写头部信息和内容。
在Hexo的主题配置文件中，你可能需要添加一些路由规则来确保这些页面能够正确显示。

现在你已经知道如何创建和编辑Hexo博客的内容了。

第四步：本地预览和调试

1. 启动Hexo本地服务器

确保你的Hexo博客项目文件夹（比如myblog）是打开的，然后在命令行工具中导航到该文件夹。运行以下命令来启动Hexo的本地服务器：

1	`hexo server`

或者，如果你安装了hexo-cli并且想要从任何位置启动服务器，你可以使用全局命令（但需要先导航到博客项目文件夹的父目录，然后使用相对路径或绝对路径指定博客文件夹）：

1	`hexo server -d myblog`

其中myblog是你的博客项目文件夹的名称。

2. 在浏览器中预览

默认情况下，Hexo的本地服务器会在http://localhost:4000上运行。打开你的网页浏览器，输入这个地址，你应该能看到你的博客的本地预览。

3. 浏览和导航

点击博客上的链接，确保导航正常。
检查文章的布局和样式，确保它们符合你的期望。
如果你的博客有侧边栏、页脚等组件，也请确保它们显示正确。

4. 调试和修改

如果发现任何问题（比如布局错乱、链接失效等），回到你的Markdown文件或主题配置文件中进行修改。
修改后，保存文件，然后刷新浏览器页面，查看更改是否生效。
重复这个过程，直到你对博客的预览满意为止。

5. 使用Hexo的内置命令

在调试过程中，你可能会频繁地生成静态文件和重启服务器。Hexo提供了一些方便的命令来简化这些操作：
- hexo clean：删除生成的静态文件（在public文件夹中）。
- hexo generate（或简写为hexo g）：生成静态文件。
- hexo server（或简写为hexo s）：启动本地服务器。
- 你可以组合这些命令来简化工作流程，比如hexo clean && hexo g && hexo s。

6. 检查响应式设计

如果你的博客主题支持响应式设计（即在不同设备上都能良好显示），请在不同的屏幕尺寸和浏览器上测试你的博客。
确保在移动设备上也能方便地浏览和导航。

现在你已经知道如何在本地预览和调试你的Hexo博客了。

第五步：自定义博客主题和设置

1. 选择并安装主题

Hexo拥有丰富的第三方主题，你可以根据自己的喜好选择一个。以下是如何安装一个主题的步骤：

浏览Hexo主题：
- 你可以访问Hexo的官方文档或GitHub上的Hexo主题仓库来浏览可用的主题。
- 选择一个你感兴趣的主题，并查看其文档以了解如何安装和配置。
下载或克隆主题：
- 根据主题的文档，你可能需要下载主题的ZIP文件，或者通过Git克隆主题的仓库到你的本地计算机。
将主题放入Hexo项目：
- 将下载或克隆的主题文件夹放入你的Hexo项目中的themes/文件夹内。
更新配置文件：
- 打开你的Hexo项目中的_config.yml文件。
- 找到theme字段，并将其值设置为你刚刚安装的主题的文件夹名。

例如，如果你安装了一个名为landscape的主题，你的_config.yml文件中的theme字段应该像这样：

1	`theme: landscape`

生成和预览：
- 运行hexo generate（或简写为hexo g）来生成静态文件。
- 运行hexo server（或简写为hexo s）来启动本地服务器并预览你的博客。

2. 自定义主题设置

大多数Hexo主题都允许你通过修改主题的配置文件来自定义博客的外观和行为。以下是如何自定义主题设置的步骤：

找到主题配置文件：
- 在你安装的主题文件夹内，通常会有一个名为_config.yml的文件（有时可能是其他名称，比如config.yml，具体取决于主题）。
编辑主题配置文件：
- 使用文本编辑器打开主题配置文件。
- 根据文件中的注释和说明，修改你感兴趣的设置。

例如，你可能想要修改以下设置：

网站标题和副标题
菜单项和导航栏
侧边栏和小工具
文章布局和样式
社交媒体链接和分享按钮

生成和预览更改：
- 每次修改主题配置文件后，都需要运行hexo generate来生成静态文件。
- 然后运行hexo server来预览更改。
高级自定义：
- 如果你想要进行更高级的自定义（比如修改CSS样式或JavaScript脚本），你可能需要编辑主题文件夹中的其他文件。
- 在进行这些更改时，请务必备份原始文件，以便在需要时恢复。

3. 测试和调试

在进行自定义时，不断测试你的博客以确保所有功能都按预期工作。
检查不同设备和浏览器上的显示效果。
如果遇到问题，请查阅主题的文档或寻求社区的帮助。

现在你已经知道如何自定义Hexo博客的主题和设置了。

第六步：将博客部署到GitHub Pages

1. 创建GitHub仓库

登录GitHub：
- 使用你的GitHub账户登录到GitHub网站。
创建新仓库：
- 点击右上角的加号（+）图标，然后选择“New repository”（新建仓库）。
- 为你的仓库命名，通常使用username.github.io的格式，其中username是你的GitHub用户名。这样命名的仓库会自动启用GitHub Pages。
- 设置仓库为“Public”（公开），因为GitHub Pages不支持私有仓库。
- 初始化仓库时可以选择添加一个README文件，但这对于Hexo部署不是必需的。
- 点击“Create repository”（创建仓库）按钮。

2. 配置Hexo以部署到GitHub Pages

安装hexo-deployer-git插件：
- 在你的Hexo项目文件夹中，运行以下命令来安装hexo-deployer-git插件，这个插件允许你将Hexo生成的静态文件部署到Git仓库中。
  1
  npm install hexo-deployer-git --save-dev

配置部署设置：

打开你的Hexo项目中的_config.yml文件。

在文件底部添加以下部署（deploy）配置：

deploy:
  type: git
  repo: <your-repository-url> # 替换为你的GitHub仓库的HTTPS URL
  branch: main # 或者你希望部署到的分支名，通常是main或gh-pages
  message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}" # 提交时的消息模板

将<your-repository-url>替换为你的GitHub仓库的完整HTTPS URL，例如https://github.com/username/username.github.io.git。

3. 生成静态文件并部署

生成静态文件：
- 在你的Hexo项目文件夹中，运行以下命令来生成静态文件。
  1
  hexo generate
- 或者使用简写命令：
  1
  hexo g
部署到GitHub Pages：
- 运行以下命令来将生成的静态文件部署到你的GitHub仓库中。
  1
  hexo deploy
- 首次部署时，你可能需要输入你的GitHub用户名和密码（或者使用GitHub提供的个人访问令牌）。
验证部署：
- 打开你的浏览器，输入你的GitHub Pages网址（通常是https://username.github.io，其中username是你的GitHub用户名）。
- 你应该能看到你的Hexo博客已经成功部署到GitHub Pages上了。

4. 更新博客

每次你更新博客内容时，只需重复生成静态文件和部署的步骤。
你可以将这两个步骤合并为一个命令，通过添加--deploy选项到hexo generate命令中来实现：
1
hexo g --deploy
- 或者使用简写命令：
  1
  hexo gd

现在你已经知道如何将Hexo博客部署到GitHub Pages上了。

第七步：维护和更新你的博客

1. 定期更新内容

撰写新文章：使用Markdown编写新的博客文章，并保存在Hexo项目的source/_posts/目录下。
发布文章：每次撰写完新文章后，运行hexo generate（或hexo g）生成静态文件，然后运行hexo deploy将更新推送到GitHub Pages。你也可以使用hexo g --deploy（或hexo gd）一次性完成这两个步骤。
管理旧文章：定期回顾和更新你的旧文章，确保它们的信息是最新的，并且没有过时或错误的链接。

2. 监控和分析

使用Google Analytics（谷歌分析）：在Google Analytics中注册一个账户，并将提供的跟踪代码添加到你的Hexo博客的HTML模板中，以便监控博客的流量和访问者行为。
检查错误和性能：定期检查你的博客是否有任何错误（如404页面、断开的链接等），并使用工具（如Google PageSpeed Insights）来优化博客的性能。

3. 备份和恢复

定期备份：定期将你的Hexo项目文件夹和GitHub仓库的内容备份到安全的位置，以防数据丢失。
恢复数据：如果出现问题，你可以使用备份的数据来恢复你的博客。

4. 保持主题和插件更新

更新Hexo：定期检查Hexo的更新，并运行npm update -g hexo来更新到最新版本。
更新主题和插件：同样地，定期检查你使用的主题和插件是否有更新，并按照它们的文档进行更新。

5. 安全性

保护你的GitHub账户：确保你的GitHub账户使用了强密码，并启用了双重身份验证。
避免敏感信息：不要在博客中发布任何敏感信息，如密码、密钥或私人电子邮件地址。

6. 与读者互动

添加评论系统：考虑在你的博客中添加一个评论系统，如Disqus或Gitalk，以便与读者互动。
回复评论和问题：定期查看并回复读者的评论和问题，以建立和维护与读者的关系。

7. 优化SEO

使用关键词：在撰写文章时，使用相关的关键词，并在标题、元描述和正文中适当地放置它们。
创建内部链接：在你的文章之间创建内部链接，以便读者可以轻松地找到相关的内容。
优化图片：为图片添加描述性的文件名和alt属性，并使用适当的压缩来优化它们的加载速度。

现在你已经知道如何维护和更新你的Hexo博客了。

安装Gitalk

注册Gitalk
- 访问Gitalk官网，点击“开始使用”按钮，跳转到Github页面。
- 在Github页面，点击“使用说明”中的“Click here to register”进行注册。
- 填写相关信息，包括应用名称（Application name）、主页地址（Homepage URL，一般填写域名地址或名称.github.io）、项目描述（Application description，非必需）和认证回调地址（Authorization callback URL，一般填写域名地址或名称.github.io）。
- 完成注册后，可以修改并更新信息，包括上传新头像和设置背景色。
创建Github Application
- 登录Github，点击右上角头像，依次进入“Settings”->“Developer settings”->“OAuth Apps”->“New OAuth App”进行基本配置。
- 填写应用名称、主页URL、回调URL等信息，并生成Client ID和Client Secret。
配置Hexo博客
- 进入Hexo博客的主题配置文件（_config.yml），添加Gitalk配置。
- 配置项包括：
  - enable: 是否启用Gitalk，设置为true。
  - github_id: Github仓库所有者。
  - repo: 存储评论的仓库名称。
  - client_id: Github Application的Client ID。
  - client_secret: Github Application的Client Secret。
  - admin_user: Github仓库所有者和协作者，只有他们可以初始化Github issues。
  - distraction_free_mode: 是否启用无干扰模式，类似于Facebook。
  - language: 语言设置，如中文设置为zh-CN。

二、使用Gitalk

在Hexo主题中添加Gitalk容器
- 进入主题目录的layout->_partial->post目录。
- 在当前目录下新建一个gitalk.ejs文件，并写入以下代码：

<link rel="stylesheet" href="https://unpkg.com/gitalk@latest/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
<script src="https://priesttomb.github.io/js/md5.min.js"></script>
<script type="text/javascript">
new Gitalk({
  clientID: '你的Client ID',
  clientSecret: '你的Client Secret',
  repo: '你的仓库名称',
  owner: '你的Github用户名',
  admin: ['你的Github用户名'],
  id: md5(location.pathname), // 使用md5确保唯一性和长度限制
  distractionFreeMode: true
}).render('gitalk-container')
</script>

注意替换代码中的clientID、clientSecret、repo、owner和admin为实际值。

在文章模板中添加Gitalk容器引用
- 进入主题目录的layout->_partial目录，找到article.ejs文件。
- 在article.ejs文件的最后面加入以下代码：

<% if(theme.gitalk.enable){ %>
  <div id="gitalk-container"></div>
  <%- include post/gitalk.ejs %>
<% } %>

生成并部署Hexo博客
- 在Hexo博客的根目录下，运行hexo generate（或hexo g）生成静态文件。
- 运行hexo deploy将更新推送到Github Pages。
初始化评论
- 访问你的Hexo博客文章页面，登录Github后尝试发表评论。
- 评论将作为issues存储在指定的Github仓库中，并可以在仓库的issues页面进行管理。

通过以上步骤，你就可以在Hexo博客中成功安装和使用Gitalk评论系统了。记得定期检查和更新你的Gitalk配置和Github仓库，以确保评论系统的正常运行。

计算机

#编程

Hexo制作博客教程

http://example.com/2024/10/25/2024-10-25-Hexo建立博客教程/

作者

zqten

发布于

2024年10月25日

许可协议

随机致富的傻瓜读书笔记上一篇

电脑小技巧（持续更新）下一篇

Hexo制作博客教程

第一步 注册

1. 注册和设置GitHub账户

2. 选择博客框架/工具

3. 安装和配置博客框架

4. 创建和编辑内容

5. 本地预览

6. 部署到GitHub Pages

7. 优化和维护

8. 推广和互动

第二步：选择博客框架/工具

选择Hexo的原因：

安装Hexo

第三步：创建和编辑内容

1. 了解Hexo的文件结构

2. 编写新文章

3. 预览文章

4. 编辑现有文章

5. 添加其他页面

第四步：本地预览和调试

1. 启动Hexo本地服务器

2. 在浏览器中预览

3. 浏览和导航

4. 调试和修改

5. 使用Hexo的内置命令

6. 检查响应式设计

第五步：自定义博客主题和设置

1. 选择并安装主题

2. 自定义主题设置

3. 测试和调试

第六步：将博客部署到GitHub Pages

1. 创建GitHub仓库

2. 配置Hexo以部署到GitHub Pages

3. 生成静态文件并部署

4. 更新博客

第七步：维护和更新你的博客

1. 定期更新内容

2. 监控和分析

3. 备份和恢复

4. 保持主题和插件更新

5. 安全性

6. 与读者互动

7. 优化SEO

安装Gitalk

二、使用Gitalk

第一步注册