Hexo 搭建个人博客

1、安装Node.js环境

node下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 确认node.js安装成功：运行下面两个命令打印版本号即可
node -v
npm  -v

# 安装 Node.js 淘宝镜像加速器 （cnpm）
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 修改 node 类库默认安装位置
# 默认是在 C:\Users\lingStudy\AppData\Roaming\npm

npm config set prefix "D:\nodejs安装路径\node_global"
npm config set cache "D:\nodejs安装路径\node_cache"
# 查看修改是否成功
npm root -g
# 然后把D:\install\node\node_global配置到环境变量的 PATH 下即可
2、安装版本控制工具 Git ：

下载地址

1
2
3
4
5
6
7
8
9
# Git一些重要配置
git config --global user.name "lxxxxdy"  #github用户名(如果想部署到github上的话)
git config --global user.email "xxx@gmail.com"   #邮箱

# 生成SSH公钥并添加到github，实现免密码登录
# 1、生成公钥 2、把公钥放在github中（google）
ssh-keygen -t rsa
//连接github,如果成功，将出现你的用户名
ssh -T git@github.com
3、Hexo安装

Hexo 官网

1
2
# 全局安装
npm install hexo-cli -g

输入hexo -v。 如果显示hexo不是内部或外部命令（其中fsevent是mac系统的，用来检测文件的更改。）

其实并没全局安装，查看安装的hexo的位置

在该目录下运行 hexo -v。自行添加至环境变量。

4、创建本地站点

新建某一文件夹，在该目录下初始化，以后发布的内容将保存在这个文件夹下。命令建议在Blog文件夹下操作，如果遇到解决不了的问题，直接删掉Blog文件夹重新来过（记得保存自己的.md）。不需要手动安装依赖包。

1
2
3
hexo init  
#启动项目服务，s:server
hexo s

此时，访问 http://localhost:4000/ 即可看到 hexo 默认的页面和一篇“Hello World”默认生成的文章
至此，Hexo 项目搭建成功！

项目主要文件目录介绍：

1
2
3
4
5
6
7
8
9
10
├── .deploy       # 需要部署的文件
├── node_modules  # 项目所有的依赖包和插件
├── public        # 生成的静态网页文件
├── scaffolds     # 文章模板
├── source        # 博客正文和其他源文件等都应该放在这里
|   ├── _drafts   # 草稿
|   └── _posts    # 文章
├── themes        # 主题
├── _config.yml   # 全局配置文件
└── package.json  # 项目依赖信息

博客保存在./source/_posts中，在此文件夹下写.md文件

1
2
# 新建一篇名为 第一篇Hexo blog文章 的文章
hexo n "第一篇Hexo blog文章"  //new

拓展：快速编写文章

新建文章时每次都要执行 hexo new “blogName” 命令很麻烦

可以直接到根目录 /source/_posts 目录下，创建一个.md 文件进行编写，在文件的顶部添加front-matter就可以了。

之后，使用 hexo g –d 命令推送

5、博客托管到github

需要安装扩展：npm i hexo-deployer-git

注意：配置文件.yml中，冒号后有一个空格

注意点：在Github创建的项目名字为username.github.io。username是github名字，比如我的是c-parrot

如果是其他，如pilot.github.io，可以部署成功，但是会出现不限于以下问题：

1 找不到资源404：需要手动开通Github Pages：在项目的setting，Pages中开通。开通后site名字默认为https://c-parrot.github.io/pilot.github.io ，可以绑定到自己的域名

2 博客网页没有调用css

注意一旦我们使用了自定义域名，github就会在repo的根目录下增加一个名为CNAME的文件，这个文件只有一行内容，就是域名。我们在进行hexo build之前，必须将该文件同步到本地，否则hexo进行部署时，会从repo中删除掉这个文件，最终导致gitpages无法显示。

写博客

Hexo基本使用

front-matter

  • 在文章开头写时，在yaml里不要写“- - -”。
  • yaml中键值对中，值与冒号之间需要有空格
  • 配置免输入github账号密码：编辑配置文件 _config.yml, 将 deploy的 https协议改为使用 git协议。
  • 文章开头front-matter中，值不能写类似”[a]b“这样的，改为”\[a]b“

title：

urlname:

sticks：

categories:

cover:

date:

tags:

其它

Hexo博客写文章及基本操作

front-matter使用详解，拓展：当前的主题中没有分类页和标签页怎么办

  • 布局类型 layout默认为 post，可以在站点配置文件修改 default_layout 参数来修改默认布局。当我们创建不同布局的md文件时，它们会存储在不同路径。
1
2
$ hexo new [layout] <title> //在根目录下，运行命令。创建一个page
$ hexo new page "我的页面"
  • 如果我们不想某一篇文章显示在页面上，可以创建草稿。使用 hexo n draft draft1命令将在 source\目录下创建 _drafts目录，并生成一个 draft1.md文件。
  • 发布草稿后，通过命令：hexo publish <file_name>。会将文稿移动到post文件夹中。

一般发布文章或者修改博客后需要这些操作：清除缓存静态文件>生成静态文件>启动服务器，测试没问题后再部署。

1
2
3
// 我们可以写成一条命令
$ hexo clean && hexo g && hexo s
$ hexo clean && hexo g && hexo d

其它

  • 我们可在启动服务器时加上 --draft 参数来查看草稿。
1
$ hexo server --draft
  • 还可以在站点配置文件中把 render_drafts 参数设为 true 来预览草稿。

正常情况下，每次启动本地端口前只需更新静态文件即可。Hexo引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。

如果发生了一些错误，可以先删除静态文件，然后再重新生成。hexo g命令还提供了一个参数 -f提供以类似效果。这样做的缺点就是当文章数变多以后渲染时间会更久一些。

hexo还提供了一些标签插件支持你引用其他资源，如视频、iframe等。不过不常用，有兴趣的朋友可以自己了解下。

改写文章后，不需要重新启动hexo，保持 hexo s，刷新网页会自动更新。

标记语言：markdown

编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown完全兼容html，也就是可以在文章里直接插入html代码。比如给博文添加音乐，就可以直接把音乐的外链html代码插入文章中。具体语法参看：Markdown 语法说明(简体中文版)

折叠内容：这也是H5的语法

1
2
3
4
5
<details>
<summary>Title</summary>
//这里要空一行。上面两行会自动渲染（typora)，下面和上面分开
正文!!!
</details>

编辑器：Tyora

快捷键：

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
标题：Ctrl+1、2、3...对应一、二、三...级标题（光标定位到需要设置为标题的行，按快捷键）

加粗：Ctrl+B（选中要加粗的文本，按快捷键）

斜体：Ctrl+I（选中要设置斜体的文本，按快捷键）

下划线：Ctrl+U（选中要加下划线的文本，按快捷键）

删除线：Alt+Shift+5（选中要加删除线的文本，按快捷键）

代码片段：Ctrl+Shift+`（选中要设置为代码片段的文本，按快捷键）

代码块：Ctrl+Shift+K（任意位置按快捷键，选择编程语言然后在代码块中输入代码）

切换到下一行：Ctrl+Enter（任意位置按快捷键，在代码块中可以跳出代码块另起一行）

链接：Ctrl+K（先复制链接，然后选中要加链接的文本，按快捷键。Ctrl+左键点击文本可跳转到对应链接）

取消格式：再次按相同的快捷键即可

有序列表：数字+点+空格

任务列表：加号或减号+空格

切换到列表下一行：Space+Enter

嵌套列表：按Tab键

退出列表：按 Shift+Tab

插入表格：Ctrl+T

引用：输入>后面加空格，或者Ctrl+Shift+Q

你可能不知道的 Markdown 骚操作（附最新GFM规范）

其他：

编辑器：

  1. VS Code：原生就支持高亮 Markdown 的语法，但想要实时预览还需要选择 Markdown: Open Preview to the Side 命令实现，相关教程请点击此处，点击此处 访问 Visual Studio Code 官网
  2. 在线编辑器：https://markdowner.net/ 待测试
  3. vditorVditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。

图床：用来为博客提供图片

Github + jsdelivr + PicGo

如何利用 Github 搭建自己的免费图床？

最后按文章加上cdn连接，picgo上传完成后，会自动将图片的链接地址存入剪贴板，可以通过Ctrl+v将链接插入到markdown文件里。

jsdelivr: A free CDN for Open Source CDN - Content Delivery Network - 内容分发网络，依靠部署在各地的边缘服务器，使用户就近获取所需内容，提高用户访问响应速度。CDN的关键技术主要有内容存储和分发技术。

jsdelivr在国内访问速度不佳。镜像地址：https://jsdelivr.codeqihan.com，可以用jsdelivr.codeqihan.com替换cdn.jsdelivr.net、fastly.jsdelivr.net、gcore.jsdelivr.net、test1.jsdelivr.net、testingcf.jsdelivr.net，本CDN可以加载图片，字体（包括私人字体）等文件，但不能加载违法违规的内容。

以github为例，只需要通过符合 JSDelivr 规则的 URL 引用，即可直接使用 Github 中的资源。

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
// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file


// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js


// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js


// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/username/repo/file


// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js


// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

图片迁移

picgo-plugin-pic-migrater ：将你markdown文件里的图片从一个地方迁移到另外一个图床的PicGo插件。

After migrating, a new markdown file will be written in the same folder. So you should configurate this new file name’s suffix first.

  • 新文件名的后缀。举个例子，如果你原本的文件名为 2019.md 并且你将 newFileSuffix 设置成 _new，那么迁移过后，将会生成一个叫做 2019_new.md 的新文件。
  • include：如果你配置了 include 字段，那么migrator只会迁移包含这个字段值的图片地址。举个例子，如果你将 include 配置为 sinaimg.cn，那么migrator只会迁移那些URL或者路径里带有 sinaimg.cn字符串的图片。
  • 旧内容写入新文件：如果你吧 oldContentWriteToNewFile 配置成 true，那么旧的文件内容将会写入新的文件中，而迁移的结果将会写入旧的文件中。

主题系列：

Butterfly

主题：https://butterfly.js.org/

升級方法：在主題目錄下，運行 git pull

卸载 hexo 插件https://www.dazhuanlan.com/2019/10/12/5da110cdd9a7b/

1
2
npm list
npm uninstall hexo-qiniu-sync@1.4.7
Butterfly主题美化

hexo文档配置

Hexo 永久链接管理

新建文章模板修改

小康的 butterfly 主题使用文档

主题优雅魔改系列：作者的css+说说+扩展标签

Butterfly 安裝文檔(二) 主題頁面

自定义侧边栏：网站信息与访客地图

小冰插件包

hexo每天自动提交网站URL到搜索引擎

Hexo博客访问优化日记

使用 Vercel 来加速 Hexo 博客

Butterfly 主题美化日记

平滑升级魔改后的 Hexo 主题

hexo+Butterfly主题美化

优美主题鉴赏

遇见0和1の个人客栈

CSONG

在Butterfly 安裝文檔(四) 主題配置-2内容的基础上。

  • 添加评论模块：oauth中两个地址都是博客地址，如：https://c-parrot.github.io/ 后面有个斜杠

    踩坑：在文章中登陆github出错404原因是创建的oauth page中的application description描述是中文的，改成英文后约十秒可再次登陆授权。相关解决方案：登录报错/?

  • 添加搜索功能：hexo搭建的博客中添加搜索、评论功能、文章字数统计功能
    algolia在左侧的Indices可以看到自己的文章已经投上了。后续新建文章是自动投还是手动？
    命令：hexo algolia

  • 谷歌网站收录博客 
    1
    2
    npm install hexo-generator-sitemap --save
    hexo g

    在public文件夹下多出sitemap.xml。在_config.yml中填上以下信息（不知道要不要填）

    1
    2
    3
    #hexo sitemap
    sitemap:
      path: sitemap.xml

    修改以下信息：

    1
    2
    3
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: https://c-parrot.github.io/

    谷歌搜索中心->Search Console->网址前缀填写网址（有网域填网域，更好）->下载文件放入博客根目录public文件夹下。

    1
    hexo d

    检查github是否上传成功。之后回到谷歌验证。再次打开Search Console，点击左侧站点地图，输入sitmap.xml，提交。几个小时后，在上方搜索栏中输入博客地址检查是否被谷歌收录成功

MengD(萌典）

MengD(萌典)

melody

melody

主题参考

你见过的最棒的个人博客界面是什么样的？

参考文章：

  1. Hexo+gitee：30分钟搭建一个自己的个人博客网站 欢迎友链呀
  2. 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo
  3. Hexo文档
  4. Hexo使用时的问题合集