Hexo制作博客教程

Hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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.iousername是你的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账户的注册和设置,接下来我们将选择并配置一个适合初学者的博客框架。

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

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

选择Hexo的原因:

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

安装Hexo

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

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

第三步:创建和编辑内容

1. 了解Hexo的文件结构

在你之前初始化的Hexo博客文件夹(比如myblog)中,有几个重要的文件夹和文件:

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

2. 编写新文章

  1. 创建Markdown文件
    • 进入source/_posts/文件夹。
    • 创建一个新的Markdown文件,文件名通常遵循YYYY-MM-DD-title.md的格式,其中YYYY是年份,MM是月份,DD是日期,title是你的文章标题(用英文短横线-分隔单词)。
  2. 编写文章头部信息(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为实际的内容。
  3. 编写文章内容
    • 在Front-matter之后,你可以开始编写你的文章内容了。使用Markdown语法来格式化文本,比如标题、段落、列表、图片、链接等。
  4. 保存文件
    • 完成文章编写后,保存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拥有丰富的第三方主题,你可以根据自己的喜好选择一个。以下是如何安装一个主题的步骤:

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

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

1
theme: landscape
  1. 生成和预览
    • 运行hexo generate(或简写为hexo g)来生成静态文件。
    • 运行hexo server(或简写为hexo s)来启动本地服务器并预览你的博客。

2. 自定义主题设置

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

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

例如,你可能想要修改以下设置:

  • 网站标题和副标题
  • 菜单项和导航栏
  • 侧边栏和小工具
  • 文章布局和样式
  • 社交媒体链接和分享按钮
  1. 生成和预览更改
    • 每次修改主题配置文件后,都需要运行hexo generate来生成静态文件。
    • 然后运行hexo server来预览更改。
  2. 高级自定义
    • 如果你想要进行更高级的自定义(比如修改CSS样式或JavaScript脚本),你可能需要编辑主题文件夹中的其他文件。
    • 在进行这些更改时,请务必备份原始文件,以便在需要时恢复。

3. 测试和调试

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

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

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

1. 创建GitHub仓库

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

2. 配置Hexo以部署到GitHub Pages

  1. 安装hexo-deployer-git插件
    • 在你的Hexo项目文件夹中,运行以下命令来安装hexo-deployer-git插件,这个插件允许你将Hexo生成的静态文件部署到Git仓库中。
      1
      npm install hexo-deployer-git --save-dev
  2. 配置部署设置
    • 打开你的Hexo项目中的_config.yml文件。
    • 在文件底部添加以下部署(deploy)配置:
      1
      2
      3
      4
      5
      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. 生成静态文件并部署

  1. 生成静态文件
    • 在你的Hexo项目文件夹中,运行以下命令来生成静态文件。
      1
      hexo generate
    • 或者使用简写命令:
      1
      hexo g
  2. 部署到GitHub Pages
    • 运行以下命令来将生成的静态文件部署到你的GitHub仓库中。
      1
      hexo deploy
    • 首次部署时,你可能需要输入你的GitHub用户名和密码(或者使用GitHub提供的个人访问令牌)。
  3. 验证部署
    • 打开你的浏览器,输入你的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

  1. 注册Gitalk

    • 访问Gitalk官网,点击“开始使用”按钮,跳转到Github页面。
    • 在Github页面,点击“使用说明”中的“Click here to register”进行注册。
    • 填写相关信息,包括应用名称(Application name)、主页地址(Homepage URL,一般填写域名地址或名称.github.io)、项目描述(Application description,非必需)和认证回调地址(Authorization callback URL,一般填写域名地址或名称.github.io)。
    • 完成注册后,可以修改并更新信息,包括上传新头像和设置背景色。
  2. 创建Github Application

    • 登录Github,点击右上角头像,依次进入“Settings”->“Developer settings”->“OAuth Apps”->“New OAuth App”进行基本配置。
    • 填写应用名称、主页URL、回调URL等信息,并生成Client ID和Client Secret。
  3. 配置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

  1. 在Hexo主题中添加Gitalk容器

    • 进入主题目录的layout->_partial->post目录。
    • 在当前目录下新建一个gitalk.ejs文件,并写入以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
  • 注意替换代码中的clientIDclientSecretrepoowneradmin为实际值。
  1. 在文章模板中添加Gitalk容器引用

    • 进入主题目录的layout->_partial目录,找到article.ejs文件。
    • article.ejs文件的最后面加入以下代码:
1
2
3
4
<% if(theme.gitalk.enable){ %>
<div id="gitalk-container"></div>
<%- include post/gitalk.ejs %>
<% } %>
  1. 生成并部署Hexo博客

    • 在Hexo博客的根目录下,运行hexo generate(或hexo g)生成静态文件。
    • 运行hexo deploy将更新推送到Github Pages。
  2. 初始化评论

    • 访问你的Hexo博客文章页面,登录Github后尝试发表评论。
    • 评论将作为issues存储在指定的Github仓库中,并可以在仓库的issues页面进行管理。

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


Hexo制作博客教程
http://example.com/2024/10/25/2024-10-25-Hexo建立博客教程/
作者
zqten
发布于
2024年10月25日
许可协议