wqllyx的网站
0%

使用hexo搭建自己的博客

发表于 更新于

博客搭建的步骤

要搭建个人博客，首先要了解具体要实施哪些步骤，需要哪些工具，在了解了这些之后，再根据自己的需要，就可以很清晰的搭建自己的理想博客了。

前置知识

  • 静态网站和动态网站

静态网站：内容如果不被发布者修改源代码后，重新编译，重新生成。网站上的资源永远不会改变。（比如，一篇博客文章，不与用户有任何数据交互。）

动态网站：底层与数据库交互，有一些放在数据库中的动态资源是可以随着你的请求而产生变化。（比如: 一个登录页面。需要与底层数据库进行数据交换。）

  • 网页生成器

我们在自己的电脑上写完了自己文章之后，我们想要把他放到网上供别人在线查看的话，基本上用户都会使用基于web的浏览器在线浏览你的博客。然而浏览器都是基于html的web页面。对于md格式的文本文件，浏览器无法直接展示在他的界面上。（也不是无法展示，而是他会以纯文本文件的形式展示。），如果你直接把这些文件放到网上（比如一个公开服务器上或者托管平台上）供其他人访问，他们看到的只能是界面丑陋，晦涩生硬的纯文本。

而html就是用来渲染这些文本，让他们更生动（比如有颜色，有图片，格式多样）更方便用户阅读。所以，我们写的博客要是能够转换成web页面，然后再放在网上让别人阅读，那就好了。

我能想到的最笨的写博客的方法就是，你直接把你的内容嵌套到html文件里。这样也就不用任何第三方工具了。（但这既费力又需要很强的知识储备。没人愿意这样干。）

所以静态网站生成器就是干这个工作的：他会把你的md文件，自动嵌入到web页面中。不用你自己手动做这些操作，你要做的就是使用这些工具，遵循他们的格式要求就可以生成一个静态网站了。

  • 部署

上面说的网页生成器所做的事情是转换，资源仍然在你的本地电脑上，我们如何将资源放到网上呢？这个基本常识就是（将资源放到大家可以访问的Ip地址上，也就是自己的网站了。）

能做这件事的有很多：

  • 自己购买一个云服务器，然后，将生成的静态资源直接放服务器的磁盘上，别人就可以通过IP地址访问你的资源。
  • 通过一些托管平台（比如GitPage）本质上和服务器是一样的，只不过是别人帮你托管。
  • 其他方式

完成上面所有步骤，网站部署大致流程就完成了。剩下的就是一些细节问题（比如，如何写博客，如何使用生成器生成自己想要的网站样式（模板））等等问题。

正式搭建

工具：使用md写博客，使用hexo生成网页，使用GItPage托管（部署）网站。

hexo 的使用

在有自己博客的前提下，开始下载hexo，生成静态网页。

  • 安装:hexo是使用js写的平台，需要安装nodejs，并使用nodejs 包管理工具，NPM安装hexo软件。
1
npm install -g hexo-cli
  • hexo是一个博客框架，首先需要生成一个初始博客模板（框架），命令为：
1
2
hexo init blog_dir_name && cd my-blog
# blog_dir_name 是你想要放置你的网站的根目录
  • 这个框架就是hexo为你生成的一个静态网页模板，你可以在本地直接测试他的生成效果。你自己的网页基本也是这样。如果测试效果满意，就可以推送到服务器上，网站就建成了。本地测试命令（需要进入到博客根目录中）。
1
2
3
hexo server 
# 可以简写为hexo s
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

这会在本地启动服务器，你可以通过浏览器访问相应的端口进行访问。

  • 创建你的第一篇文章（帖子）

开始新帖子时，最好使用“草稿”功能。默认情况下，草稿不会发布，因此您可以自由更改其他帖子，同时保持未完成的草稿不公开。以下命令

1
2
hexo new draft "My First Blog Post"
# creates -> ./source/_drafts/My-First-Blog-Post.md

草稿帖子都会放在./source/_drafts/目录下，默认名是你的标题名。

使用 hexo new 命令时，可以使用除“draft”之外的其他模板。查看 ./scaffolds/ 文件夹并阅读 Hexo 文档。

  • 要编辑草稿，请导航至 ./source/_drafts/My-First-Blog-Post.md 并使用您最喜欢的 Markdown 编辑器打开该文件。
    让我们在您的新帖子中添加副标题和一些段落内容……
1
2
3
4
5
6
---
title: My First Blog Post
tags:
---
## Hello there
This is some content.

位于 Markdown 文件顶部的破折号之间的内容称为“front-matter”。它是 Hexo 和活动主题使用的元数据。有关更多信息，请参阅 Front-Matter 上的 Hexo 文档。

保存对 Markdown 文件的更改将被正在运行的 hexo 服务器自动检测并重新生成为静态 HTML 文件，但您必须刷新浏览器才能查看更改。

如果您不喜欢每次都手动刷新浏览器，hexo-livereload 或 hexo-browsersync 插件可以自动执行此操作。

  • 安装 hexo-browsersync 插件（我个人最喜欢的）：
1
2
$ npm install hexo-browsersync --save
$ hexo server --draft --open # 重启服务器

其他 Hexo 插件可以使用 npm 以相同的方式轻松安装。许多插件都具有可以在项目的 _config.yml 文件中进行调整的配置。您需要查阅每个插件的文档以了解其特定的配置属性。对于 hexo-browsersync，默认设置可以正常工作，不需要编辑 _config.yml 文件。

一些写作技巧

  • 显示更少的内容

假设您有一篇很长的文章，并且不喜欢整篇文章显示在列表页面中……
您可以使用 <!-- more --> 在 Markdown 中标记一个位置，以将其从列表页面中隐藏。它将被替换为“阅读更多”链接，该链接将打开文章的其余内容。

1
2
3
4
5
6
7
8
9
---
title: My First Blog Post
tags:
---
This is a summary of the post.
<!-- more -->
## Hello there
This is some content.

  • 插入图像

图像和其他资源文件可以放置在 ./source/ 文件夹下的子目录中。使用这张来自维基百科的原始 A-Team 图片作为测试。下载并保存到此路径：
./source/images/Ateam.jpg

编辑您的原始帖子，插入引用 /images/Ateam.jpg 的 Markdown 图像链接：

1
2
3
4
5
6
7
8
---
title: My First Blog Post
tags:
---
## Hello there
This is some content.

![I love it when a plan comes together.](/images/Ateam.jpg)

您应该在浏览器中看到类似这样的内容：

Assets(就是你的图片什么的东西) can also be organized in folders for each post. It requires enabling the post_asset_folder: true setting in _config.yml and some knowledge of its relative path referencing behavior. See the Hexo documentation on Asset Folders for more information.

  • 发布草稿

当需要将草稿移至“实时”帖子以供全世界查看时，请使用 hexo 发布命令：

1
hexo publish My-First-Blog-Post

运行此命令时会发生一些事情：

  1. markdown 文件 My-First-Blog-Post.md 从 ./source/_drafts/ 移动到 ./source/_posts。

  2. 文件的“front-matter”更改为包含发布日期：

1
2
3
4
5
6
---
title: My First Blog Post
date: 2024-06-02 21:45:16  # <----
tags:
---
...

最后，准备整个站点以进行部署。运行hexo generate命令：

1
2
 hexo generate
# generates -> ./public/

运行网站所需的所有内容都将放置在 ./public 文件夹中。您已准备好将此文件夹传输到您的公共网络服务器或 CDN。

现在您已经了解了一般工作流程，接下来探索一些增强网站的其他方法：

And to see the options for a particular command, use hexo help {command}:

1
2
$ hexo help new
$ hexo help server

参考：

开始使用Hexo博客框架