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
431. 文章的书写
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
上运行。你可以在浏览器中打开这个地址来查看你的博客。
- 输入以下命令来启动Hexo的本地服务器,并预览你的博客:
- 创建和编辑文章:
- 在
myblog/source/_posts
文件夹中,你可以创建新的Markdown文件来编写文章。 - Hexo会自动将这些Markdown文件转换为HTML页面,并在你启动本地服务器时显示。
- 在
- 生成静态文件:
- 当你准备好将博客部署到GitHub
Pages时,你可以使用以下命令来生成静态HTML文件:
1
hexo generate
- 这将在
myblog/public
文件夹中生成静态文件。
- 当你准备好将博客部署到GitHub
Pages时,你可以使用以下命令来生成静态HTML文件:
- 部署到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
9title: 你的文章标题
date: YYYY-MM-DD HH:MM:SS # 发布日期和时间
categories: # 文章的分类
- 分类1
- 分类2
tags: # 文章的标签
- 标签1
- 标签2
--- - 替换
你的文章标题
、YYYY-MM-DD HH:MM:SS
、分类1
、分类2
、标签1
和标签2
为实际的内容。
- 在Markdown文件的顶部,添加如下信息(用三个短横线
- 编写文章内容:
- 在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-cli
并且想要从任何位置启动服务器,你可以使用全局命令(但需要先导航到博客项目文件夹的父目录,然后使用相对路径或绝对路径指定博客文件夹):
1 |
|
其中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项目中的
- 更新配置文件:
- 打开你的Hexo项目中的
_config.yml
文件。 - 找到
theme
字段,并将其值设置为你刚刚安装的主题的文件夹名。
- 打开你的Hexo项目中的
例如,如果你安装了一个名为landscape
的主题,你的_config.yml
文件中的theme
字段应该像这样:
1 |
|
- 生成和预览:
- 运行
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项目文件夹中,运行以下命令来安装
- 配置部署设置:
- 打开你的Hexo项目中的
_config.yml
文件。 - 在文件底部添加以下部署(deploy)配置:
1
2
3
4
5deploy:
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
。
- 打开你的Hexo项目中的
3. 生成静态文件并部署
- 生成静态文件:
- 在你的Hexo项目文件夹中,运行以下命令来生成静态文件。
1
hexo generate
- 或者使用简写命令:
1
hexo g
- 在你的Hexo项目文件夹中,运行以下命令来生成静态文件。
- 部署到GitHub Pages:
- 运行以下命令来将生成的静态文件部署到你的GitHub仓库中。
1
hexo deploy
- 首次部署时,你可能需要输入你的GitHub用户名和密码(或者使用GitHub提供的个人访问令牌)。
- 运行以下命令来将生成的静态文件部署到你的GitHub仓库中。
- 验证部署:
- 打开你的浏览器,输入你的GitHub
Pages网址(通常是
https://username.github.io
,其中username
是你的GitHub用户名)。 - 你应该能看到你的Hexo博客已经成功部署到GitHub Pages上了。
- 打开你的浏览器,输入你的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
文件,并写入以下代码:
- 进入主题目录的
1 |
|
- 注意替换代码中的
clientID
、clientSecret
、repo
、owner
和admin
为实际值。
在文章模板中添加Gitalk容器引用
- 进入主题目录的
layout
->_partial
目录,找到article.ejs
文件。 - 在
article.ejs
文件的最后面加入以下代码:
- 进入主题目录的
1 |
|
生成并部署Hexo博客
- 在Hexo博客的根目录下,运行
hexo generate
(或hexo g
)生成静态文件。 - 运行
hexo deploy
将更新推送到Github Pages。
- 在Hexo博客的根目录下,运行
初始化评论
- 访问你的Hexo博客文章页面,登录Github后尝试发表评论。
- 评论将作为issues存储在指定的Github仓库中,并可以在仓库的issues页面进行管理。
通过以上步骤,你就可以在Hexo博客中成功安装和使用Gitalk评论系统了。记得定期检查和更新你的Gitalk配置和Github仓库,以确保评论系统的正常运行。