使用HEXO和GitHubPage搭建Blog

简述

大部分人印象中的网站常常都遥不可及，但是现在资源丰富的互联网早就已经给了解网站提供了很多信息渠道与免费资源。

如题所言，本文将使用hexo(一个博客框架)与GitHub Page（一个页面托管平台）来搭建一个博客，我也不会去仔细深究网站背后的工作原理，主要一笔带过。

若想搭建博客，就得先搭建一个网站，之后在这个网站框架下再加入新内容，所以本文分四步步，

  • 先使用github来搭建静态页面（什么是静态页面？）
  • 然后再搭建hexo框架来创建博客
  • 上传博客
  • 最后再hexo中更换博客的主题以及如何写作。

1.搭建页面

1.1注册GitHub账号

打开Github 找到右上角Sign up按钮 ，点击后按照引导注册。

（什么？看不懂英文？。。。）

注册完毕后登录。

1.2创建仓库

登陆后找到顶端加号按钮，点击。

然后再点击New repository

如下界面，根据提示自行填写，但public选项一定要勾选。（这里的repository Name为仓库名，需要记住）

创建完后跳到这个页面，我们可以在这个仓库里上传代码或其他文件，由于我们创建网站，我们必须要创建一个index.html作为网站的首页。

为了创建这个文件，我们可以新建一个文本文件（txt）,输入以下代码 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Jiangno test</h1>
</body>
</html>

之后另存为index.html(注意：文件后缀名为html而不是txt)

这时我们就可以点击图中的超链接来上传index.html

1.3设置github page

点击仓库界面菜单的Settings

在左侧点击Pages

将Branch下的设置改为如图。 之后等待几分钟，刷新一下页面，就会变为下图 此时点击visit site按钮就可以访问我们自己的页面了！

这里的域名就是 Github用户名+github.io/仓库名 的格式

1.4小结

所以这么一个静态页面的网站就是由一个html文件来支撑的，每次更新网站就是对html文件的更新，这样的缺点就是无法进行评论，点赞之类需要数据库的操作，所以想要更新页面只能手动操作，这就是github page的缺点。

2.HEXO框架

2.1简介

如第一节所说，我们若是每次都要手动去修改这些html文件显然是低效率的，我们应该专注于文章本身而非代码，所以使用hexo可以将.md文件(md全称markdown,是用来写文章的一门简单的标记语言，熟练之后写文章效率较高。)转换为一个个html文件，并生成不同的分类页面，自动归档等功能。

我们可以简单的理解hexo为一个将md文件转化为html的工具，这个工具需要搭建在自己的电脑上。正如c语言代码需要C编译器，hexo使用nodejs编写的自然就需要nodejs运行环境。

2.2安装Node.js

下载node(点击超链接)，下载安装包，按照指示安装（什么？你不会安装。。。）

安装完毕打开命令行

win+r键 打开运行 输入cmd即可 回车打开一个黑色框框。

输入node -v出现如图软件版本号就可以了。

2.3安装hexo

先随地新建一个文件夹

打开之后 右击 在终端中打开。 输入npm init -y来初始化项目。 之后输入npm install hexo-cli -g这是一个hexo脚手架工具，安装之后可以快速初始化hexo博客环境。 （如果npm install 半天安装不好 那多半是你被墙了，解决方法可以尝试输入以下代码npm config set registry https://registry.npmmirror.com）

安装完脚手架工具可以在刚刚的文件夹中输入以下命令hexo init blog 这句代码指的是创建blog文件夹，然后初始化为hexo项目，输入完效果如图。 （注意，此处可能需要git,以及魔法上网，安装git详见2.4 Git的安装）

在这个文件夹下，打开终端，输入 

1
2
hexo g #生成页面
hexo s #开启本地服务器
就会出来一个localhost:4000,此时在浏览器输入http://localhost:4000就可以访问到本地的页面。

2.4 Git的安装

由于需要git,所以讲解git的安装

打开git网站下载（git下载）

无脑安装之后 按下win+r键 输入cmd 打开命令行

按格式输入以下命令 

1
2
3
git config --global user.name "GitHub的用户名"
git config --global user.email "GitHub的邮箱"
ssh-keygen -t rsa -C "GitHub的邮箱"

之后会生成一段ssh密钥在[C:\Users\用户名\.ssh]这个文件夹下，文件名为：id_rsa.pub打开之后复制里面的所有东西。

打开GitHub，登录， 点击头像，打开Settings 打开SSH and GPG Keys

点击New SSH Key 新建一个，名字随便取，按照提示，把刚才复制的Key填写进去确认，之后就可以了。到此，git设置完毕。

2.5 小结

现在，你已经安装好了hexo,已经可以在本地搭建一个博客系统了，因为hexo需要git工具，所以你安装了git,接下来将会讲解如何将hexo生成的页面通过git更新到github仓库中。

3.部署页面

为了部署页面，我们需要需要一个上传工具，这个工具同样使用nodejs编写， 打开博客文件夹的终端，输入以下代码来安装 

1
npm install hexo-deployer-git --save

安装完毕，我们打开博客的配置文件_config.yml（此文件在博客文件夹下。） 翻到最后，找到deploy:

将deploy这片内容换为如下： 

1
2
3
4
deploy:
  type: git
  repo: https://github.com/GitHub的用户名/githubPage的仓库名.git
  branch: main

在部署之前我们还要设置一下hexo的域名 在配置文件中找到url:将其冒号后的网址改为你的githubpage域名（一般是github用户名.github.io/仓库名）

之后，回到博客文件夹终端输入 

1
hexo d
来部署到github page,稍等片刻你就可以通过github用户名.github.io/仓库名来访问你的hexo博客。

4.博客操作

4.1博客设置

我们可以在配置文件_config.yml进行各种网站的配置，配置文件的解释可以移步到hexo官方文档配置

4.2博客个性化

hexo是一个开源博客系统，任何人都可以创建自己的主题，你可以在百度，论坛等地方找到hexo的主题，这里以fluid为例配置一个主题。（本博客使用的就是fluid主题）

首先，下载主题包，我们下载fluid-theme

下载完后的压缩文件解压，出来一个文件夹，这个文件夹就是主题，把这个文件夹放到博客下的themes文件夹，注意：是一整个文件夹放到themes而非文件夹里的内容分开放

然后将这个主题文件夹改为fluid。

此时，我们放好了主题，但是hexo还没有设置，所以我们到配置文件_config.yml下，找到theme:将冒号后改为fluid就可以了。

接下来，我们需要重新生成一下页面，输入hexo g再输入hexo s运行一下本地服务器来预览一下。

需要注意的是hexo主题还有一个主题自己的配置文件，也叫做_config.yml,在主题文件夹下，可以进行主题相关的配置

4.3写文章

说了这么多，怎么写一篇文章呢？？？？

在hexo博客文件夹下 

1
2
3
4
5
- node_modules
- public
- scaffolds
- source
- themes
文件夹列表中有一个source文件夹,source中有一个_posts文件夹，里面即为.md文件，初始里面有一个hello_world.md,你可以通过修改这个文件来尝试体验markdown语法，之后若想要创建新文章，就可以新建md文件，按照hello_word.md的格式以及markdown的语法来写文章。 
1
2
3
4
---
title: Hello World
---
Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).

写完文章后，就是惯例的hexo g hexo s hexo d。

5.结语

hexo与githubpage只适用于轻量级的小网站，但是已经足够普通博客使用了，更多关于hexo的内容可以查看hexo的官方文档

网站
#node #hexo #博客
使用HEXO和GitHubPage搭建Blog
http://jiangno.com/2024/12/31/24_12_31_make_blog_hexo/
作者
江の
发布于
2024年12月31日
许可协议