用Hexo制作自己的静态博客

2023-10-27

博客是一个老东西了,如果我们想写博客的话,有两种选择,第一种是在博客网站上,例如QQ空间、新浪博客、简书等网站上申请账号,然后编写博客;第二种就是自己找服务器搭一个博客。搭建博客也有两种选择,第一种是搭建动态博客,这方面最流行的就是WordPress,第二种就是搭建静态博客,这方面有很多选择。说到功能上,动态博客当然更胜一筹,但是所需的服务器资源比较大,如果想取得较好的效果,就必须花钱购买服务器资源。静态博客功能比较单一,但是由于省资源,所以可以找到很多免费部署的资源(例如Github Pages)。

搭建静态博客这方面有很多工具可供选择,我看了看Hexo是一个很不错的选择,使用人数比较多,功能也挺丰富,所以这里我就选择Hexo来搭建静态博客。这篇文章在很多地方也参考了Hexo 官方文档

安装Hexo

在安装Hexo之前,首先需要安装Node.jsGit两个工具。

然后输入下面命令来安装Hexo。

$ npm install -g hexo-cli

建立博客

安装好Hexo之后,就可以建立博客了。建立博客需要输入以下命令。

$ hexo init <folder>
$ cd <folder>
$ npm install

等待npm安装好所有依赖包之后,博客就算建立好了。博客的文件结构如下面所示。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

配置博客

在项目外层文件夹中有一个_config.yml,这是博客项目的全局配置文件,在这里有很多选项需要我们修改。例如博客主标题、子标题、描述、作者、语言、时区、博客地址和根地址等等。这里列举的这些地址都需要我们根据自己需求进行修改。

title: 易天的静态个人博客
subtitle:
description:
author: 易天
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /

Hexo命令

下面介绍一下Hexo的常用命令,方括号[]中包括的是可选项,尖括号<>中包括的是必选项。

创建新博客项目

如果未指定文件夹,hexo会在当前文件夹创建项目文件。

$ hexo init [folder]

创建新文章

如果未指定布局,会使用配置文件中的默认布局选项。如果文章标题中含有空格等字符,需要使用双引号包括标题。

$ hexo new [layout] <title>

生成静态博客

该命令会生成博客的静态文件。

$ hexo generate

启动本地服务器

启动本地服务器来开发博客,默认地址为 http://localhost:4000/

$ hexo server

还有一些命令这里就不介绍了,需要详细了解的话可以直接查看官方文档。

编写新文章

编写新文章使用下面的命令。

$ hexo new [layout] <title>

默认情况下布局有postpagedraft三个,它们所在的文件夹位置也不同。默认使用post布局,生成的文章会放在source/_posts下。执行完这个命令之后,在该文件夹会出现名为<title>.md的markdown格式文件,这就是我们的博客文件,我们可以按照markdown语法来编辑它。

项目中还有一个名为scaffolds的文件夹,里面存放的不同布局的模板。我希望所有文章都有分类属性,所以需要在post.md中添加categories:一行。这里在---之间包括的代码是文章的属性,将会由Hexo渲染为实际的样式。我们的博客文章需要写在这一部分的后面。

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

这里我写了一篇小文章,介绍了一点经验。

---
title: 在客户端上登录微软邮箱时提示您输出的用户名或密码不起作用的解决办法
date: 2017-11-13 18:42:56
tags:
 - 疑难杂症
 - 电子邮箱
categories:
 - 疑难杂症
---

有些同学可能会在用微软邮箱登录outlook或者其他邮箱客户端的时候,明明输入的是正确的用户名和密码,但是却提示“您输入的用户名或密码不起作用”。其实原因很简单,这是因为你的微软账号开启了二次验证,而邮箱客户端并不支持这个功能。

当然解决办法也很简单,登录[微软账户更多安全选项](https://account.live.com/proofs/Manage/additional)中,然后找到应用密码这个,将应用密码作为邮箱密码输入到邮箱客户端中即可解决问题。当然对于Xbox等无法登陆的问题,也可以使用这个方法来解决。

写完之后,使用下面的命令启动本地服务器,然后访问http://localhost:4000/查看一下博客效果。

$ hexo server

博客效果

添加Disqus评论支持

静态博客因为是静态的,所以没有办法支持评论等功能。不过很多第三方评论服务都可以通过添加JS代码的方式让博客可以支持评论功能。原来国内比较著名的第三方评论系统有多说,可惜因为无法盈利已经关闭了。Hexo官方支持Disqus,一个国外的第三方评论平台。当然,为了使用Disqus,首先你需要去注册一个账号,并添加一个网站。

默认情况下,Hexo的默认主题landscape是支持Disqus的,相应的源代码可以查看themes\landscape\layout\_partial/after-footer.ejs文件。当主配置文件中存在disqus_shortname选项,而且相应URL正确配置的话,Hexo就会自动显示Disqus评论。这是我的配置,这里的名称是我的网站的名称。

disqus_shortname: yitian-static-blog

成功配置之后,在每篇文章下面,应该就会看到一个Disqus评论框了。

静态资源处理

假如整个博客只有少量图片等静态资源,我们可以在source文件夹中新建一个image文件夹,然后将图片放置进去,在文章中使用MarkDown标准格式![](/image/XX.jpg)即可访问。但是假如大部分文章都需要图片,那么这种方式就不太适用了。

这时候,我们可以在配置文件中设置post_asset_folder选项为true。这样在创建文章时,Hexo会同时创建一个和文章同名的文件夹,我们可以将每个文章单独的资源放入该文件夹,然后以相对路径的方使引用。

post_asset_folder: true

举个例子,假如图片名为hello.jpg,已经放置到文章同名的文件夹中,那么在文章中引用图片,可以使用标准Markdown形式![hello](hello.jpg)。不过这种方式仅适用于在文章页面下,假如在主页或者归档页面查看文章,由于相对路径不同,图片是无法正常显示的。

对于这个问题,我们需要使用Hexo的标签插件来解决。这个插件在Hexo 3中已经包括到核心包中,所以我们可以直接使用,使用语法如下。如果图片名或标题有空格,需要使用双引号包括。

{% asset_link 图片名 图片标题 %}

这样一来,不管在哪个页面,图片都可以正常显示了。

发布博客

发布博客有很多种方式,如果你有一个自己的服务器,可以选择FTP、RSync、Git等多种方式发布到服务器。当然这里为了省事就直接发布到Github Pages上。由于Github Pages要求静态网站在项目的根目录或者docs目录下,所以这里还要对项目进行一下小修改,在配置文件中将发布路径改为docs

public_dir: docs

然后生成静态页面。

$ hexo generate

然后将所有代码一起提交到Github上,并在设置中选择docs选项,然后保存。

Github Pages设置

然后访问Github Pages的路径,就会发现项目已经出现了,当然样式都是乱的。因为我们还没有设置合适的URL。本地开发的话,路径直接就是域名。但是Github Pages的路径一般都不是以域名开头的,所以需要我们按照自己的项目路径进行修改,下面是我的项目配置。

url: https://techstay.github.io
root: /my-static-blog/

修改完毕之后别忘了执行hexo generate重新生成静态文件,然后再次提交,就可以发现这次项目完美的出现了。

当然这篇文章仅仅介绍了Hexo的一点点知识,Hexo还有丰富的主题、插件可供探索。这里就仅仅抛砖引玉,各位如果有兴趣的话请自行探索吧!最后附上我的静态博客地址https://techstay.github.io/my-static-blog/,欢迎大家查看!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用Hexo制作自己的静态博客 的相关文章

  • Hexo在Github中搭建博客系统(7)万网域名解析到Github Pages

    在万网上买域名是相对便宜的 如何直接将域名指向Github Pages呢 一 购买域名 选域名 登录阿里云万网 根据你自己想好的域名去查询那些网站可以购买 如果是个人网站 一般以姓名全拼进行注册 拼音简写就别考虑了 现在的域名贩子基本上把前
  • Ubuntu18.04下使用Hexo框架搭建个人博客

    欢迎访问我的个人博客 xff0c 传送门 一 安装node js 说明 xff1a 安装node js的原因 xff1a Hexo框架是基于node js 1 推荐使用nvm安装速度快 xff0c 也可自行百度其它方法 wget qO ht
  • Ubuntu16.04安装hexo

    在Ubuntu16 04中安装hexo出现一系列的问题 xff0c 总结一下安装hexo的步骤 首先安装noejs xff0c Ubuntu源中的nodejs时旧版本 xff0c 所以需要在安装后更新nodejs span class hl
  • 使用hexo+github搭建免费个人博客详细教程

    Windows环境下Git安装 配置SSH key 安装node js npm 安装Hexo及配置 发布博客 前言 使用github pages服务搭建博客的好处有 xff1a 全是静态文件 xff0c 访问速度快 xff1b 免费方便 x
  • Hexo使用细节及各种问题

    解决markdown图片不显示 返回403 forbidden 添加本地图片无法显示 修改文章page模板 同时发布同步到多个仓库站点 Github coding 图片不显示 在使用过程中 xff0c 会发现有的引用图片无法显示的问题 但是
  • Hexo/Github.io 配置腾讯云CDN

    前言 使用Github io搭建自己的博客时可能会遇到访问速度不理想的情况 xff0c 可以采用如下几种方案解决 xff1a 将Hexo部署到阿里云 xff08 点击查看 xff09 xff0c 直接访问阿里云 xff0c 但这种方式会暴露
  • npm install hexo-renderer-sass时报错解决办法

    npm install hexo renderer sass时报错 在安装配置hexo博客的时候 xff0c 有的主题需要安装 span class token function npm span span class token func
  • hexo next 博客,jsdelivr cdn报错无法访问

    一 博客环境 我的hexo版本是5 4 0 xff0c next版本是7 8 0 因 jsdelivr cdn报错导致博客首页无法访问 二 修改next cdn 首先进入hexo博客首页 xff0c F12查看报错的 jsdelivr 地址
  • 域名绑定Github个人博客

    首先自吹一波 我个人的博客网址 我的个人博客 1 个人博客搭建 基础的建站工作以下一套视频足以KO 底部音乐栏可以研究一下帮助文档 帮助文档其实非常的重要 很多问题全都在最新版本的帮助文档里面 之前查了网上很多答案都不太对 最后研究了一下帮
  • 时隔两三年之后重新思考“写博客”的意义所在,为什么还是选择使用csdn

    重新开始写博客的理由 在推上看了很多大佬的博客 如迟先生 他们的博客上并不会包含很多基础内容 更多的都是个人实践 论文阅读 底层原理 然后回想我大学时期写博客的动机 只是为了从阅读量和排名中获取满足感 那个时期写的博客 不例外如抄书 转载
  • 用Hexo制作自己的静态博客

    博客是一个老东西了 如果我们想写博客的话 有两种选择 第一种是在博客网站上 例如QQ空间 新浪博客 简书等网站上申请账号 然后编写博客 第二种就是自己找服务器搭一个博客 搭建博客也有两种选择 第一种是搭建动态博客 这方面最流行的就是Word
  • 【Hexo github】进行SSH认证时报错git操作提示git@github.com: Permission denied (publickey)(已解决)

    进入git bash界面然后 SSH keys 1 git config global list 2 git config global user name yourname git config global user email ema
  • Hexo博客优化之Next主题美化

    前言 有了前面几篇博客的介绍 我们就可以很容易的搭建并编辑我们的博客了 不过既然是属于自己的博客网站 自然也就想让其更加美观 更有意思 所以呢我下面介绍一下Hexo博客的主题美化操作 1 Next主题 Hexo博客支持很多主题风格 其中Ne
  • 2021——使用hexo+github搭建个人博客

    文章目录 一 必备软件安装 二 hexo本地搭建博客 2 1 本地生成博客内容 2 2 文章写作 自动摘录 2 3 博客发布到网上 2 3 1 配置主题模板 2 3 2 配置自己的远程仓库地址 2 3 3 发布github博客 2 4 主题
  • 怎么建立一个自己的博客

    怎么建立一个自己的博客 1 写在开头 其实我自己写的文章也不多 只是看到有些东西会做一下记录 所以部署一个自己的博客来记录这些东西也就会方便很多 而Hexo框架的博客使用方便对电脑要求也不高 并且有很多可以使用的主题 所以就用它把 先来看看
  • 基于Hexo和Butterfly创建个人技术博客,(13) 第一阶段总结,Hexo和Butterfl详细配置

    Butterfly官方网站 请 这里 Hexo官司网查看 这里 前面通过10节的课程梳理了hexo和butterfly用到的所有知识 虽经过了梳理但内容还是比较多 所以本章给出一个前10章的一个小结 因涉及一些个人信息 所有部分配置项换成了
  • Hexo个人博客主题配置

    系列文章目录 1 Hexo Github Gitee 搭建个人博客 2 Hexo个人博客主题配置 目录 系列文章目录 配置站点信息 修改主题 Next主题配置 样式 favicon avatar rss 代码块 回到页面顶部 阅读进度条 G
  • 530 Please login with USER and PASS.

    安装 npm install save hexo deployer ftpsync 配置 deploy type ftpsync host xx xx xx xx user bxu123123 pass xx11123 remote htd
  • [教程]Hexo + Github 搭建自己的专属博客

    教程 Hexo Github 搭建自己的专属博客 文章目录 教程 Hexo Github 搭建自己的专属博客 1 安装Git和NodeJS 2 安装Hexo 3 加载主题 4 修改主题配置 5 将博客部署在GitHub上 6 写文章并上传
  • 如何为 Hexo 实现选项卡式代码块标签

    我正在尝试在 hexo 中创建选项卡式代码块 作为标签插件 但我不知道在哪里放置我的 js 函数 我想我可以使用加载该函数js 助手 https hexo io api helper html但我不知道在哪里包含助手 我尝试将其添加到标签插

随机推荐

  • Hbase常用SQL命令

    这里写目录标题 Hbase常用SQL命令 1 启动hbase 2 进入hbase 3 hbase查看数据表 4 hbase建表语句 5 hbase禁用表 启用表 6 hbase添加单行数据 7 hbase文档添加数据 8 hbase扫描表
  • 分块矩阵求行列式

    分块矩阵求行列式 注意 第二个公式有误 将矩阵写为 P A B B A 那么det P det A det A BA 1B def A BA 1B a 1 1 A a b1 B a b2 a 0或a 1均可构造无穷多解 def A det
  • 基于Redis的原子操作优化秒杀逻辑

    对于缓存中间件Redis 相信各位小伙伴或多或少都有听说过 甚至实战过 本文我们将基于SpringBoot整合Redis中间件 并基于其优秀的 单线程 特性和原子操作实现一种 分布式锁 进而控制 高并发情况下多线程对于共享资源的访问 最终解
  • 递归法取硬币java_递归算法

    递归算法 在函数或子过程的内部 直接或者间接地调用自己的算法 特点 1 递归就是在过程或函数里调用自身 2 在使用递归策略时 必须有一个明确的递归结束条件 称为递归出口 3 递归算法解题通常显得很简洁 但递归算法解题的运行效率较低 所以一般
  • 线程池合理估算大小

    分配线程池究竟设置多大还是要看你的执行的任务 不要单方面看 线程任务分为Cpu密集型和IO密集型 混合型 主要看系统运行的任务是什么类型的 主要分为3种类型任务 CPU密集型和IO密集型 混合型任务 cpu密集型 一般分配N 1 什么是cp
  • Java 面试题(什么是分布式架构)

    Java 的分布式架构是指将应用程序分为不同的部分 这些部分可分别部署在不同的计算机上 它们相互之间通过网络进行通信和协作 从而共同完成某些任务 分布式应用程序通常需要满足以下几个特点 1 模块化 将应用程序模块化 将不同的功能放在独立的模
  • idea2022.2.2体验

    IntelliJ IDEA 2022 2 最新变化 IntelliJ IDEA 2022 2 为远程开发功能带来了多项质量改进 使其更美观 更稳定 从 v2022 2 开始 IntelliJ IDEA 使用 JetBrains Runtim
  • Java 构造方法与静态方法全解析

    构造方法 作用 一个类 可以有多个构造函数 构造函数的主要作用 一是用来实例化该类 二是 让该类实例化的时候执行哪些方法 初始化哪些属性 注意事项 如果你没写无参构造方法 系统会给你提供一个无参构造方法 如果只写了有参的构造方法 这时系统不
  • QT信号和槽参数传递

    写了一个这样的信号 void caculateReady QList
  • 异常检测专栏(三)传统的异常检测算法——上

    前言 在上一篇推文中 我们简要介绍了异常检测常用的几种数据集如ImageNet CIFAR10 CIFAR100 MNIST等 接下来 我们将基于传统的异常检测算法分为上 下两部分 逐一介绍不同类别的方法 本教程禁止转载 同时 本教程来自知
  • 基于 Postman 接口自动化场景设计

    一个强大的工具 基于 Postman 接口自动化场景设计 使用Xmind或者Yaml 设计 postman 自动化场景 引言 postman是一个比较轻量级的接口测试工具 在单个接口的测试表现优秀 在批量测试接口方面则提供了Runner C
  • ajax数据类型json,Ajax请求不与数据类型“jsonp”或“JSON”

    我想使用JSON作为Ajax请求 使用jQuery 的返回类型 但我的代码总是导致错误 我试过改变json和jsonp之间的MIME类型 但无济于事 Ajax请求不与数据类型 jsonp 或 JSON 我也不确定是否正确格式化数据 部分 我
  • 如何让HTTPS站点评级达到A+? 还得看这篇HTTPS安全优化配置最佳实践指南

    文章目录 0x00 前言简述 SSL TLS 简单说明 SSL TLS 相关术语一览 0x01 HTTPS安全实践指南 1 证书 certificate 与私钥 Private key 2 中间件SSL TLS服务器配置 3 SSL TLS
  • [news] Lion: The Complete Macworld Review

    the complete version is from http www macworld com article 161026 2011 07 osx lion review html In a decade Mac OS X evol
  • js常用数组操作方法

    1 concat 用于连接两个或多个数组 该方法不会改变现有的数组 仅会返回被连接数组的一个副本 2 join 用于把数组中的所有元素放入一个字符串 元素是通过指定的分隔符进行分隔的 默认使用 号分割 不改变原数组 3 push 可向数组的
  • 【QT开发笔记-基础篇】

    本节对应的视频讲解 B 站 链 接 QT开发笔记 基础篇 第二章 常用控件 2 12 表格控件 QTableWidget 1 QTableWidget 是 Qt 中的表格控件 可以行列的形式来展示数据 1 属性和方法 QTableWidge
  • 白话操作系统1.1 - CPU - virtualization - 虚拟

    1 桃子之影分身 three easy pieces操作系统一书中 教授谈起了分桃子的事情 说实际只有一个桃子 但却要分给很多猴子 那么问题来了 如何让每个猴子都能开开心心的分到桃呢 其实就是用一些手段啊 捏造出虚拟的桃子 虚拟的东西嘛 可
  • ECharts的讲解

    目录 什么是数据可视化 ECharts的介绍 ECharts的特点 ECharts的基本使用 操作步骤 通用配置title的相关配置 通用配置tooltip的相关配置 触发类型 trigger 触发时机 triggerOn 格式化 form
  • python 概率分布_Python中的联合概率分布

    要通过numpy中的m矩阵生成 可以将两个适当形状的数组相乘 如果数组x是1的n 而数组y是 则它们的乘积x y将是n 由m 在 下面是一个例子 说明如何用最初是一维的数据来处理这个问题 我使用随机值 如果是概率分布的话 应该对其进行规范化
  • 用Hexo制作自己的静态博客

    博客是一个老东西了 如果我们想写博客的话 有两种选择 第一种是在博客网站上 例如QQ空间 新浪博客 简书等网站上申请账号 然后编写博客 第二种就是自己找服务器搭一个博客 搭建博客也有两种选择 第一种是搭建动态博客 这方面最流行的就是Word