Fork me on GitHub

BLOG-使用hexo从0开始搭建自己的博客

字数统计: 2.6k字   |   阅读时长≈ 9分

第一点：没有第一点

不知道从哪里开始，反正先开始吧，先把第一点写出来，后面的再慢慢想办法。

第二点：关于hexo

2.1 什么是hexo？

Hexo 是一个快速、简洁且高效的博客框架，可以让你快速建立一个博客。

2.2 hexo的优点 ？

快速： Hexo 使用 Node.js 编写。得益于 Node.js，使得 Hexo 生成上百个页面游刃有余。

支持Markdown： Hexo 支持 GFM (GitHub Flavored Markdown) 的大部分功能。如果你不喜欢 Markdown ，你还可以换一个 Hexo 渲染插件。

部署方便：只需要一条指令就可以部署到 GitHub Pages、Heroku、Coding Pages 等其他网站。

插件丰富：Hexo 有许多插件，可以进行各种操作。

学习 Hexo 之前，你只需要有编写Markdown文本的能力就已经可以完成80%的工作了。

第三点：安装hexo，以及相关依赖

相关教程链接

因为我的Windows电脑上之前就因为开发的原因安装过git和Node.js，所以这里就直接引用Easy 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
#下面介绍一些 Hexo 的基本命令。
#hexo init [folder]
这个命令是 Hexo 初始化命令。 [folder] 表示你要初始化的文件夹。如果你要初始化本地，直接 hexo init . 。

#hexo new [layout] <title>
这个命令是新建文章或页面用的命令。其中 [layout] 表示他的模板（即页面或者文章）， <title> 表示标题。

用法：
hexo new post 001 ，表示新建了一个标题为 001 的文章。
hexo new page 001 ，表示新建了一个标题为 001 的页面。
如果你不想在终端中新建文章或页面，可以直接在 博客根目录/source/_post/ 目录下创建 Markdown 文件写文章。或者在 博客根目录/source/ 目录下创建一个文件夹，然后在新文件夹里创建 index.md 写页面即可。
提醒
当你新建页面后，页面的链接就是你页面所在的文件夹的名字。
例如：我在 博客根目录/source/ 下新建了一个名为 test 的文件夹，然后在 test 文件夹下写 Markdown 文件，那么这个页面的链接就是 网址/test 。

#hexo server
当你要在本地查看网站的时候，就可以用这个命令。
默认在 http://localhost:8080/ 这里，可能会不同，注意提示信息即可。
提醒
如果你想要换端口号（上面的 8080 就是端口号），可以在终端里输入 hexo s -p 端口号 。

#hexo generate
这个命令是生成网站静态文件的时候用的，生成后网页将会放在根目录下面的 public 文件夹里。

#hexo deploy
这个命令用来部署网站，使用此命令将会把生成好的页面（即 public 文件夹里的内容）部署到指定的地方上。

#hexo clean
这个命令用来清空 public 文件夹。

#hexo version
这个命令用来输出你所使用的 Hexo 目前的版本号。
1
2
3
4
5
# 新建一个文件夹
# 我在桌面新建了一个名为“iyuyi”的文件夹
# 使用vscode打开此文件夹，并打开一个终端，在终端执行初始化博客命令
# eg：hexo init <your_blog_name>
hexo init iyuyi_blog

image-20231219145536125

然后就可以在/<桌面>/iyuyi文件夹下看到你的博客的基础文件了。

image-20231219145957400

接下来我们对刚初始化完成的博客进行一下基本配置：

没错，就是在 _config.yml 这个文件里配置！

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词。
author 您的名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description 主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。

image-20231219151344149

以上只是配置中的最基础的一部分，详细的配置请查阅官方配置文档

第五点：使用vscode终端，在本地运行博客

在以上的教程中我们对博客进行了初始化和基本配置。接下来我们将在本地把博客运行起来，然后通过浏览器访问，查看博客渲染效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#初始化博客
#D:\iyuyi\iyuyi_blog> hexo generate
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 286 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2023/index.html
INFO  Generated: archives/2023/12/index.html
INFO  Generated: index.html
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: js/jquery-3.6.4.min.js
INFO  Generated: css/style.css
INFO  Generated: 2023/12/19/hello-world/index.html
INFO  Generated: css/images/banner.jpg
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  11 files generated in 519 ms

# 启动博客服务，然后就可以在浏览器中实现如下效果了。
# 如果需要配置更加酷炫的渲染效果可以去学习如何为博客配置主题
#D:\iyuyi\iyuyi_blog> hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

image-20231219162247347

第六点：寻找你自己喜欢的风格的hexo主题（也是最重要的一点）

寻找你自己喜欢的风格的hexo主题。hexo提供了非常多有趣的主题总有一款适合你。

  • 为什么首先要选择合适的自己的博客主题呢？主要有以下几点：
  1. 外观和布局：博客主题决定了你博客的外观和布局，它反映了你的个人品味和风格。一个吸引人、独特的主题可以给访问者留下深刻的印象，增加他们对你博客的兴趣和留存时间。
  2. 用户体验：一个好的博客主题应该提供良好的用户体验，使访问者能够轻松地阅读和浏览你的博客内容。主题应该具备良好的导航结构、清晰的文章排版、快速的加载速度等特点，以提供顺畅的浏览体验。
  3. 响应式设计：随着移动设备的普及，响应式设计成为一个重要的考虑因素。一个响应式的博客主题可以自适应不同屏幕尺寸，使访问者无论使用电脑、平板还是手机都能够获得良好的浏览体验。
  4. 功能和扩展性：博客主题通常会提供各种功能和布局选项，如多种文章展示方式、标签分类、社交媒体集成等。选择一个功能强大、可扩展的主题可以满足你的个性化需求，并随着博客的发展做出相应的调整和扩展。
  5. 更新和支持：选择一个受欢迎且活跃更新的博客主题可以保证你的博客在技术方面保持最新的状态，并得到相关的支持和帮助。这样可以避免一些潜在的安全问题和技术难题。
  6. 当然了，最最最重要的是，自己喜欢，毕竟热爱可抵岁月漫长。
  • 以下提供了博主本人在搭建博客时候寻找的几个热门的hexo主题，为了方便大家参考，大家可以看一下每个主题的demo。或者去hexo[主题官网](Themes | Hexo)寻找自己喜欢的主题
Yun–yunyoujun

A light & fast & cute theme for Hexo.

其功能齐全，轻量快速，UI养眼。如果你去原作者的站点看看，你还会发现确实很cute。

首屏是一个左右错落排列的名字，嗯…有那啥轻小说封面那味了。

Shoka–Ruri Shimotsuki

A simple hexo theme for YumeShoka.

一个偏日系、梦幻精致的主题，一如博主的名字，『霜月 瑠璃』。一看就是老二次元了

Matery-blinkfox

A simple hexo theme for Matery .

一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。github 51.K Star。

Butterfly

A simple hexo theme for Butterfly.

一款基於hexo-theme-melody修改的主題。本博客也将选择这个主题。

安装教程请点击这里。

第七点：将装点好的博客部署到其他人可以访问地方

部署到 GitHub

准备工作

如果没有账号，请点此前往 GitHub (opens new window)注册一个 GitHub 账号。
新建一个公开仓库，仓库名格式为 your_username.github.io 例如你的 GitHub 用户名是 iyuyi ，那么你的仓库地址名称就应该是 iyuyi.github.io
创建完成后记下该仓库的 HTTPS/SSH 地址，一般格式为 https://github.com/your_username/your_reponame.git 在下一步会用到。

安装部署插件(opens new window)
1
2
npm install hexo-deployer-git --save
npm install hexo-server --save
配置 Git

如果你只是安装好了 Git 但没有配置过你的 Git ，那么现在需要做的第一件事情就是设置你的 Git 用户名和邮箱。 在 Git Bash 中执行以下两条命令配置你的用户名和邮箱，这里建议用户名和邮箱与你的 GitHub 用户名和邮箱保持一致。

1
2
git config --global user.name "Your_user_name"
git config --global user.email <Your_email@example.com>
提醒

每次 Git 提交时都会附带这两条信息，用于记录是谁提交的更新，并且会随更新内容一起被记录到历史记录中。简单说，是用来标记的你的身份的～

配置站点 _config.yml 文件
1
2
3
4
5
deploy:
  type: git # 类型填git
  repo: <repository url> # 你的Github仓库地址
  branch: master # 分支名称。默认填写 master 如果您使用的是 GitHub ，程序会尝试自动检测。
  message: # 提交信息可以自定义，不填的则默认为提交时间
发布到 GitHub

在本地的 Hexo 站点根目录下，执行如下命令即可部署到 GitHub Pages 上。

1
2
3
4
5
6
7
8
$ hexo clean
$ hexo generate

#部署到本地预览(可选)
$ hexo server

#部署到github
$ hexo deploy
提醒

如果是第一次使用，会弹出一个登录框，需要登录你的 GitHub 账号。

赏

谢谢你请我吃糖果

支付宝
微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
linux
shell
docker
openstack

很惭愧

只做了一点微小的工作
谢谢大家